CSS选择器总结

本文总结了CSS的选择器，包括CSS基础选择器（标签选择器，类选择器，id选择器，通配符选择器），复合选择器（后代选择器，子选择器，并集选择器，伪类选择器），CSS3新增选择器（属性选择器，结构伪类选择器，伪元素选择器），最后总结了各选择的选择权重。

---

---

1 基础选择器

1.1 标签选择器

用HTML标签名称作为选择器，为某一类标签指定统一的CSS样式，不能差异化设置样式

/* 将段落标签的内容统一设置为红色 */
p {color: red; }

1.2 类选择器（重要）

差异化选择不同的标签，单独选一个或某几个标签，用.类名（类名自定义）作为选择器，在对应的结构标签中设置class属性来定义相应的类调用样式。
样式声明语法：

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

结构调用语法：

<div class='类名'>标签内容</div>

• 长名称或词组可以使用中横线-来命名，不要使用纯数字、中文等命名，尽量使用英文字母，命名要有意义，命名规范见《Web前端开发规范手册.doc》
• 多类名：给一个标签指定多个类名，从而达到更多的选择目的，这些类名都可以选出这个标签。
  • 在标签class属性中写多个类名，多个类名用空格分开，这个标签就可以同时具有这些类名的样式
  • 使用场景：可以将多个标签具有的相同样式封装到一个类中，这些标签可以调用公共样式类，再分别调用自己独有的样式类，节省代码，同时修改方便

1.3 id选择器

CSS中id选择器以#id名定义，HTML元素以id属性来设置id 选择器，id属性只能在每个HTML文档中出现一次
样式声明语法：

 #id名 {
 	属性1: 属性值1;
 	...
}

结构调用语法

<div id="id名">标签内容</div>

• 类选择器～名字，id选择器～身份证号码，类选择器在修改样式中最常用，id选择器一般用于页面唯一性的元素上，常和JavaScript搭配使用

1.4 通配符选择器

以*表示选取页面中所有元素，例如清除所有网页元素的浏览器预设内外边距（如果有的话）

* {
	margin: 0;
	padding: 0;
}

• 通配符选择器不需要调用，自动就给所有元素使用样式
• 特殊情况才使用

---

2 复合选择器

由两个或以上的基础选择器进行组合形成复合选择器，常用的复合选择器包括后代选择器、子选择器、并集选择器、伪类选择器等。

2.1 后代选择器（重要）

也称为包含选择器，可以选择父元素里面的子元素，即选择嵌套标签的内层标签，可以嵌套多层，语法：元素1 元素2 { 样式声明 }

• 元素间用 空格隔开，按层级可以写多个元素
• 元素1是父级，元素2是子级，最终选择是最后一个元素
• 子级元素可以是儿子，也可以是孙子，只要是元素1的后代即可
• 元素1和元素2可以是任意基础选择器

例如：

/* 选择类名为.box的元素中的ul中的li标签 */
.box ul li {
	color: red;
	font-size: 12px;
}

2.2 子选择器（重要）

只能选择作为某元素的最近一级的子元素，即亲儿子元素，故子选择器可以理解为 “亲儿子选择器”，语法：元素1>元素2 { 样式声明}。

• 元素间用 大于号> 隔开
• 元素1是父级，元素2是子级，最终选择是最后一个元素
• 元素2必须是亲儿子，其孙子、重孙之类的都不会被选择

例如需要将以下结构中的“大肘子”改为红色：

<div class="hot">
    <a href="">大肘子</a>
    <ul>
        <li><a href="#">猪头</a>
            <a href="#">猪尾巴</a>
        </li>
    </ul>
</div>

分析：类名为hot的div盒子中含有多个<a>标签，而“大肘子”对应的<a>标签是其最近的子元素，即亲儿子，使用子选择器更简便：

.hot>a {
  color: red;
}

2.3 并集选择器（重要）

