基本选择器
1.标签选择器
使用标签名作为选择器的名称
div {
color: white;
}
2.类选择器
在标签内使用class属性定义类名
<div class="hello"></div>
.hello / div.hello {
color: white;
}
3.id选择器
在标签内使用id属性定义类名
<div id="hello"></div>
#hello 或 div#hello {
color: white;
}
id选择器在整个HTML文档中是唯一的，同一个id只能定义一次
优先级
行内样式 > id选择器 > class选择器 > 标签选择器
扩展选择器
1.关联选择器
<div><p>~~~~~~</p></div>
设置div里p的样式
div p {
color: white;
}
2.组合选择器
<div>1111</div>
<p>2222</p>
把div和p设置成相同的样式
div,p {
color: white;
}
3.伪元素选择器
伪类
:link 元素未访问前，比如超链接未点击前
:hover 鼠标指针悬浮在元素上
:active 点击元素鼠标未释放时
:visited 元素访问后，比如超链接点击后
:focus 元素获得焦点时，按Tab键切换焦点
:first-child 对象的第一个子对象
:first 页面容器第一页
:left 页面容器位于装订线左边的所有页面
:right 页面容器位于装订线右边的所有页面
:lang 对象使用特殊语言的内容
伪对象
:first-letter 对象内第一个字符
:first_line 对象内第一行
:before 和content属性一起使用，设置在对象前发生的内容
:after 和content属性一起使用，设置在对象后发生的内容