CSS选择器学习之聊聊复合选择器（详细介绍）

PHP中文网 • 2025年3月10日 18:49:16 • 编程技术 • 阅读 2

本篇文章给大家详细介绍一下css中的复合选择器，了解一下css中的交集选择器、并集复合选择器、层级选择器、伪类与伪元素选择器、属性选择器，一起学习吧！

一、交集选择器

又称标签指定式选择器

作用：选择出同时符合两个标签的内容

格式：1.由两个选择器构成，其中第一个为标签选择器，第二个为class选择器或id选择器；2.两个选择器之间不能有空格

立即学习“前端免费学习笔记（深入）”；

例如：老师要求他的班级中所有学生把头发染成红色

div.student{color: red;}

登录后复制

二、并集复合选择器

作用：将选中的所有选择器定义相同的样式

格式：各个选择器通过逗号连接而成

注意：任何选择器都可以作为并集选择器的一部分（有容乃大）

例如：校长要求学校标语、全体老师、郭越以后写字只能写宋体

p.slogn,.teacher,#gy{font-family: "宋体";}

登录后复制

三、层级选择器

1、后代元素复合器

作用：选择某元素的子子孙孙

格式：外层标签写在前面，内层标签写在后面，中间用空格分隔

例如：愚公的后代想要集体染发

#yuGong .people{   color: red;   }

登录后复制

注意：此时愚公的后代中所有people类的后代都会染发，包括愚公的儿子，孙子，曾孙子…

2、子元素复合选择器

作用：选择作为某元素子元素(亲儿子)的元素

格式：父级标签写在前面，子级标签写在后面，中间由 > 进行连接

例如：愚公的儿子们想要集体染发

#yuGong>.people{   color: red;}

登录后复制

注意:此时愚公的后代中所有people类的亲儿子都会染发，愚公的孙子，曾孙子并没有染发，因为年纪尚幼这里只会选择子元素(亲儿子)

3、临近兄弟选择器

作用：选择紧接在另一个元素后的元素，而且二者有相同的父元素

格式：选择器使用加号“+”来链接前后两个选择器。选择器中的两个元素有同一个父亲，而且第二个元素必须紧跟第一个元素

例如：葫芦七兄弟里的三娃要染发（用二娃定位三娃）

#secondBaby+#thirdBaby{   color: red;}

登录后复制

4、普通兄弟选择器

作用：选择与另一个元素同级的元素，而且二者有相同的父元素

格式：使用 “~”来链接前后两个选择器。选择器中的两个元素有同一个父亲，但第二个元素不必紧跟第一个元素。

例如：葫芦七兄弟里的三娃要染发（用大娃定位三娃）

#bigBaby~#thirdBaby{   color: red;}

登录后复制

四、伪类与伪元素选择器

0、“伪”是什么？

“伪”是指该选择器用来修饰不在文档树中的部分。

必读：http://www.alloyteam.com/2016/05/summary-of-pseudo-classes-and-pseudo-elements/#prettyPhoto

1、伪类选择器

作用：用于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。

以下只介绍上文中未详细说明的状态伪类

1）link

作用：设置该元素（超链接）未访问的样式

格式：

a:link{...}

登录后复制

2）visited

作用：设置该元素（超链接）已访问过的样式

格式：

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选择器学习之聊聊复合选择器（详细介绍）的详细内容，更多请关注【创想鸟】其它相关文章！

发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2873025.html