CSS - 选择器（一文了解全部选择器及用法）
🌈个人主页：王子玉博客
🔆 免费专栏：HTML&CSS
❤️ 分享网站： 《Python自学网》👉👉基础入门到逐步深入 | 适合新手入门到精通
体系课程：Web开发、爬虫、自动化运维、自动化测试、GUI图形界面化
~~
🙏 如果觉得博主文章对你有所帮助的话，还望大家多多支持呀！关注 | 点赞 | 收藏 | 评论
HTML& CSS系列文章类目
| 内容序列 | 文章链接 |
|---|---|
| HTML& CSS（1） | HTML与HTML5 知识点梳理总结 |
| HTML& CSS（2） | CSS - 初识 css（DOM树、引入方式、书写规则） |
文章目录
- CSS基础选择器
- 1.1 标签选择器（标签名）
- 1.2类选择器（.类名）
- 1.3 id选择器（#id名）
- 1.4 通配符选择器 （*）
- 1.5 伪类选择器（:hover :focus等）
- 1.6 伪元素选择器（::before ::after）
- 1.7 属性选择器（用的极少）
- 1.8 序选择器（:序列名）
- CSS复合选择器（选择器的组合）
- 2.1 交集选择器（并且）
- 2.2 后代选择器 （空格）
- 2.3 子代选择器 （>）
- 2.4 相邻兄弟 （+）
- 2.5 通用兄弟元素选择器（~）
- 选择器的并列
- 并集选择器 （ ，）
选择器（重点）
要想将CSS样式应用于特定的HTML元素，首先需要找到该目标元素。在CSS中，执行这一任务的样式规则部分被称为选择器（选择符）。
选择器，会参照DOM树, 从根节点开始, 来筛选满足条件的节点, 然后将样式作用在其身上。
选择器，帮助我们精准的选中想要的元素。
CSS基础选择器
1.1 标签选择器（标签名）
标签选择器是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。
标签名{属性1:属性值1; 属性2:属性值2;}
哈喽！
p{color: red;}
标签选择器最大的优点是能快速为页面中同类型的标签统一样式，同时这也是他的缺点，不能设计差异化样式。
1.2类选择器（.类名）
类选择器使用“.”（英文点号）进行标识，后面紧跟类名
.类名{属性1:属性值1; 属性2:属性值2;}
哈喽！
.passage{color: red;}
class属性 ： 一个元素可以有多个类名 、类名之间用空格做分割 ，类名也可以重复。
类选择器最大的优势是可以为元素对象定义单独或相同的样式。 可以选择一个或者多个标签
类名和id名命名规范
1、命名需要是具备语义性的单词，不能用 数字 拼音 符号
- 正确示范 ： wrap description title content
- 错误示范 : ccc a1 $ee 8yyds
2、命名需要多个单词连接的情况下, 标记语言中可以使用 _ - 进行连接， 不能直接单词拼接 或者驼峰命名 注意: 书写风格必须 统一 不容许出现 _ -一起使用的情况， 推荐使用 -
- 正确示范 : header-nav content-left slide-bar
- 错误示范 : headernav slideBar ContentLeft
3、命名需要进行适当的缩写, 单词连接层级不要超过4层
- 正确示范 : head-tit-ico
- 错误示范 : header-title-left-logo-icon
1.3 id选择器（#id名）
id选择器使用“#”进行标识，后面紧跟id名
#id名{属性1:属性值1; 属性2:属性值2;}
哈喽！
#passage{color: red;}
id属性 ： 唯一
大多数HTML元素都可以定义id属性，元素的id值是唯一的，只能对应于文档中某一个具体的元素。
id选择器和类选择器区别
W3C标准规定，在同一个页面内，不允许有相同名字的id对象出现，但是允许相同名字的class
类选择器（class） 好比人的名字， 是可以多次重复使用的
id选择器 好比人的身份证号码， 全中国是唯一的， 不得重复， 只能使用一次
id选择器和类选择器最大的不同在于 使用次数上
1.4 通配符选择器 （*）
通配符选择器用“*”号表示，他是所有选择器中作用范围最广的，能匹配页面中所有的元素
*{属性1:属性值1; 属性2:属性值2;}*{margin: 0; /* 定义外边距*/padding: 0; /* 定义内边距*/
}
通配符选择器一般用于demo页面的统一清除默认margin 和 padding ，其他地方应用很少
1.5 伪类选择器（:hover :focus等）
选中某些元素的某种状态，鼠标放在指定元素上
选择器:hover{属性1：值1;}
1）
:link超链接未被访问时的状态2）
:visited超链接已被访问过的状态3）
:hover鼠标悬停时状态 ( 用的比较多 )4）
:active激活状态,一般指鼠标按下时的状态5）
:focus用于选取获得焦点的元素 ( 用的比较多 )
注意：
前四个要是都写，按照1234的顺序，不然会出现bug
爱恨法则 love hate
哈喽，不要点我！
a:hover{font-size: 20px;}
伪类： 获取DOM树中不存在的信息，触发后生成某种状态
1.6 伪元素选择器（::before ::after）
生成子元素, 结合content属性值
选择器::before{content:"文本内容"；其他样式}选择器::after{content:"文本内容";其他样式 }
::before生成并选中某个元素内部的第一个子元素
::after生成并选中某个元素内部的最后一个子元素
content： content中的字符串的位置是标签内容的最前面或者最后面
伪元素： 伪元素在DOM树中创建了一些抽象元素，这些抽象元素是不存在于文档语言里的所书写的标签（字体图标就用到这个）
1.7 属性选择器（用的极少）
通过属性名或属性值来选择元素
语法格式如下：
[属性名]: 用于选取带有指定属性的元素。
[属性名 = 属性值]： 用于选取带有指定属性和值的元素。
[属性名 ~= 属性值]： 用于选取属性值中包含指定词汇的元素。
[属性名 |= 属性值]： 用于选取属性值以指定值开头的元素。
- 该值必须是整个单词，比如
lang="en"、class="top"，或者后面跟着连字符，比如lang="en-us"、class="top-text"。
[属性名 ^= 属性值]： 匹配属性值以指定值开头的每个元素。
[属性名 $= 属性值]： 匹配属性值以指定值结尾的每个元素。
[属性名*= 属性值]： 匹配属性值包含指定值的每个元素。
- 我是第1个选项
- 我是第2个选项
- 我是第3个选项
- 我是第4个选项
- 我是第5个选项
- 我是第6个选项
/* 用于选取带有指定属性的元素。 */
li[title]{color: red; /* 2 */}
li[class][title]{color: pink; /* 2 */}
/* 用于选取带有指定属性和值的元素。 */
li[class = "six"]{color: green; /* 6 */}
/* 用于选取属性值中包含指定词汇的元素。 */
li[class ~= "hello"]{color: yellow; /* 3 */}
/* 用于选取属性值以指定值开头的元素。 */
li[class |= "top"]{color: orange; /* 1 2 */}
/* 匹配属性值以指定值开头的每个元素。 */
li[class ^= "f"]{color: blue; /* 4 5 */}
/* 匹配属性值以指定值结尾的每个元素。 */
li[class $= "e"]{color: lightblue; /* 1 5 */}
/* 匹配属性值包含指定值的每个元素。 */
li[class *= "o"]{color: rebeccapurple; /* 1 2 3 4 */}
1.8 序选择器（:序列名）
结构(位置)伪类选择器
语法格式如下：
:first-child:选取属于其父元素的第一个子元素
:last-child:选取属于其父元素的最后一个子元素
:nth-child(n)： 匹配属于其父元素的第 N 个子元素，不论元素的类型
:nth-last-child(n)：选择器匹配属于其元素的第 N 个子元素，不论元素的类型，从最后一个子元素开始计数。
- n 可以是数字、关键词或公式 （ 2n偶数 2n+1 基数）
:not(选择器)： 否定伪类可以帮助我们选择不是选择器的某个元素，排除法
- 比如：
li:not(.box)表示选择所有的li元素，但是class为box的li元素除外
代码：
- 第1个
- 第2个
- 第3个
- 第4个
- 第5个
- 第6个
/*选择li元素的ul父元素的第一个子元素，也就是第一个li元素*/
li:first-child{font-size: 50px;}
/*选择li元素的ul父元素的最后一个子元素，也就是最后一个li元素*/
li:last-child{color: red;}
/*匹配属于li元素的ul父元素的第 1 个子元素*/
li:nth-child(1){background-color: red;}
/*匹配属于li元素的ul父元素的第 2 个子元素*/
li:nth-child(2){background-color: red;}
/*匹配属于li元素的ul父元素的第 3 个子元素*/
li:nth-child(3){background-color: red;}
/*匹配属于li元素的ul父元素的第 2N 个子元素，也就是偶数倍的子元素*/
li:nth-child(2n){color: blue;}
/*匹配属于li元素的ul父元素的第 2N+1 个子元素，也就是基数倍的子元素*/
li:nth-child(2n+1){olor: yellow;}
/*匹配属于li元素的ul父元素的第 1 个子元素,从最后一个子元素开始计数，倒数*/
li:nth-last-child(1){font-size: 50px;}
/*选择除了class名是box的li元素 */
li:not(.box){font-size: 100px;}
CSS复合选择器（选择器的组合）
复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的，目的是为了可以选择更准确更精细的目标元素标签。
2.1 交集选择器（并且）
交集选择器由两个选择器构成，其中第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格。
特定标签并且特定class，如 ：
h2.fz20
h2.fz20{font-size:20px}
交集选择器 是 并且的意思： 即…又…的意思，如
p.one
/*选择的是： 类名为 .one 的段落标签*/
2.2 后代选择器 （空格）
后代选择器又称为包含选择器，用来选择元素或元素组的后代，其写法就是把外层标签写在前面，内层标签写在后 面，中间用空格分隔。
当标签发生嵌套时，内层标签就成为外层标签的后代。
子孙后代都可以这么选择。 或者说，它能选择任何包含在内的标签。
.nav ul li{color: #333;}
2.3 子代选择器 （>）
子元素选择器只能选择作为某元素子元素的元素。其写法就是把父级标签写在前面，子级标签写在后面，中间跟一 个 > 进行连接，注意，符号左右两侧各保留一个空格。
白话： 这里的子 指的是 亲儿子 不包含孙子 重孙子之类。
ul > li{color: #333;}
/* 说明：li 一定是ul 亲儿子。 ul 元素包含着li */
2.4 相邻兄弟 （+）
选中的是符号+后面的元素
哈喽！
哈喽，不要点我！
p + a{color: red;}
/*选中的是元素a*/
2.5 通用兄弟元素选择器（~）
E~F ，E 和 F 属于同一父元素之内，并且 F 在 E 之后，会选择符合这样排列的所有的 F 元素
- Lorem.
- Minima.
- Corporis!
- Corporis!
- Corporis!
.special ~ li{color: blue;}
/*选中的是类选择器special之后的所有li元素*/
选择器的并列
并集选择器 （ ，）
并集选择器（CSS选择器分组）是各个选择器通过逗号连接而成的，任何形式的选择器（包括标签选择器、class类选择器id选择器等），都可以作为并集选择器的一部分。
如果某些选择器定义的样式完全相同，或部分相同，就可 以利用并集选择器为它们定义相同的CSS样式。
/*标签,.clas,#id{属性1：值1; 属性2：值2;}*/
h2, .one, #name{font-size: 20px; color: #fff;}
并集选择器 “和” 的意思，逗号隔开，所有选择器都会执行后面样式，通常用于集体声明。