文章目录
【写在前面】
-
CSS当中有多种选择器，它们的权值是不同的，总权值越高，优先显示.
-
!important > 行内样式 > #id > .class > tag > * > 继承 > 默认
-
数值化：
- 行内样式——1000；
- ID选择器——100；
- class选择器——10；
- 属性选择器——10；
- 伪类选择器——10；
- 标签选择器——1；
- 伪元素选择器——1；
一、基础选择器
01. 通用选择器
* {
样式属性1： 样式属性值1;
}
02. 标签选择器
标签名 {
样式属性1：样式属性值1;
}
03. 类选择器
.class {
样式属性名1：样式属性值1;
}
04. ID选择器
#id {
样式属性名1：样式属性值1;
}
05. 层次选择器
| 选择器 | 名称 | 描述 |
|---|---|---|
| E F | 后代选择器 | 以【空格】隔开，匹配selector1对应标签内的所有后代标签（不论嵌套层数） |
| E>F | 父子选择器 | 以【 > 】分隔，匹配selector1对应标签嵌套的第一层子标签 |
| E+F | 相邻兄弟选择器 | 以【 + 】分隔，匹配与selector1同级的紧跟的后一个标签 |
| E~F | 通用兄弟选择器 | 以【~】分隔，同一父级下，匹配与selector1同级的所有selector2 |
二、动态伪类选择器
| 选择器 | 描述 |
|---|---|
| E:link | 设置超链接a在未被访问前的样式 |
| E:visited | 设置超链接a在其链接地址已被访问过时的样式 |
| E:hover | 设置元素在其鼠标悬停时的样式 |
| E:active | 设置元素在被用户激活（在鼠标点击与释放之间发生的事件）时的样式 |
| E:focus | 设置元素在成为输入焦点（该元素的onfocus事件发生）时的样式 |
三、结构伪类选择器
01. 属性
| 选择器 | 描述 |
|---|---|
| E:first-child | 选择父元素里的，第一个子元素E |
| E:last-child | 选择父元素里的，最后一个子元素E |
| E:nth-child(n) | 选择父元素里的，第【n】个子元素E **如果第n个子元素不是E，则是无效选择器 **同时可用【n】进行计算： 如：【2n】代表选择2,4,6位元素，即偶数位元素 【2n+1】代表选择1,3,5位元素，即奇数位元素 【3n】代表选择3的倍数位的元素 【-n+5】代表选择前5位的元素 |
| E:nth-child(even) | 选择父元素里的，偶数位子元素E，同E:nth-child(2n) |
| E:nth-child(odd) | 选择父元素里的，奇数位子元素E，同E:nth-child(2n+1) |
| -------------------------- | ------------------------------------------------------------------------------------ |
| E:first-of-type | 选择父元素里的，第一个类型为E的子元素 |
| E:last-of-type | 选择父元素里的，最后一个类型为E的子元素 |
| E:nth-of-type(n) | 选择父元素里的，第【n】个类型为E的子元素 |
| -------------------------- | ------------------------------------------------------------------------------------ |
| E:empty | 选择没有子元素的元素E，而且该元素也不包含任何文本节点 |
| E:only-of-type | 选择父元素中所有子元素中唯一的子元素E |
| E:only-child | 选择父元素仅有的一个子元素E |
| E:root | 选择匹配元素E所在文档的根元素。 在HTML文档中，根元素始终是html，此时该选择器与html类型选择器匹配的内容相同 |
02. 语法
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
/*1. 选择 ul 里面的第一个孩子*/
ul li:first-child {
}
/*2. 选择 ul 里面的最后一个孩子*/
ul li:last-child {
}
/*3. 选择 ul 里面的第 2 个孩子，第 n 个孩子*/
ul li:nth-child(2) {
}
/*4. 选择 ul 里面的 偶数 孩子*/
ul li:nth-child(even) {
}
/*5. 选择 ul 里面的 奇数 孩子*/
ul li:nth-child(odd) {
}
/*6. 从0开始，每次加 1 ，选择 ul 里面的所有 孩子*/
ul li:nth-child(n) {
}
/*7. 从0开始，每次加 2 ，选择 ul 里面的所有 偶数 孩子*/
ul li:nth-child(2n) {
}
/*8. 从1开始，每次加 2 ，选择 ul 里面的所有 奇数 孩子*/
ul li:nth-child(2n+1) {
}
/*9. 同理，从0开始，每次加 5 ，选择 ul 里面 5的倍数 的孩子*/
ul li:nth-child(5n) {
}
/*10. 从 5 开始，每次加 1 ，选择 ul 里面的 从第5个 开始的所有孩子*/
ul li:nth-child( n + 5 ) {
}
/*11. 从 5 开始，每次减 1 ，选择 ul 里面的 前面 5个 孩子*/
ul li:nth-child( -n + 5 ) {
}
/*区别*/
/**/
ul li:first-of-type{
}
/**/
ul li:last-of-type{
}
/**/
ul li:nth-of-type{
}
03. 注意
nth-child的缺陷：
<section>
<p>001</p>
<div>002</div>
<div>003</div>
</section>
section div:nth-child(1) {
color: red;
}
section div:nth-of-type(1){
color: blue;
}
此处，nth-child会先把所有盒子都排序，选择第一个孩子，然后会返回去匹配要选择的标签，发现section的第一个孩子并不是div，因此这句样式不会起作用
而，nth-of-type会先找出指定的元素div，然后再对找出的div元素作排列，从而选出第一个孩子
04. 总结
-
E:nth-child- 是对父元素中的所有孩子排序选择，先找到第n个孩子，
- 然后再看是否和
E匹配 - 在无序列表中用得比较多
-
E:nth-of-type- 是对父元素中的指定类型的孩子进行排序，
- 即先匹配
E，再根据E找第n个孩子
四、属性选择器
01. 属性
| 选择器 | 描述 |
|---|---|
| E[attr] | 选择有【attr】属性的 E 元素 |
| E[attr=“val”] | 选择有【attr】属性且属性值为【val】的 E 元素 |
| E[attr^=“val”] | 选择有【attr】属性，且以【val】开头的 E 元素 |
| E[attr$=“val”] | 选择有【attr】属性，且以【val】结束的 E 元素 |
| E[attr*=“val”] | 选择有【attr】属性，且属性值包含【val】的 E 元素 |
| E[attr~=“val”] | 选择有【attr】属性，且属性值为用【空格】分开的字词列表， 列表中含有【val】（如：list val）的 E 元素 |
| E[attr|=“val”] | 选择有【attr】属性，且属性值为以【val】开头，用连接符【-】分开的字符串（如：val-list）的 E 元素 |
02. 语法
权重=10
语法：
/*选择有 value 属性的 input 标签*/
input[value] {
color: red;
}
/*选择 type=Text 的 input 标签*/
input[type=text] {
color: blue;
}
/*选取,首先是div，且具有class属性，且属性名是以相同的名称 icon 开头的元素*/
div[class^=icon] {
color: cyan;
}
/*选择，section,且有class属性，且属性名以相同名称 data 结尾*/
section[class$=data] {
color: yellow;
}
五、伪元素选择器
利用CSS创建新标签元素，二不需要HTML标签，从而简化了HTML结构
01. 属性
| 选择符 | 简介 |
|---|---|
| E::before | 在元素内部的前面插入内容 |
| E::after | 在元素内部的后面插入内容 |
| E::first-letter | 设置元素内的第一个字符的样式 |
| E::first-line | 设置元素内的第一行的样式 |
| E::placeholder | 设置元素的文字占位符的样式 |
| E::selection | 设置元素被选择时的样式 |
02. 注意
创建的元素属于行内元素
在文档树中是找不到的，所以称为伪元素
语法：
element::before{} before和after必须有content属性
伪元素选择器和标签选择器的权重一样，权重=1
03. 应用
- 可用于清除浮动
.clearfix::before,.clearfix::after {
content: '';
/*显示为块级元素*/
/*display: block;*/
/*显示为表格，在一行上*/
display: table;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
zoom:1;
}
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
