HTML CSS之复合选择器中的交集选择器、并集选择器、后代选择器、子元素选择器、相邻兄弟选择器、属性选择器

复合选择器是通过基本选择器进行组合后构成的，常用的复合选择器有：交集选择器、并集选择器、后代选择器、子元素选择器、相邻兄弟选择器和属性选择器等。

交集选择器

交集选择器由两个选择器直接构成，其中第一个必须是元素选择器，第二个必须是类选择器或者ID选择器。两个选择器之间必须连续写，不能有空格。交集选择器选择的元素必须是有第一个选择器指定的元素类型，该元素必须包含第二个选择器对应的ID或者类名。交集选择器选择的元素是三个选择器的样式，即第一个选择器、第二个选择器和交集选择器三个选择器样式的层叠效果。

比如： p.one 选择的是：类名为 .one 的段落标签。

元素选择器.类选择器|#ID选择器{属性1:属性值1；属性2：属性值2；…
}

**PS:交集选择器由于会增加代码量，会影响性能且不利于后期维护，所以除了不得已使用外，一般不推荐使用。

2.并集选择器
并集选择器也叫分组选择器或群组选择器，它是有两个或两个以上的任意选择器组成的，不同选则器之间用","隔开，实现对多个选择器进行“集体声明”，特点是：所设置的样式对并集选择器中各个选择器都有效，它的作用是把不同选择器的相同样式抽取出来，然后放到一个地方一次性定义，从而简化了CSS代码量。

选择器1,
选择器2,
选择器3,
…{属性1:属性值1；属性2：属性值2；…
}

语法说明：选择器的类型任意，既可以是基本选择器，也可以是一个复合选择器。
3.后代选择器
后代选择器又称包含选择器，用于选择指定元素的后代元素

选择器1 选择器2 选择器3 …{属性1:属性值1；属性2：属性值2；…
}

语法说明位于左边的选择器可以包含两个或多个使用空格隔开的选择器，位于后面的选择器选择的元素术语前面选择器的孩子，这些选择器既可以是基本选择器，也可以是复合选择器，需要注意的是，后代选择器所选择的后代元素包括任意嵌套层次的后代，而且一般后代选择器中包含的选择器最多三层。

4.子元素选择器
后代选择器可以选择某个元素指定类型的所有后代元素，如果只想选择某个元素的所有子元素，则需要使用子元素选择器。

选择器1>选择器2{属性1:属性值1；属性2：属性值2；…
}

语法说明：">"称为左结合符，在其左右两边可以出现空格,“选择器1>选择器2”的含义为选择作为选择器1指定元素的所有选择器2指定的子元素，例如：div>span表示选择了div元素内的所有子元素span。子元素选择器中的两个选择器既可以是基本选择器，也可以是交集选择器，另外选择器1还可以是后代选择器。
我一开始觉得后代选择器和子元素选择器，它们两个似乎很像，但是它们还是有一定的区别：例如下面这两行语句：

<h1>这是非常<span>重要</span>且<span>关键</span>的一步。</h1><h1>这是真的非常<em><span>重要</span></em>且<em><span>关键</span></em>的一步。</h1>

如果我们想操作span元素，如果使用后代选择器，即h1 span，会对这两行的span元素都进行操作，因为这两行中的span都是h1的后代，但是如果我们想只对第一行的span元素进行操作，可以用子元素选择器，即h1>span，因为第二行的span元素是em元素的子元素，并不直接是h1的子元素。
5.相邻兄弟选择器
如果需要选择紧接在某个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器。

选择器1+选择器2{属性1:属性值1；属性2：属性值2；…
}

"+"称为相邻兄弟结合符，在其左右两边可以出现空格，"选择器1+选择器2"的含义为选择紧接在选择器1指定元素后出现选择器2指定的元素，且这两个元素拥有共同的父元素，例如：div+span 表示选择紧接在div元素后出现的span元素，其中div和span两个元素拥有共同的父元素。
6.属性选择器
在CSS中，我们还可以根据元素的属性及属性值来选择元素，此时用到的选择器称为属性选择器，属性选择器的使用主要有两种形式，其基本语法如下：

属性选择器1属性选择器2…{属性1:属性值1；属性2：属性值2；…
}
元素选择器属性选择器1属性选择器2…{属性1:属性值1；属性2：属性值2；…
}

