认识css选择器

基本选择器

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;
}