class和id的使用场景
- class 把一些特定样式放到一个class类中，需要此样式的标签，可以添加此类名，具有该类名的标签可以不唯一
- id 根据提供的唯一id名，为具有该id的唯一标签设置样式
常见的CSS选择器
-
基础选择器 *(通配符选择器) #id .class element标签
-
组合选择器
| 名称 | 表示 | 含义 |
|---|---|---|
| 多元素 | E,F | E或F |
| 后代 | E F | E所有的后代F(子子孙孙) |
| 子元素 | E>F | E所有直接子元素 |
| 直接相邻 | E+F | E之后相邻的(同级)F |
| 普通相邻 | E~F | E之后的同级F |
选择器连写没有分隔符，"."、"#"充当
- 属性选择器
| 表示 | 示例 | 含义 |
|---|---|---|
| E[attr] | div[id] | 所有具有id属性的div |
| E[attr=value] | div[id="test"] | id为test的div |
| E[attr~=value] | <div attr="value value1 value2"> div[attr~="value"] |
所有属性attr具有多个空格分隔，其中一个值等于value的元素 |
| E[attr^=value] | - | attr以value开头 |
| E[attr$=value] | - | attr以value结尾 |
| E[attr*=value] | - | attr的值包含value字符 |
- 伪元素选择器
| 表示 | 含义 |
|---|---|
| E::first-line | E内容的第一行 |
| E::first-letter | E内容的第一个字母 |
| E::before | E之前插入生成的内容 |
| E::after | E之后插入生成的内容 |
- 伪类选择器
| 表示 | 含义 |
|---|---|
| E:first-child | 作为长子的E |
| E:link | 所有未被点击的链接 |
| E:visited | 所有已被点击的链接 |
| E:active | 鼠标已在其上按下，还没有释放的E |
| E:hover | 鼠标悬停其上的E |
| E:focus | 获得当前焦点的E |
| E:lang(c) | lang属性为c的E |
| E:enabled | 表单中可用的E |
| E:disabled | 表单中禁用的E |
| E:checked | 表单中被选中的radio/checkbox |
| E::selection | 用户当前选中的元素 |
| E:root | 文档根元素，即<html> |
| E:nth-child(n) | 其(E)的父元素的第n个子元素，n从1开始 |
| E:nth-last-child(n) | 其(E)父元素的倒数第n个子元素，n从1开始 |
| E:nth-of-type(n) | 其(E)的父元素的第n个(与E)同种标签的子元素 |
| E:nth-last-of-type(n) | 其(E)的父元素的倒数第n个(与E)同种标签的子元素 |
| E:last-child | (E的)父元素的最后一个子元素，等同于 :nth-last-child(1) |
| E:first-of-type | (E的)父元素下使用(与E)同种标签的第一个子元素，等同于 :nth-of-type(1) |
| E:last-of-type | (E的)父元素下使用(与E)同种标签的最后一个子元素，等同于 :nth-last-of-type(1) |
n的值可能为 1、2、3、4、5或 2n+1、2n、4n-1或odd、even
选择器的优先级
！important > 标签上的style属性内联样式 > #id选择器 > .class选择器 > 伪类选择器 > 属性选择器 > 标签选择器 > 通配符选择器 > 浏览器自定义
※ 复杂场景下，应对优先级分类赋值，比较权重大小
- 行内样式
<div style="xxx"></div>==> a - ID选择器 ==> b
- 类、属性选择器和伪类选择器 ==> c
- 标签、伪元素选择器 ==> d
a>b>c>d
举例 示例中p标签的颜色是什么？
<style>
#test p.class1 {color: red;}
#test .class1.class2 {color: blue;}
</style>
<div id="test">
<p class="class1 class2"></p>
</div>
分析：分类划分权重
第一条：a=0,b=1,c=1,d=1
第二条：a=0,b=1,c=2,d=0
显然，第二条的权重总值大于第一条，所以p标签为蓝色
a标签有四种伪类选择器
:link(未点击)、:visited(已点击)、:hover(鼠标悬浮)、:active(鼠标按下还未释放)
理解：前两个定义其一般样式，后两个按照鼠标动作发生的顺序来定义样式
而浏览器解析a标签的四种伪类选择器的样式时，其顺序为a:link、a:visited、a:hover、a:active，后面的样式才能在鼠标动作发生时合理覆盖前面的样式，使动作发生时的样式生效——“就近原则”
例如，我们为a定义样式，未点击为蓝色，已点击为红色，鼠标悬浮为绿色，如果我们在编写a标签样式时，没有按照上述顺序编写，而是以a:visited a:hover a:link的顺序编写，a未点击时，鼠标悬浮其上，颜色不会变成绿色，而是蓝色；a被点击后，颜色变成红色，鼠标悬浮其上，颜色变成绿色
#header{} 匹配id为header的元素
.header{} 匹配class为header的元素
.header .logo{} 匹配class为header的元素的所有class名为logo的后代元素
.header.mobile{} 匹配class同时包含header和mobile的元素
.header p, .header h3{} 匹配class为header下所有的后代p标签和h3标签
#header .nav>li{} 匹配id为header的元素的所有class为nav的后代元素的直接子元素li
#header a:hover{} 匹配id为header的元素的所有a标签鼠标悬浮时的样式
#header .logo~p{} 匹配id为header的元素的所有class为logo的后代元素之后的（与.logo同级/普通相邻）的元素
#header input[type="text"] 匹配id为header的元素的所有type为text的后代input元素
| div:first-child | div:first-of-type | div :first-child | div :first-of-type | |
|---|---|---|---|---|
| 区别 | 作为长子的div | （div的）父元素下使用同种标签（div）的第一个子元素（标签是div） | div的后代中的第一个子元素（div作为父元素）（子元素标签未知） | div的后代中使用同种标签的第一个子元素（子元素标签未知） |
网友评论