CSS - 选择器（一文了解全部选择器及用法）

🌈个人主页：王子玉博客

🔆 免费专栏：HTML&CSS

❤️ 分享网站： 《Python自学网》👉👉基础入门到逐步深入 | 适合新手入门到精通

体系课程：Web开发、爬虫、自动化运维、自动化测试、GUI图形界面化
~~
🙏 如果觉得博主文章对你有所帮助的话，还望大家多多支持呀！关注 | 点赞 | 收藏 | 评论 ​

HTML& CSS系列文章类目

内容序列	文章链接
HTML& CSS（1）	HTML与HTML5 知识点梳理总结
HTML& CSS（2）	CSS - 初识 css（DOM树、引入方式、书写规则）

选择器（重点）

要想将CSS样式应用于特定的HTML元素，首先需要找到该目标元素。在CSS中，执行这一任务的样式规则部分被称为选择器（选择符）。

选择器，会参照DOM树, 从根节点开始, 来筛选满足条件的节点, 然后将样式作用在其身上。

选择器，帮助我们精准的选中想要的元素。

CSS基础选择器

1.1 标签选择器（标签名）

标签选择器是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。

标签名{属性1:属性值1; 属性2:属性值2;} 

<p>哈喽！</p>

p{color: red;}

标签选择器最大的优点是能快速为页面中同类型的标签统一样式，同时这也是他的缺点，不能设计差异化样式。

1.2类选择器（.类名）

类选择器使用“.”（英文点号）进行标识，后面紧跟类名

.类名{属性1:属性值1; 属性2:属性值2;}

<p class="passage">哈喽！</p>

.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;}

<p id="passage">哈喽！</p>

#passage{color: red;}

id属性 ： 唯一

大多数HTML元素都可以定义id属性，元素的id值是唯一的，只能对应于文档中某一个具体的元素。

id选择器和类选择器区别

1. W3C标准规定，在同一个页面内，不允许有相同名字的id对象出现，但是允许相同名字的class

2. 类选择器（class） 好比人的名字， 是可以多次重复使用的

3. id选择器 好比人的身份证号码， 全中国是唯一的， 不得重复， 只能使用一次

4. 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 href="#">哈喽，不要点我！</a>

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"。

[属性名 ^= 属性值] ： 匹配属性值以指定值开头的每个元素。

[属性名 $= 属性值] ： 匹配属性值以指定值结尾的每个元素。

[属性名*= 属性值] ： 匹配属性值包含指定值的每个元素。

<ul>
    <li class="top-1 one">我是第1个选项</li>
    <li class="top-2 two" title="css">我是第2个选项</li>
    <li class="three hello">我是第3个选项</li>
    <li class="four">我是第4个选项</li>
    <li class="five">我是第5个选项</li>
    <li class="six">我是第6个选项</li>
</ul>

/* 用于选取带有指定属性的元素。 */
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元素除外

代码：

<ul>
    <li class="box">第1个</li>
    <li>第2个</li>
    <li>第3个</li>
    <li>第4个</li>
    <li>第5个</li>
    <li>第6个</li>
</ul>

/*选择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 后代选择器 （空格）

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

当标签发生嵌套时，内层标签就成为外层标签的后代。

子孙后代都可以这么选择。 或者说，它能选择任何包含在内的标签。

<div class="nav">
    <ul>
    	<li></li>
    </ul>
</div>

.nav ul li{color: #333;}

2.3 子代选择器 （>）

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

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

<ul>
	<li></li>
</ul>

ul > li{color: #333;}
/* 说明：li 一定是ul 亲儿子。 ul 元素包含着li */

---

2.4 相邻兄弟 （+）

选中的是符号+后面的元素

<div>
    <p>哈喽！</p>
    <a href="#">哈喽，不要点我！</a>
</div>

p + a{color: red;}
/*选中的是元素a*/

2.5 通用兄弟元素选择器（~）

E~F ，E 和 F 属于同一父元素之内，并且 F 在 E 之后，会选择符合这样排列的所有的 F 元素

<ul>
    <li>Lorem.</li>
    <li class="special">Minima.</li>
    <li>Corporis!</li>
    <li>Corporis!</li>
    <li>Corporis!</li>
</ul>

.special ~ li{color: blue;}
/*选中的是类选择器special之后的所有li元素*/

---

选择器的并列

并集选择器 （ ，）

并集选择器（CSS选择器分组）是各个选择器通过逗号连接而成的，任何形式的选择器（包括标签选择器、class类选择器id选择器等），都可以作为并集选择器的一部分。

如果某些选择器定义的样式完全相同，或部分相同，就可 以利用并集选择器为它们定义相同的CSS样式。

/*标签,.clas,#id{属性1：值1; 属性2：值2;}*/
h2, .one, #name{font-size: 20px; color: #fff;}

并集选择器 “和” 的意思，逗号隔开，所有选择器都会执行后面样式，通常用于集体声明。