版权声明：本文为博主原创文章，若转载请注明出处且不得删改。（如有错误请提出指正，部分文章会参考其他文章，已经表明参考出处，如有侵权请联系删除） https://blog.csdn.net/qq_34902437/article/details/80765204
id选择器
作用
通过设置 id 值来选取元素。
语法实例
#idName{
margin:0px;
}类选择器
作用
通过设置类名来选取元素。
语法实例
.className{
margin:0px;
}标签选择器
作用
通过选取标签名来选取元素。
语法实例
div{
margin:0px;
}类选择器
作用
通过设置类名来选取元素。
语法实例
.className{
margin:0px;
}相邻选择器
作用
紧跟着 A 元素后面的 B 元素（同级）
语法实例
div+ul{margin:0px;}
<div>
<p>这是第二级元素</p>
</div>
<ul>
<li>这也是第二级元素</li>
</ul>子代选择器
作用
紧跟着 A 元素后面的直接子代 B 元素
语法实例
div > p{margin:0px;}
<div>
<p>这是第二级元素</p>
</div>
<ul>
<li>这也是第二级元素</li>
</ul>后代选择器
作用
紧跟着 A 元素后面的子代 B 元素（可以是孙子，，重孙子这样的元素）
语法实例
div a{margin:0px;}
<div>
<p>
<a>第三级元素</a>
</p>
</div>
<ul>
<li>这也是第二级元素</li>
</ul>通配符选择器
作用
选择所有的元素
语法实例
*{margin:0px;}属性选择器
作用
通过属性来选择
语法实例
E[attr]:选择元素 E 中含有 attr 属性的所有元素。
div[title]{...} //选择 div 元素中含有 title 的元素
div[title][href] //选择 div 元素中含有 title 和 href 的元素E[attr = val]：选择元素 E 中的 attr 属性等于某个值的所有元素。
//选择 div 元素中含有 title 为 www.baidu.com 的元素
div[href = "www.baidu.com"]{...} E[attr ~= val]：选择元素 E 中的 attr 属性包含某个值的所有元素。
//选择 div 元素中含有 title 为 www.baidu.com 的元素
div[class ~= "hh"]{...}
//这个元素就会被选取
<div class = "hh ww"></div> 伪类选择器
所有的伪类
常见的语法实例
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */伪类选择器搭配可以其他选择器
a.content:link {color: #FF0000}
/* 选择 a 和 它的 类为 content 的元素 */选择器优先级问题
参考
《层叠和继承》-MDN
《CSS选择器优先级总结》
《如何和何时使用CSS的!important》
重要性，专用性和代码顺序
重要性
所谓重要性就是对 ！important 的使用，！important 用于增加选择器的权重。
实例
div{margin:0px !important;}
div{margin:10px;}
//理论上 div 的 margin 应该会被设置成为 10px，因为后面的样式会覆盖
//前面的样式，但是实际上 margin 为 0px ，因为 ！important 增加了
//第一个的权重实际开发中，强烈不建议使用 ！important 来操作。
相互冲突的声明将按以下顺序适用，后一种将覆盖先前的声明：
在用户代理样式表的声明 (例如：浏览器在没有其他声明的默认样式).
用户样式表中的普通声明（由用户设置的自定义样式）。
作者样式表中的普通声明（这是我们设置的样式，Web开发人员）。
作者样式表中的重要声明
用户样式表中的重要声明
（摘自 MDN）
专用性
1. 千位：如果声明是在style 属性中该列加1分。
2. 百位：在整个选择器中每包含一个ID选择器就在该列中加1分。
3. 十位：在整个选择器中每包含一个类选择器、属性选择器、或者伪类就在该列
中加1分。
4. 个位：在整个选择器中每包含一个元素选择器或伪元素就在该列中加1分。
注意: 通用选择器 (*), 复合选择器 (+, >, ~, ’ ‘) 和否定伪类 (:not) 在专用性中无影响。
总结排序：!important > 行内样式（style）>ID选择器 > 类选择器 > 元素 > 通配符 > 继承 > 浏览器默认属性
代码顺序
如果重要性和专用性一样的话，就通过代码的顺序决定那个样式被采用。