<!--属性选择器-->
[href]{
属性:值;
}
<!--所有带href属性的元素被选中-->
<!--伪类选择器-->
超链接伪类
:link <!--鼠标单击前-->
:visited<!--鼠标单击后-->
:hover <!--鼠标悬浮时-->
:action<!--鼠标单击时-->
:focus<!--可以用在<input>标签上 向拥有键盘输入焦点的元素添加样式-->
:first-child <!--所有相邻元素中的第一个-->
:last-child <!--所有相邻元素中的最后一个-->
:nth-child(3) <!--具体选择第三个元素 -->
伪元素选择器
使用(::)/(:)都可以
::before 匹配出现在原有元素的实际内容之前的一个可样式化元素。
::after 匹配出现在原有元素的实际内容之后的一个可样式化元素。
::selection 文档中被选择的那部分 使用鼠标或其他选择设备选中的部分
后代元素(父级在前,子代在后)
.father .child{
属性:值;
}
直接子元素 父 > 子
p>span {
属性:值;
}
相邻兄弟 + :拥有同一个父元素的相邻元素
h1 + p <!--代表 h1后面的第一个p元素的样式 -->
h1+p{
属性:值;
}
所有兄弟元素~
p~span <!--p标签后的所有span-->
p~span{
属性:值;
}
选择器的并列
元素.类名<!--类名为...的所有元素-->
类名1,类名2{
}<!--类名1,类名2都生效-->
元素1,元素2{
}<!--元素1,元素2都生效-->