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>
相邻兄弟选择器与通用兄弟选择器的效果图如下：
