基本选择器
1. 通用选择器
选择所有元素,控制全局 例:
*{
padding: 0;
margin: 0;
}
2.元素选择器
按照给定的节点名称,选择所有匹配的元素p、h1、em、a,甚至可以 是 html 本身 例:
p{
color:blue;
}
3.类选择器
按照给定的 class 属性的值,选择所有匹配的元素 例:
<div class="banner"></div>
.banner{
position: relative;
}
4.ID 选择器
按照 id 属性选择一个与之匹配的元素。需要注意的是,一个文档中, 每个 ID 属性都应当是唯一的 例:
<div id="box"></div>
#box{
width:68px
height:55px
}
组合器
1. 后代组合器
(空格)组合器选择前一个元素的后代节点 例:
.header .logo{
width: 162px;
height: 44px;
}
2.直接子代组合器
组合器选择前一个元素的直接子代的节点 例:
.header .nav >li{
float: left;
margin-left: 50px;
line-height: 44px;
}
3.一般兄弟组合器
~ 组合器选择兄弟元素,也就是说,后一个节点在前一个节点后面 的任意位置,并且共享同一个父节点 例:
p ~ span{
width:68px;
color:red
}
4.紧邻兄弟组合器
+组合器选择相邻元素,即后一个元素紧跟在前一个之后,并且 共享同一个父节点 例:
h2 + p{
color:red;
}
伪选择器
1. 伪元素
:: 伪选择器用于表示无法用 HTML 语义表达的实体。
.section-header-left::after{
right: 0;
}