选择多组标签，同时定义相同的样式，常用于集体声明，语法：元素1, 元素2 {样式声明}

• 通过英文逗号,连接而成，任何形式的选择器都可以作为并集选择器的一部分
• 同时选择多个元素
• 约定的语法规范：并集选择器一般将多个元素竖着排列，即每个元素独占一行

例如将以下结构中的熊大、熊二改为粉色：

<div>熊大</div>
<p>熊二</p>
<span>光头强</span>
<ul class="pig">
	<li>小猪佩奇</li>
	<li>猪爸爸</li>
	<li>猪妈妈</li>
</ul>

分析：同时将多个元素设置为同样的样式，可以使用并集选择器

div,
p,
.pig li {
	color: pink;
}

2.4 伪类选择器

向某些选择器添加特殊的效果，例如给链接添加特殊效果，或选择第1个，第n个元素，例如当鼠标悬浮其上时有特殊效果

伪类选择器用单冒号: 表示

2.4.1 链接伪类选择器

• 为了确保生效，请按照LVHA的顺序声明：:link- :visted- :hover- :active（记忆口诀love hate）
• :hover也可以用于其他元素，表示鼠标经过该元素时改变样式。
• 因为链接a在浏览器中具有默认样式，所以实际工作中都需要给链接指定单独的样式（直接给body指定的样式不会对链接a生效），一般先使用标签选择器给所有的链接设置一个统一的样式，再使用链接伪类选择器对鼠标经过时的链接设置另一种样式

/* 链接伪类选择器实际开发工作中的写法 */
/* 标签选择器，选择所有链接 */
a {
    color: gray;
    text-decoration: none;
}

/* 链接伪类选择器：选择鼠标经过时的链接 */
a:hover {
    color: blue;
    text-decoration: underline;
}

2.4.2 focus伪类选择器

用于获取获得焦点（即光标）的表单元素，主要针对<input>类表单元素

/* 把获得光标的input表单元素选取出来 */
input:focus {
  background-color: pink;
}

3 CSS3新增选择器

3.1 属性选择器

可以根据元素特定的属性来选择元素，这样就可以不用借助于类或者id选择器。

• 属性选择器由[]定义，属性值可以不用添加引号

3.2 结构伪类选择器

主要根据文档结构来选择元素，常用于选择父级选择器里面的子元素。

前三项与后三项使用方式类似，但排序和元素类型比较两步有先后之分，以E: nth-child(n)和E: nth-of-type(n)为例：

• E: nth-child(n)会把所有的孩子都排列序号（序号固定），执行的时候首先看nth-child(n)，之后再看元素类型E是否匹配，如果不匹配，则不选择任何元素【找出所有孩子中的第几个且类型为E的元素】
• E: nth-of-type(n)先匹配元素类型E，将指定类型的孩子排列序号，再看nth-of-type(n)，【找出E类型中的第几个元素】

nth-child(n)选择某个父元素的一个或多个特定的子元素，n可以是数字、关键字或公式

1. n如果是数字（n从1开始计算），就是选择第n个元素
2. n可以是关键字，例如even表示偶数，odd表示奇数
3. n可以是公式（n从0开始计算，但是第0个元素或超出元素个数会被忽略，直接使用nth-child(n)则会选择所有的孩子）
   

E: nth-of-type(n)中的n同理。

3.3 伪元素选择器 （重要）

伪元素选择器可以帮助我们利用CSS创建标签元素，而不需要HTML标签，从而简化HTML结构。

新创建的这个元素在HTML文档中是找不到的，但是其所有用法和表现行为与真正的页面元素一样，可以对齐使用诸如页面元素一样的CSS样式，表面上看上去似乎是页面中某些元素的表现，实际上是CSS样式展现的行为，因此称为伪元素。

伪元素 选择器通过 双冒号:: 表示。常用的伪元素有：

