在前端或者网页设计中，会用html标签根据业务需求搭建框架，用CSS来设置样式。而CSS是通过选择器选中所需要设置属性的标签，来对特定标签设置属性的。为了能够灵活的完成各种各样的需求，有很多选择器可以供我们选择，下面是自己对常用的选择器的学习过程的记录。更多详情：http://www.w3school.com.cn/
标签选择器
用来根据标签名称选择当前界面的某一类标签，对一类标签进行操作。
书写格式：
标签名称｛
属性：值；
属性1：值；
｝案例
<style>
p {
color: red;
}
</style>
<body>
<div>
<p>这是段落</p>
<span>这是span</span>
<ul><li><p>li面段落</p></li></ul>
</div>
</body>
- 效果图
标签选择器.png
可以看到通过p标签选择器选择了网页上出现的
所有p标签，包括li里面的，这也是缺点，因为选择了所有的p标签。
id选择器
id选择器用来精准的选择界面的某个标签，同一个界面中id不能重复.id名称只能由字母下划线数字组成，不能以数字开头（遵循大部分编程语言的变量命名规则），id名称不能是html标签名称，仅仅为了设置样式的时候是不会用id的，id的使用主要是留给js调用。
-
书写格式
# id的名称｛ 属性：属性值； 属性1：值； ｝ 案例
<style>
#red{
color: red;
}
#green{
color: green;
}
</style>
<body>
<div>
<p id="red">这是段落</p>
<span>这是span</span>
<ul><li><p id="green">li面段落</p></li></ul>
</div>
</body>
- 效果图
id选择器.png
通过id成功设置了两个p标签的内容颜色分别为红色和绿色。
类选择器
相对于id选择器，class选择器在同一个界面是可以重复的，类名前面是.可以给某个特定的标签设置样式，一个标签可以有多个类名。一个标签设置多个类名的书写格式<标签名 class=”class1 class2“>
-
书写格式
.classname{ 属性：属性值； 属性1：值； } 案例
<style>
.red{
color: red;
}
.green{
color: green;
}
.big{
font-size: 20px;
}
</style>
<body>
<div>
<p class="red big">这是段落</p>
<p class="green">这是段落</p>
<span class="green">这是span</span>
<ul><li><p class="red">li面段落</p></li></ul>
</div>
</body>
- 效果图
类选择器.png
为界面里面的不同的标签通过指定类名的形式设置了不同的样式和样式叠加。合理的利用和设置类选择器，可以大大减少css的重复代码，优化结构。
后代选择器
后代选择器用来找到指定标签的所有后代标签，设置属性。不仅仅局限于直接子标签，多层嵌套的依然起效果。同时后代选择选择器的选择器标签可以是类名和 id选择器名等其他的名称
书写格式
标签直接用空格隔开
标签名称1 标签名称2｛
属性：属性值
｝案例
<style>
div p{
color: red;
}
div .innerli{
color: green;
}
</style>
<body>
<div>
<p>这是段落</p>
<p>这是段落</p>
<ul>
<li><p class="innerli">li里面的p标签格外的</p></li>
<li><p>li里面的p</p></li>
</ul>
</div>
<p>不再div的p</p>
</body>
效果图
后代选择器.png
子元素选择器
和后代选择器的区别是子元素选择器只会在自己的直接后代中寻找，后代选择器间接后代也作为查找范围。
- 书写格式
标签名称1>标签名称2｛
属性：属性值；
｝ - 案例
<style>
div>p{
color: red;
}
div>ul>li>p{
color: green;
}
</style>
<body>
<div>
<p>这是段落</p>
<p>这是段落</p>
<ul>
<li><p>li里面的p标签</p></li>
<li><p>li里面的p</p></li>
</ul>
</div>
<p>不再div的p</p>
</body>
- 效果图
子元素选择器.png
交集选择器和并集选择器
交集选择器，一个标签具有标签选择器1和2两种身份时设置相关属性。中间没有任何字符，紧挨着
标签选择器1标签选择器2｛
属性：属性值;
｝
并集选择器，逗号隔开
拥有标签选择器1和2都设置为相同的属性
标签选择器，1标签选择器2｛
属性：属性值;
｝
- 案例
<style>
.red{
color: red;
}
p.red{
font-size: 20px;
}
.blue{
color: blue;
}
span,.blue{
font-size: 25px;
}
</style>
<body>
<div>
<p class="red">这是段落</p>
<span class="red">这是span</span>
<p>这是段落</p>
<span class="blue">这是blue类span</span>
</div>
<span>普通的span</span>
</body>
- 效果图
交集选择器和并集选择器.png
兄弟选择器
相邻兄弟选择器用来选择某个标签紧随其后的同一级别的标签，中间有其他的标签隔开无效，通用兄弟选择器无此限制。
-
书写格式
标签1+标签2｛ 属性：属性值 （相邻兄弟选择器） ｝ 标签1~标签2｛ 属性：属性值 （通用兄弟选择器） ｝
*案例
<style>
h1+p{
color: red;
}
h2~p{
color: blue;
}
</style>
<body>
<h1>标题1</h1>
<p>段落1</p>
<p>段落2</p>
<p>段落3</p>
<h1>标题2</h1>
<span>隔开后相邻兄弟选择器无效</span>
<p>段落1</p>
<h2>标题3</h2>
<p>段落2</p>
<div><p>不是同一级别的无效</p></div>
<p>段落3</p>
</body>```
###序选择器
css3增加了许多选择器，可以按照标签的顺序选择某个选择器功能强大。直接看案例。
```html
<style>
p:first-child{
color: red;
}
p:first-of-type{
color: blue;
}
p:nth-child(3){
color: aqua;
}
p:nth-of-type(3){
color: rosybrown;
}
span:only-child{
color: darkcyan;
}
h4:only-of-type{
color: blueviolet;
}
</style>
<body>
<div>
<h5>这是标题，first-child只取同级别的第一个，不区分类型，所以颜色不变</h5>
<p>这是段落1 first-of-type,取出同类型的第一个</p>
<p>通过nth-child，指定同级别不区分类型的标签设置颜色</p>
<p>nth-of-type(3)，区分类型取第三个</p>
</div>
<div>
<h4>父标签div包含了h5和h4，但是只包含了一个h4，所以only-of-type,能够选中</h4>
<!--下面注释打开后h4不唯一了所有不能够选中-->
<!--<h4>父标签div包含了h5和h4，但是只包含了一个h4，所以only-of-type,能够选中</h4>-->
<h5>h标签</h5>
</div>
<div>
<span>父标签只包含了这一个span标签：only-child，所以上面div同时包含span和h5的无效</span>
</div>
</body>
- 效果图
$R8301IK.png
<style>
tr{
text-align: center;
}
/*奇数行*/
tr:nth-child(even){
color: green;
}
td:nth-child(odd){
font-size: 20px;
}
/**用公式选择n从0递增*/
span:nth-child(2n+1){
color: aqua;
}
</style>
<body>
<span>1</span><span>2</span><span>3</span>
<span>4</span><span>5</span><span>6</span>
<span>7</span><span>8</span><span>9</span>
<table bgcolor="black" width="100" height="40" cellspacing="1px">
<tr bgcolor="white"><td>1</td><td>2</td></tr>
<tr bgcolor="white"><td>3</td><td>4</td></tr>
<tr bgcolor="white"><td>5</td><td>6</td></tr>
<tr bgcolor="white"><td>7</td><td>8</td></tr>
<tr bgcolor="white"><td>9</td><td>0</td></tr>
</table>
</body>
- 效果图
序选择器2.png
属性选择器
根据指定的属性名称或者属性名称和值找到标签，设置属性。
- 案例
<style>
p[id]{
color: green;
}
/*
通常用来判断input类型不需要设置任何class和id
*/
input[type="password"]{
color: blue;
}
/*
标签[attribute^=值]以某个值开头
*/
img[alt^='abc']{
color: green;
}
/*
标签[attribute$=值]以某个值结尾
*/
img[alt^='cd']{
color: blue;
}
/*
标签[attribute$=值]包含某个值
*/
img[alt*='abd']{
color: brown;
}
</style>
<body>
<!--选择出有id属性的标签设置红色-->
<p id="idf1">段落段落</p>
<p id="idf2">段落段落</p>
<p id="idf3">段落段落</p>
账号：<input type="text"><br>
密码：<input type="password">
<img src="" alt="abcde">
<img src="" alt="abc">
<img src="" alt="abd">
<img src="" alt="cde">
</body>
- 效果图
属性选择器.png
通配符选择器
- 书写格式
*｛
属性：属性值
｝
用来设置所有的标签，通常做一些全局的设置，比如清除默认标签的自带间距。
选择器的优先级
- 是否是直接选中，与之相反的是间接选中，就是通过父类继承的属性。直接选择的要大于间接选择
- 都是直接选中，并且都是同类型的，按照优先级进行比较。id>类>标签>通配符>继承>默认
- 如果都是直接选中，并且是相同类型的选择器，写在后面的会覆盖前面的
`
