复合选择器是由两个或多个基础选择器,通过不同的方式组合而成的,目的是为了可以选择更准确更精细的目标元素标签。

交集选择器

交集选择器由两个选择器构成,其中第一个为标签选择器,第二个为class选择器,两个选择器之间不能有空格,如h3.special。

比如:   p.one   选择的是: 类名为 .one  的 段落标签。
使用率相对较少

记忆技巧:

交集选择器 是 并且的意思。  即...又...的意思

并集选择器

并集选择器(CSS选择器分组)是各个选择器通过逗号连接而成的,任何形式的选择器(包括标签选择器、class类选择器id选择器等),都可以作为并集选择器的一部分。如果某些选择器定义的样式完全相同,或部分相同,就可以利用并集选择器为它们定义相同的CSS样式。

比如  .one, p , #test {color: #F00;}  表示   .one 和 p  和 #test 这三个选择器都会执行颜色为红色。  通常用于集体声明。

记忆技巧:

并集选择器  和 的意思,  就是说,只要逗号隔开的,所有选择器都会执行后面样式。

后代选择器

后代选择器又称为包含选择器,用来选择元素或元素组的后代,其写法就是把外层标签写在前面,内层标签写在后面,中间用空格分隔。当标签发生嵌套时,内层标签就成为外层标签的后代。

子元素选择器

子元素选择器只能选择作为某元素子元素的元素。其写法就是把父级标签写在前面,子级标签写在后面,中间跟一个 进行连接,注意,符号左右两侧各保留一个空格。

白话: 这里的子 指的是 亲儿子 不包含孙子 重孙子之类。

 比如:  .demo > h3 {color: red;}   说明  h3 一定是demo 亲儿子。  demo 元素包含着h3。

伪类选择器

伪类选择器用于向某些选择器添加特殊的效果。比如给链接添加特殊效果, 比如可以选择 第1个,第n个元素。

为了和类选择器相区别,  类选择器是一个点 比如 .demo {}   而我们的伪类 用 2个点 就是 冒号  比如  :link{}

链接伪类选择器

-:link  /*未访问的链接*/
-:visited /*已访问的链接*/
-:hover /*鼠标移动到链接*/
-:active /*选定的链接*/

CSS复合选择器的更多相关文章

  1. 0013 CSS复合选择器:后代、子代、交集、并集、超链接伪类

    重点: 复合选择器 后代选择器 并集选择器 标签显示模式 CSS背景 背景位置 CSS三大特性 优先级 1. CSS复合选择器 目标 理解 理解css复合选择器分别的应用场景 应用 使用后代选择器给元 ...

  2. 【CSS复合选择器、元素显示模式、背景】前端小抄(3) - Pink老师自学笔记

    [CSS复合选择器.元素显示模式.背景]前端小抄(3) 本学习笔记是个人对 Pink 老师课程的总结归纳,转载请注明出处! 一.CSS的复合选择器 1.1 什么是复合选择器 在 CSS 中,可以根据选 ...

  3. css复合选择器的权重

    选择器的权重 标签选择器的权重为0001 class选择器的权重为0010 id选择器的权重为0100 属性选择器的权重为0010 伪类选择器的权重为0010 伪元素选择器的权重为0010 包含选择器 ...

  4. CSS复合选择器是什么?复合选择器是如何工作

    复合选择器介绍 复合选择器其实很好理解,说白了就跟我们生活中的有血缘关系家庭成员一样,通过标签或者class属性或id属性,去找对应的有血缘关系的某个选择器,具体的大家往下看哦. 如果是初学者对基本的 ...

  5. CSS复合选择器和div盒子模型

    一.复合选择器(3种) 1.交集复合选择器 特点:由2个选择器组成,其中第一个必须是标签选择器,第二个是类或id选择器.两个选择器之间没有空格(有空格属于层级选择器) <h3 class=&qu ...

  6. CSS复合选择器,元素的显示模式,CSS背景设置

    欢迎大家去博客冰山一树Sankey,浏览效果更好.直接右上角搜索该标题即可 博客园主页:博客园主页-冰山一树Sankey CSDN主页:CSDN主页-冰山一树Sankey 前端学习:学习地址:黑马程序 ...

  7. css学习_css复合选择器

    css复合选择器 a.交集选择器  (即...又...:选择器之间不能有空格) p.one{color:red;] b.并集选择器(中间由逗号隔开) p,div{color:red;} c.后代选择器 ...

  8. CSS.01 -- 选择器及相关的属性文本、文字、字体、颜色、

    与html相比,Css支持更丰富的文档外观,Css可以为任何元素的文本和背景设置颜色:允许在任何元素外围设置边框:允许改变文本的大小,装饰(如下划线),间隔,甚至可以确定是否显示文本. 什么是CSS? ...

  9. CSS符合选择器

    CSS复合选择器 后代选择器 后代选择器又称为包含选择器,可以选择父元素里面的子元素.其写法就是把外层标签写在前面,内层标签写在后面,中间用空格分隔,当标签发生嵌套时,内层标签就成为外层标签的后代 元 ...

随机推荐

  1. Ubuntu下编写C语言程序

    新建C文件,新建一个文件用touch,新建文件夹用mkdir. 打开文本编辑器,编辑C文件,命令用gedit xxx.C 编写C程序,Ctrl+S保存 编译运行 1.gcc命令是编译 -o是可选项 是 ...

  2. Swagger SpringBoot 集成

    说明:Swagger 是一个规范和完整的框架,用于生成.描述.调用和可视化 RESTful 风格的 Web 服务.总体目标是使客户端和文件系统作为服务器以同样的速度来更新.文件的方法,参数和模型紧密集 ...

  3. Python基础学习四 函数

    1.内置函数 Python内置了很多有用的函数,是可以直接调用的. 参考链接:https://docs.python.org/3/library/functions.html 调用函数的时候,如果传入 ...

  4. 如何搭建自己的SPRING INITIALIZR server

    这两天在慕课学Spring boot ,用idea通过spring initializr新建项目 即使用代理连不上.无奈. 参考了 GitHub - spring-io/initializr: A w ...

  5. ORA-00372此时无法修改文件5 ORA-01110数据文件5'M:\WWFDATA.dbf'

    错误提示如下图: ORA-00372此时无法修改文件5 ORA-01110数据文件5'M:\DB_DATA\SEINESCMDB\WWFDATA_DATA01.dbf' 分析原因及解决方法: 1.查看 ...

  6. codeforce 457DIV2 C题

    题意 你需要构造一个n个点m条边的无向有权图,要求这个图的MST中边权的和与从1到n的最短路长度都为素数 分析 可以想到这样一种贪心,在i到i+1直接连一条边,这样最短路和MST都会是同样的一些边.只 ...

  7. codeforce 459DIV2 C题

    题意 一串括号字符串,里面存在一些‘?’,其中‘?’既可以当作 '(' 又可以当作 ')' ,计算有多少对(l,r),在s中[sl,s(l+1),s(l+2),.....sr],内的括号是匹配的.n= ...

  8. mysql视图总结

    http://www.2cto.com/database/201508/427083.html 一. 视图概述 视图是一个虚拟表,其内容由查询定义.同真实的表一样,视图包含一系列带有名称的列和行数据. ...

  9. 674. Longest Continuous Increasing Subsequence最长连续递增子数组

    [抄题]: Given an unsorted array of integers, find the length of longest continuous increasing subseque ...

  10. 189. Rotate Array 从右边开始翻转数组

    [抄题]: Rotate an array of n elements to the right by k steps. For example, with n = 7 and k = 3, the ...