基本选择器
| 基本选择器 |
特点 |
用法 |
| 通配选择器 |
选中所有标签，一般用于清除样式 |
* {color:red} |
| 元素选择器 |
选中所有同种标签，但是不能差异化选择 |
h1 {color:red} |
| 类选择器 |
选中所有特定类名（class值）的元素-一使用频率很高。 |
.say {color:red} |
| ID选择器 |
选中特定id值的那个元素（唯一的） |
#earth {color:red} |
| 交集选择器 |
最常用：元素+类名 (贴在一起写) |
p.beauty {color:red} |
| 并集选择器 |
逗号隔开 |
#peiqi,.rich,.beauty {color:red} |
| 后代选择器 |
选择的是所有的后代 空格隔开 |
ul li a {color:red} |
| 子代选择器 |
选择的是子代 中间是> |
div>p>a {color:red} |
| 兄弟选择器 |
相邻：选中元素后面兄弟元素 中间是+
通用：选中元素后面所有的兄弟元素 中间是~ |
div+p {color:red}
div~p {color:red} |
| 属性选择器 |
选中具有某符合要求属性的元素 有5种
^ 以xx开头
$ 以xx开头
* 包含xx的 |
[title]
[title=“color”]
[title^=“co”]
[title$=“or”]
[title*=“ol”] |
伪类选择器：选中特殊状态的元素
1
2
3
4
5
6
7
| a:link{} /*选中的是没有访问过的a元素*/
a:visited{} /*选中的是访问过的a元素*/
a:hover{} /*选中的是鼠标悬浮状态的a元素*/
a:active{} /*选中的是激活状态的a元素*/
span:hover{} /*选中的是鼠标悬浮状态的span元素*/
span:active{} /*选中的是激活状态的span元素*/
input:focus{} /*获取焦点元素，当用户：点击元素选择元素时，就是获得焦点。表单类才能用*/
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| div>p:first-child {} /*选中的是div的第一个儿子p元素*/
div p:first-child{} /*选中的是div的后代p元素，且p的父亲是谁无所谓，但p必须是其父亲的第一个儿子*/
p:first-child{} /*选中的是p元素，且p的父亲是谁无所谓，但p必须是其父亲的第一个儿子*/
div>p:last-child{} /*最后一个儿子*/
div>p:nth-child(2){} /*为第2个儿子 取值0~999...*/
div>p:nth-child(2n){} /*选中偶数 n为0 1 2 ...*/
div>p:nth-child(-n+5){} /*前5个 ()遵循an+b*/
div>p:first-of-type{} /*选中的是div的第一个儿子p元素（按照所有同类型兄弟计算的）*/
div>p:last-of-type{} /*选中的是div的最后一个儿子p元素（按照所有同类型兄弟计算的）*/
div>p:nth-of-type(5){} /*选中的是div的第n个儿子p元素（按照所有同类型兄弟计算的）*/
div>p:nth-last-child(5){} /*倒数*/
div>p:nth-last-of-type(5){} /*倒数*/
div>p:only-child /*选择没有兄弟的元素(独生子女)*/
div>p:only-of-type /*选择没有同类型兄弟的元素*/
|
关于n的值：
- 0或不写：什么都选不中一几乎不用。
- n：选中所有子元素一几乎不用。
- 1～正无穷的整数，选中对应序号的子元素。
- 2n或even：选中序号为偶数的子元素。
- 2n+1或odd：选中序号为奇数的子元素。
- -n+3：选中前三个。
1
2
3
4
| div>p:not（选择器）排除满足括号中条件的元素
div>p:not(.fail) {} /*选中的是div的儿子p元素，但是排除类名为fail的元素*/
div>p:not([title^="你要加油"]）{} /*选中的是div的儿子p元素，但是排除title属性值以“你要加油"开头的*/
div>p:not(:first-child) {} /*选中的是div的儿子p元素，但排除第一个儿子p元素*/
|
1
2
3
| input:checked {} /*选中的是勾选的复选框或单选按钮 对颜色不生效*/
input:disabled {} /*选中的是被禁用的input元素*/
input:enabled {} /*选中的是可用的input元素*/
|
1
| :lang(){}根据指定的语言选择元素（本质是看lang属性的值）
|
1
2
3
4
5
6
| div::first-letter {} /*选中的是div中的第一个文字*/
div::first-line {} /*选中的是div中的第一行文字*/
div::selection {background-color:green;color:orange;} /*选中的是div中被鼠标选择的文字*/
input::placeholder {color:red} /*选中的是input元素中的提示文字*/
p::before {content: "￥"} /*选中的是p元素最开始的位置，随后创建一个子元素*/
p::after {content: ".00"} /*选中的是p元素最后的位置，随后创建一个子元素*/
|
选择器优先级
总结：行内样式>ID选择器>类选择器>元素选择器>通配选择器。
选择器权重计算：
格式：（a，b，c）
a：ID选择器的个数
b：类、伪类、属性选择器的个数
c：元素、优伪元素选择器的个数
1
2
3
4
5
6
| 1 .container span.slogan{} (0,2,1)
2 div>p>span:nth-child(1){} (0,1,3)
按顺序比较，所以1>2，1的优先级高，如果权重一样就是后来者优先级高
.container{color:red !important}
属性加上!important会有最高的优先级
|