1. ::first-letter第一个字
2. ::first-line 第一行
3. ::selection 鼠标选中的字段，只能应用少量的CSS属性，如color bachground等
4. ::before ::after（重要）

element::before 在元素内部的前面插入内容

element::after 在元素内部的后面插入内容

• 必须有content属性，属性值必须添加引号！
• before和after创建一个元素，该元素属于行内元素

使用场景1：伪元素字体图标

分析：结构中只需要放一个大盒子div，通过伪元素添加字体图标，通过绝对定位将伪元素定位到合适的位置，根据“子绝父相”，父盒子也需要添加相对定位。

@font-face {
    font-family: 'icomoon';
    src: url('fonts/icomoon.eot?cuvbhl');
    src: url('fonts/icomoon.eot?cuvbhl#iefix') format('embedded-opentype'),
        url('fonts/icomoon.ttf?cuvbhl') format('truetype'),
        url('fonts/icomoon.woff?cuvbhl') format('woff'),
        url('fonts/icomoon.svg?cuvbhl#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

div {
    position: relative;
    width: 200px;
    height: 50px;
    border: 1px solid black;
}

div::after {
	content: '\e916';
    position: absolute;
    right: 5px;
    top: 15px;
    font-family: 'icomoon';
    /* content: ''; */
}

使用场景2: 仿土豆遮罩层

当鼠标经过时为背景图片添加遮罩层

<div class="tudou">
    <img src="../images/tudou.jpg" alt="" />
</div>

.tudou {
    /* 子绝父相，父亲要添加相对定位 */
    position: relative;
    width: 444px;
    height: 320px;
    margin: 100px auto;
}

.tudou img {
    width: 100%;
    height: 100%;
}

/* 改用伪元素选择器制作遮罩层 */
.tudou::before {
    /* 需要设置宽高，使用绝对定位 */
    position: absolute;
    /* 先隐藏遮罩 */
    display: none;
    /* 必须书写content属性！！！ */
    content: '';
    /* 遮罩不占位置且压住下面的图片，使用绝对定位 */
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.2) url(../images/arr.png) no-repeat center;
}

/* 鼠标经过图片时显示遮罩 */
.tudou:hover::before {
    display: block;
}

使用场景3: 伪元素清除浮动

（1）after伪元素清除浮动

1. Step1. 设置样式：

   .clearfix:after {
       content: "";
       display: block;
       height: 0;
       clear: both;
       visibility: hidden;
   }
   
   .clearfix {
       /* IE6 7专有 */
       *zoom: 1;
   }
   
   

2. Step2. 为父级标签添加clearfix类名

（2）父级添加双伪元素清除浮动

1. Step1. 设置样式：

   .clearfix:before,
   .clearfix:after {
       content: "";
       display: table;
   }
   
   .clearfix:after {
       clear: both;
   }
   
   .clearfix {
       *zoom: 1;
   }
   

2. Step2. 为父级标签添加clearfix类名

注：单冒号是为了照顾低版本浏览器的兼容性，一般使用双冒号以区分伪元素选择器与伪类选择器。

4 选择权重

当同一个元素指定多个选择器时，样式选择有优先级之分

• 选择器相同，则执行层叠性
• 选择器不同，则根据选择权重执行

选择器	选择器权重
继承 或 *	0,0,0,0
元素选择器，伪元素选择器	0,0,0,1
类选择器，（结构）伪类选择器，属性选择器	0,0,1,0
id选择器	0,1,0,0
行内样式 style=“”	1,0,0,0
!important 重要的	$\infty$无穷大

注意，伪类选择器和伪元素选择器都是从冒号开始的部分，前面的标签属于标签选择器。

总结

本文是对黑马前端pink老师前端基础教程的学习总结，主要介绍了CSS的基本选择器、复合选择器以及CSS3新增的一些选择器，最后总结了各类选择器的选择权重，在编写CSS样式时要注意样式选择的优先级。