【CSS】选择器汇总
文章目录
-
- 一、选择器权重
- 二、基础选择器
-
- 2.1、通配符（*）
- 2.2、标签选择器（h1）
- 2.3、 id选择器（#）
- 2.4、class选择器（.）
- 三、层级选择器
-
- 3.1、群组选择器（E,F）
- 3.1、包含选择器（E F）
- 3.1、子元素选择器（E>F）
- 3.1、相邻兄弟选择器（E+F）
- 3.1、 通用选择器（E~F）
- 三、 属性选择器
-
- 3.1、 [attribute]选择器
- 3.2、 [attribute=value]选择器
- 3.3、 [attribute~=value]选择器
- 3.4、 [attribute|=value]选择器
- 3.5、 [attribute^=value]选择器
- 3.6、 [attribute$=value]选择器
- 3.7、 [attribute*=value]选择器
- 四、伪类选择器（:）
-
- 4.1、动态伪类选择器
- 4.2、结构伪类选择器
- 4.3、其他伪类选择器
- 五、伪元素选择器（::）
一、选择器权重
选择器的定义：选择器表示要定义样式的对象，可以是元素本身，也可以是一类元素或者制定名称的元素。
- css中用四位数字表示样式权重，权重的表达方式如：
0，0，0，0元素 - 注意：如果权重相同，则执行后写的样式
| 选择器 | 权重 |
|---|---|
| 内联样式 | 1000 |
| id选择器 | 0100 |
| class选择器 | 0010 |
| 属性选择器 | 0010 |
| 伪类选择器 | 0010 |
| 标签选择器 | 0001 |
| 伪元素选择器 | 0001 |
| 子选择器 | 0000 |
| 通配符 | 0000 |
| 相邻选择器 | 0000 |
| 包含选择器 | 所包含选择符的权重之和 |
| 继承样式 | 没有权重 |
- 当不同选择器的样式设置有冲突的时候，高权重选择器会覆盖低权重选择器的样式
b .demo的权重是1+10=11
.demo的权重为10
/* 所以经常会发生.demo的权重的样式失效 */
!important代表着最高权重(最终样式)，慎用
background-color: red !important;
相同权重的选择器，样式遵循就近原则：那个选择符最后定义，就采用哪个选择符的样式。
注意：是css样式中定义该选择符的先后，而不是html中使用先后
二、基础选择器
2.1、通配符（*）
语法：* {属性：属性值；}
说明：
代表了所有元素，常用来重置样式
实例 ：
*{margin:0; padding:0;}
2.2、标签选择器（h1）
语法：元素名称{属性：属性值；}
说明：
- 元素选择器就是以文档语言对象类型作为选择符，即使用结构中元素名称作为选择符。
- 所有的页面元素都可以作为选择符
- 类型选择器是直接根据html语言中的标记来直接定义的
实例 ：
p{ color:red; }
2.3、 id选择器（#）
语法：#id名{属性：属性值；}
说明：
- 当我们使用id选择器时，应该为每个元素定义一个id属性；
<div id="top">div>
- id选择器的语法格式是“#”加上自定义的id名：
#box{width:100px; height:100px;}
- 起名时要取英文名，不能用关键字（所有标签和属性都是关键字）
- 一个id名称只能对应文档中一个具体的元素对象，因为id只能定义页面中某一个唯一的元素对象。
- 最大的用途：创建网页的外围结构
2.4、class选择器（.）
语法：.class名{属性：属性值；}
说明：
当我们使用类选择器时，应该为每个元素定义一个类名称。class选择器更适合定义一类样式。
实例 ：
<div class="top">div>
三、层级选择器
3.1、群组选择器（E,F）
语法：选择符1，选择符2，…{属性：属性值；}
说明：
当有多个选择符应用相同的样式时，可以用“，”分割的方式，合并为一组。
实例 ：
p,.top,#nav{width:100px;}
3.1、包含选择器（E F）
语法：选择符1(父) 选择符2(子){属性：属性值；}
说明：
选择符1和选择符2用空格隔开，表示选择选择符1中所包含的所有2选择符
实例 ：使div1下的所以子元素p标签的字体颜色变红
<style type="text/css">
.div1 p{color: red;}
.div1{border: 6px solid green;}
.div2{border: 6px solid yellow;}
style>
<div class="div1">
<h2>我是标题1h2>
<p>我是段落1p>
<p>我是段落2p>
<div class="div2">
<h2>我是标题2h2>
<p>我是段落3p>
<p>我是段落4p>
div>
div>
运行结果：
3.1、子元素选择器（E>F）
语法：选择符1(父)>选择符2(子){属性：属性值；}
说明：选择匹配的F元素，且匹配的F元素所匹配的E元素的子元素。用于选择特定父元素。
实例 ：使div1下的子元素p标签的字体颜色变红
<style type="text/css">
.div1>p{color: red;}
.div1{border: 6px solid green;}
.div2{border: 6px solid yellow;}
style>
<div class="div1">
<h2>我是标题1h2>
<p>我是段落1p>
<p>我是段落2p>
<div class="div2">
<h2>我是标题2h2>
<p>我是段落3p>
<p>我是段落4p>
div>
div>
运行结果：
3.1、相邻兄弟选择器（E+F）
语法：选择符1+选择符2{属性：属性值；}
说明：选择匹配的F元素，且匹配的F元素紧位于匹配的E元素的后面。用于选择（不是内部）指定的第一个元素之后紧跟的元素。
*
实例 ：使紧挨着h2标签的p标签的字体颜色变红
<style type="text/css">
h2+p{color: red;}
.div1{border: 6px solid green;}
.div2{border: 6px solid yellow;}
style>
<div class="div1">
<h2>我是标题1h2>
<p>我是段落1p>
<p>我是段落2p>
<div class="div2">
<h2>我是标题2h2>
<p>我是段落3p>
<p>我是段落4p>
div>
div>
运行结果：
3.1、 通用选择器（E~F）
语法：选择符1~ 选择符2{属性：属性值；}
说明：选择匹配的F元素，且位于匹配的E元素后的所有匹配的F元素。这两种元素必须具有相同的父元素，但 element2 不必紧跟在 element1 的后面。
*
实例 ：使div1下h2标签后的所有p标签的字体颜色变红
<style type="text/css">
.div1 h2~p{color: red;}
.div1{border: 6px solid green;}
.div2{border: 6px solid yellow;}
style>
<div class="div1">
<h2>我是标题1h2>
<p>我是段落1p>
<p>我是段落2p>
<div class="div2">
<h2>我是标题2h2>
<p>我是段落3p>
<p>我是段落4p>
div>
div>
运行结果：
三、 属性选择器
3.1、 [attribute]选择器
语法：选择符 [ 属性名 ]
描述： 用于选取带有指定属性的元素。
实例：
<style type="text/css">
[id]{color: red;}
/* 选择所有拥有该属性的标签 */
p[class]{color: green;}
/* 选择p标签内拥有该属性的p标签 */
style>
<h3 id="cab">111h3>
<p id="abc">222p>
<p class="abc">333p>
<p class="adb">444p>
<p class="bdc">555p>
运行结果：
3.2、 [attribute=value]选择器
语法：选择符 [ 属性名=属性值 ]
描述： 用于选取带有指定属性和值的元素。
实例：
<style type="text/css">
[id=abc]{color: red;}
style>
<h3 id="cab">111h3>
<p id="abc">222p>
<p class="abc">333p>
<p class="adb">444p>
<p class="bdc">555p>
运行结果：
3.3、 [attribute~=value]选择器
语法：选择符 [ 属性名~=属性值 ]
描述：用于选取属性值中包含指定词汇的元素。该值必须是整个单词，必须以空格隔开。
实例：
<style type="text/css">
p[class~=abc]{color: red;}
style>
<h3 id="cab">111h3>
<p id="abc">222p>
<p class="abc">333p>
<p class="adb abc">444p>
<p class="bdc">555p>
运行结果：
3.4、 [attribute|=value]选择器
语法：选择符 [ 属性名|=属性值 ]
描述：用于选取带有以指定值开头的属性值的元素，该值必须是整个单词，必须以“-”隔开。
实例：
<style type="text/css">
p[class|=adb]{color: red;}
style>
<h3 id="cab">111h3>
<p id="abc">222p>
<p class="abc adb">333p>
<p class="adb-abc">444p>
<p class="bdc">555p>
运行结果：
3.5、 [attribute^=value]选择器
语法：选择符 [ 属性名^=属性值 ]
描述：匹配属性值以指定值开头的每个元素。
实例：
<style type="text/css">
p[class^=a]{color: red;}
style>
<h3 id="cab">111h3>
<p id="abc">222p>
<p class="abc">333p>
<p class="adb">444p>
<p class="bdc">555p>
运行结果：
3.6、 [attribute$=value]选择器
语法：选择符 [ 属性名$=属性值 ]
描述：匹配属性值以指定值结尾的每个元素。
实例：
<style type="text/css">
p[class$=c]{color: red;}
style>
<h3 id="cab">111h3>
<p id="abc">222p>
<p class="abc">333p>
<p class="adb">444p>
<p class="bdc">555p>
运行结果：
3.7、 [attribute*=value]选择器
语法：选择符 [ 属性名*=属性值 ]
描述：匹配属性值中包含指定值的每个元素。
实例：
<style type="text/css">
p[class*=d]{color: red;}
style>
<h3 id="cab">111h3>
<p id="abc">222p>
<p class="abc">333p>
<p class="adb">444p>
<p class="bdc">555p>
运行结果：
四、伪类选择器（:）
简介：CSS 伪类用于向某些选择器添加特殊的效果。
伪类选择器不改变任何DOM内容。只是插入了一些修饰类的元素，这些元素对于用户来说是可见的，但是对于DOM来说不可见。伪类的效果可以通过添加一个实际的类来达到。
4.1、动态伪类选择器
- E:link（链接伪类选择器）： 定义E元素，未访问的链接状态。
- E:visited（链接伪类选择器 ）：定义E元素，已访问的链接状态。
- E:active（用户行为选择器）： 定义E元素，鼠标点击未抬起时的状态。
- E:hover （用户行为选择器）： 定义E元素，鼠标悬停在上面时的状态。
- E:focus （用户行为选择器）： 定义E元素，鼠标点击了抬起后的状态。
说明：
1）当前4个超链接伪类选择器联合使用时，应注意他们的顺序，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的，a:active 必须被置于 a:hover 之后，才是有效的。。错误的顺序有时会使超链接的样式失效
a:link{color:red;} /* 未访问的链接状态 */
a:visited{color:green;} /* 以访问的链接状态 */
a:hover{color:blue;} /*鼠标滑过链接状态*/
a:active{color:yellow;} /*鼠标按下去时状态*/
2）为了简化代码，可以把伪类选择器中相同的声明提出来放在a选择符中；使用hover属性来设置样式。
a:hover{color:green;}
/*表示超链接的三种状态都相同，只有鼠标滑过变换颜色*/
4.2、结构伪类选择器
| 语法 | 选择 | 描述 |
|---|---|---|
| E:first-child | 作为父元素的第一个子元素的元素E | 与E:nth-child(1)等同 |
| E:last-child | 作为父元素的最后一个子元素的元素E | 与E:nth-last-child(1)等同 |
| E:root | 选择匹配元素E所在文档的根元素。 | 在HTML文档中，根元素始终是html，此时该选择器与html类型选择器匹配的内容相同 |
E F:nth-child(n) |
选择父元素E的第n个子元素F。 | 其中n可以是整数（1，2，3）、关键字（even，odd）、可以是公式（2n+1）,而且n值起始值为1，而不是0. |
| E F:nth-last-child(n) | 选择父元素E的倒数第n个子元素F。 | 此选择器与E:nth-child(n)选择器计算顺序刚好相反，但使用方法都是一样的，其中：nth-last-child(1)始终匹配最后一个元素，与last-child等同 |
E:nth-of-type(n) |
选择父元素内具有指定类型的第n个E元素 | p:nth-of-type(2) 选择所有p元素第二个为p的子元素 |
| E:nth-last-of-type(n) | 选择父元素内具有指定类型的倒数第n个E元素 | p:nth-of-type(2) 选择所有p元素倒数的第二个为p的子元素 |
| E:first-of-type | 选择父元素内具有指定类型的第一个E元素 | 与E:nth-of-type(1)等同 |
| E:last-of-tye | 选择父元素内具有指定类型的最后一个E元素 | 与E:nth-last-of-type(1)等同 |
| E:only-child | 选择父元素只包含一个子元素，且该子元素匹配E元素 | 选择仅有一个子元素的E元素 |
| E:only-of-type | 选择父元素只包含一个同类型子元素，且该子元素匹配E元素 | 选择仅有一个子元素为E的元素 |
| E:empty | 选择没有子元素的元素 | 而且该元素也不包含任何文本节点 |
注意：
结构伪类选择器中，子元素的序号是从 1 开始的，也就是说，第一个子元素的序号是 1，而不是 0。换句话说，当参数 n 的计算结果为 0 时，将不选择任何元素。
4.3、其他伪类选择器
| 语法 | 类型 | 描述 |
|---|---|---|
| E: target | 目标伪类选择器 | 选择匹配E的所有元素，且匹配元素被相关URL指向。 |
| E: lang(language) | 语言伪类选择器 | 用来匹配使用指定语言的元素 |
| E: not(F) | 否定伪类选择器 | 匹配所有除F外的E元素 |
| E: checked | 元素状态伪类选择器 | 匹配所有用户界面（form表单）中处于选中状态的元素 |
| E: enabled | 元素状态伪类选择器 | 匹配所有用户界面（form表单）中处于可用状态的元素 |
| E: disabled | 元素状态伪类选择器 | 匹配所有用户界面（form表单）中处于不可用状态的元素 |
五、伪元素选择器（::）
简介：CSS 伪元素用于将特殊的效果添加到某些选择器。
伪元素的效果是需要通过添加一个实际的元素才能达到的。可能会改变dom结构，创建虚拟dom。
| 语法 | 描述 |
|---|---|
E::after |
在E元素之后添加内容，常用"content"配合使用 |
E::before |
在E元素之前添加内容，常用"content"配合使用 |
| E::first-letter | 向文本的第一个字母添加特殊样式。 |
| E::first-line | 向文本的首行添加特殊样式。 |
| E::selection | 给被用户选中或处于高亮状态的部分的E元素添加特殊样式。 |