语法说明：属性选择器的写法是[属性表达式]，其中属性表达式可以是一个属性名，也可以是“属性=属性值”等这样的表达式，例如：[title]和[type="text"]都是属性选择器，属性选择器前可以指定某个元素选择器，此时将在指定类型的元素中进行选择，例如：img[title]只能选择具有title属性的img元素。属性选择器前也可以使用通配符"*",此时效果和第一种形式完全一样，都不限定选择元素的类型，例如：*[title]和[title]效果完全一样，都将选择具有title属性的所有元素，注意"*"和属性选择器之间没有空格，另外可以连续使用多个不同的属性选择器，此时将进一步缩小元素选择的范围，例如：a[href][title]用于选择同时具有href和title属性的a元素

类型	选择器	描述
根据属性选择	[属性]	用于选取带有指定属性的元素
根据属性和值选择	[属性=值]	用于选取带有指定属性和值的元素
根据部分属性值选择	[属性~=值]	用于选取属性值中包含指定值的元素，注意该值必须是一个完整的单词
子串匹配属性值	[属性 \|=值]	用于选取属性值以指定值开头的元素，注意该值必须是一个完整的单词或带有"_"作为连接符连接后续内容的字符串，如“en-”
子串匹配属性值	[属性^=值]	用于选取属性值以指定值开头的元素
子串匹配属性值	[属性$=值]	用于选取属性值以指定值结尾的元素
子串匹配属性值	[属性$=值]	用于选取属性值以指定值结尾的元素
子串匹配属性值	[属性*=值]	用于选取属性值中包含指定值的元素

HTML CSS之复合选择器中的交集选择器、并集选择器、后代选择器、子元素选择器、相邻兄弟选择器、属性选择器相关推荐

CSS复合选择器（交集、并集、后代、子元素、兄弟、伪类、伪元素）
CSS复合选择器总结复合选择器是由两个或多个基础选择器,通过不同的方式组合而成的,目的是为了可以选择更准确更精细的目标元素标签. :first-child与:first-of-type区别 :fi ...
js将数组中一个或多个字段相同的子元素中合并
最近js中遇到js将数组中一个或多个字段相同的子元素中合并,相信很多朋友也有遇到,大家可能有多种方法,我在这里记录一个相对简单的方法,当然大家如有其它更好的方法,请提出来大家共同学习. //将经济事项 ...
html css子标签,HTML+CSS系列:CSS选择器(标签、ID、类、通配符、后代、子元素、并集、伪类）...
一.标签选择器 Document h1 { color: red; } h2{ color: green; } Hello World! Hello World! Hello ! Hello ! 二. ...
2-9 prev + next选择器 “远亲不如近邻” 返回且只返回唯一-个元素。而通过prev + next选择器就可以查找与“prev”元素紧邻的下一个“next”元素...
prev + next选择器俗话说"远亲不如近邻",而通过prev + next选择器就可以查找与"prev"元素紧邻的下一个"next" ...
CSS选择器（id选择器，包含选择器，标签名选择器，类选择器，属性选择器，通配符选择器，伪类选择器，相邻选择器，选择器的优先级，子选择器）
CSS选择器 HTML:定义网页元素 CSS:美化网页元素,控制HTML标签展示样式 CSS与HTML相结合,结合方式如下: (1)内联样式:CSS代码复用性太低,书写凌乱,不推荐,缺点就是一次只能控 ...
css3中的属性选择器有哪些,CSS3中属性选择器使用方法详解
css中属性选择器我感觉与css2有比较大的区别了,下面我整理了一些关于css3选择器的使用例子,希望对各位会带来帮助. 注释: 一.属性选择器除了IE6不支持外,其他的浏览器都能支持. 二.E[at ...
css3的相邻选择器,CSS选择器之相邻兄弟选择器
选择器是css里面非常重要的一部分知识,根据不同的样式定义,CSS提供了不同类型的选择器,大家可以根据自己的实际情况选择合适的选择器来编写代码,前面的课程我们对类选择器,子元素选择器等作了介绍,下面让 ...
站长在线Python精讲：Python中集合的交集、并集、差集和对称差集运算方法详解
欢迎你来到站长在线的站长学堂学习Python知识,本文学习的是<Python中集合的交集.并集.差集和对称差集运算方法详解>.主要讲的是集合运算的相关的概念,及运算方法,包括:集合的交集. ...
03-高级选择器,属性选择器,伪类选择器
高级选择器分为: 后代选择器子代选择器并集选择器交集选择器后代选择器使用空格表示后代选择器.顾名思义,父元素的后代(包括儿子,孙子,重孙子) .container p{color: red; ...

HTML CSS之复合选择器中的交集选择器、并集选择器、后代选择器、子元素选择器、相邻兄弟选择器、属性选择器

HTML CSS之复合选择器中的交集选择器、并集选择器、后代选择器、子元素选择器、相邻兄弟选择器、属性选择器相关推荐

最新文章

热门文章