一、交集选择器
又称标签指定式选择器
作用：选择出同时符合两个标签的内容
格式：1.由 两个 选择器构成，其中第一个为标签选择器，第二个为class选择器或id选择器；2.两个选择器之间 不能有空格
例如：老师要求他的班级中所有学生把头发染成 红色
div.student{
color: red ;
}二、并集复合选择器
作用：将选中的所有选择器定义相同的样式
格式：各个选择器通过 逗号 连接而成
注意：任何选择器都可以作为并集选择器的一部分（有容乃大）
例如：校长要求学校标语、全体老师、郭越以后写字只能写 宋体
p.s LOG n,.t each er, # gy{
font-f ami ly:?"宋体";
}三、层级选择器
1、后代元素复合器
作用：选择某元素的子子孙孙
格式：外层标签写在前面，内层标签写 在后 面，中间用空格分隔
例如：愚公的后代想要集体染发
#yuGong . PE ople{
color: red;
} 注意：此时愚公的后代中 所有people类的后代都会 染发，包括愚公的 儿子 ，孙子，曾孙子…
2、子元素复合选择器
作用：选择作为某元素子元素(亲儿子)的元素
格式：父级标签写在前面，子级标签写在后面，中间由 > 进行连接
例如：愚公的儿子们想要集体染发
#yuGong>.people{
color: red;
} 注意:此时愚公的后代中所有people类的 亲儿子 都会染发，愚公的孙子，曾孙子并没有染发，因为 年纪尚幼 这里只会选择子元素(亲儿子)
3、临近兄弟选择器
作用：选择紧接在另一个元素后的元素，而且二者有相同的父元素
格式：选择器使用加号“+”来链接前后两个选择器。选择器中的两个元素有 同一个父亲 ，而且第二个元素必须 紧跟 第一个元素
例如：葫芦七兄弟里的三娃要染发（用二娃定位三娃）
#secondBaby+#thirdBaby{
color: red;
}4、普通兄弟选择器
作用：选择与另一个元素同级的元素，而且二者有相同的父元素
格式：使用 “~”来链接前后两个选择器。选择器中的两个元素有 同一个父亲 ，但第二个元素 不必紧跟 第一个元素。
例如：葫芦七兄弟里的三娃要染发（用大娃定位三娃）
# Big Baby~#thirdBaby{
color: red;
}四、伪类与伪元素选择器
0、“伪” 是什么 ？
“伪”是指该选择器用来修饰不在文档树中的部分。
必读：http://HdhCmsTestalloyte am .COM /2016/05/summary-of-pseudo-classes-and-pseudo-elements/# PR ettyPhoto
1、伪 类选择器
作用：用于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。
以下只介绍上文中未详细说明的 状态伪类
1）link
作用：设置该元素（超链接）未访问的样式
格式：
a:link{ .. .}2）vis IT ed
作用：设置该元素（超链接）已访问过的样式
格式：
a:visited{...}3）hover
作用：设置该元素鼠标悬停时的样式
格式：
a:hover{...}4）activer
作用：设置该元素 活动 （鼠标按下）的样式
格式：
a:active{...}5）focus
作用：设置该元素获取 焦点 的样式
格式：
a:focus{...}注意 ：伪类的顺序不要颠倒，要按照link-visited-hover-active的顺序，否则可能会出错
2、伪元素选择器
作用：用于创建一些不在文档树中的元素，并为其添加样式。
| :: First -letter | 选取选择器的首字母 | p::first-letter |
| ::first-line | 选取选择器的首行 | p::first-line |
| ::before | 在选择器前增加内容，使用 content 属性来指定要插入的内容。（被插入的内容实际上不在文档树中） | p::before{content: "hello ";} |
| : :after | 在选择器后增加内容，使用 content 属性来指定要插入的内容。（被插入的内容实际上不在文档树中） | p::after{content: "hello ";} |
| ::selection | 匹配被用户选中 或者 处于高亮状态的部分 | p::selection |
五、属性选择器
| E[att^=value] | 表示E标签的att属性值是以’value’开头的 | p[id^=‘yuan’]{color: red;} |
| E[att$=value] | 表示E标签的att属性值是以’value’结尾的 | p[id$=‘chao’]{ color: blue;} |
| E[att*=value] | 表示E标签的att属性值中包含’value’字符串 | p[class*=‘shi’]{font- Size: 35px;} |
更多编程相关知识，请访问：编程入门！！
以上就是CSS选择器学习之聊聊复合选择器（详细介绍）的详细内容，更多请关注其它相关文章！
总结
以上是 为你收集整理的 CSS选择器学习之聊聊复合选择器（详细介绍） 全部内容，希望文章能够帮你解决 CSS选择器学习之聊聊复合选择器（详细介绍） 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于CSS选择器学习之聊聊复合选择器（详细介绍）的详细内容...