版权声明:本文为博主原创文章,若转载请注明出处且不得删改。(如有错误请提出指正,部分文章会参考其他文章,已经表明参考出处,如有侵权请联系删除) 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选择器 > 类选择器 > 元素 > 通配符 > 继承 > 浏览器默认属性
代码顺序
如果重要性和专用性一样的话,就通过代码的顺序决定那个样式被采用。