css选择器
什么是选择器？
选择器是你构造好网页的结构，需要给这些结构赋予样式，这时候就需要用到选择器，利用选择器将元素与样式一一对应；两者的对应关系可以是一对一，一对多，多对一。
选择器的分类：
这里我只展示几种比较常见的类型，
1. 标签选择器
给同一种标签添加样式，例如：
标签名{
属性名:属性值；
}
<style type="text/css">
p{
color: turquoise;
}
div{
width: 50px;
height: 50px;
background-color: #CCCCCC;
}
</style>
</head>
<body>
<p>段落1</p>
<div>文本1</div>
<p>段落2</p>
<div>文本2</div>
<p>段落3</p>
</body>
效果图如下：
2. 通用选择器(通配符)
给所有的标签添加样式。
*{
属性名:属性值；
}
注意：通用选择器是先遍历网页中的所有标签，然后再给这些标签添加样式，因此这个选择器的性能十分的低，不推荐使用，一般只会在测试的时候，用于css的初始化。
3. 类选择器(class)
给同一个类(同一个群体)的标签添加样式，前提是这些标签的类名是一样的。
.类名{
属性名:属性值；
}
<style type="text/css">
.aa{
color: red;
}
</style>
</head>
<body>
<p class="aa">段落1</p>
<div class="aa">文本1</div>
<p>段落2</p>
<div>文本2</div>
<p class="aa">段落3</p>
</body>
效果图如下：
值得注意的是:一个类名可以给多个标签，一个标签也可以拥有多个类名，多个类名之间用空格( )隔开。
4. ID选择器
给ID名相同的标签添加样式
#ID名{
属性名:属性值；
}
关于id，在写代码的时候尽量少用id，因为id占两个字符，而class只占一个字符。
注意：一个标签最好只用一个ID名，一个ID只能给一个标签。
5. 后代选择器
选择的是某一个元素的后代元素，父级与子级之间用空格( )隔开
父级 子级{
属性名:属性值；
}
<style type="text/css">
.ab p{
color: red;
}
</style>
</head>
<body>
<p class="aa">段落1</p>
<div class="ab">
<p>段落2</p>
<div>文本2</div>
<p class="aa">段落3</p>
</div>
</body>
效果图如下：
6. 子代选择器
选择的是某一个元素的直接后代元素，父级与子级之间用">"隔开
父级>子级{
属性名:属性值；
}
<style type="text/css">
.ab>div{
color: red;
}
.ab>p{
color: blue;
}
</style>
</head>
<body>
<p class="aa">段落1</p>
<div class="ab">
<p>段落2</p>
<div>文本2</div>
<p class="aa">段落3</p>
</div>
</body>
效果图如下：
7. 相邻兄弟选择器
选择的是紧挨着该元素后面的一个元素。
元素名+兄弟名{
属性名:属性值；
}
<style type="text/css">
.aa+div{
color: red;
}
.aa~span{
color: blue;
}
</style>
</head>
<body>
<p class="aa">段落1</p>
<div class="bb">文本1</div>
<span>段落2</span>
<div>文本2</div>
<span class="cc">段落3</span>
</body>
8. 通用兄弟选择器
选择的是该元素后面的所有的某一类兄弟。
元素名~兄弟名{
属性名:属性值；
}
<style type="text/css">
.aa+div{
color: red;
}
.aa~span{
color: blue;
}
</style>
</head>
<body>
<p class="aa">段落1</p>
<div class="bb">文本1</div>
<span>段落2</span>
<div>文本2</div>
<span class="cc">段落3</span>
</body>
相邻兄弟选择器与通用兄弟选择器的效果图如下：