什么是CSS选择器？
在 CSS 中，选择器是一种模式，用于选择需要添加样式的元素，主要分为以下5种：
1、基础选择器
2、组合选择器
3、属性选择器
4、伪类选择器
5、伪元素选择器
基础选择器
基础选择器
组合选择器
组合选择器
属性选择器
属性选择器
伪类选择器
伪类选择器
伪元素选择器
伪元素选择器
说了那么多为了大家便于理解给大家举个栗子：
下面有几个常见的问题以我个人理解给大家解答一下下~！
1、id和class的使用场景是什么？
id为指定标签的唯一标示，id属性的值在当前page是唯一的；格式为“<input type=text id="this-id"/>”多用于根据唯一的id号，快速获取标签对象。如：document.getElementById('this-id')；
class为指定标签的类名，可以把多个类，放在class属性里，但必须用空格隔开。如 ：‘“<p class="oneclass twoclass"></p>”多用于css操作，把一写特定的样式放入class中，需要此类的标签可在标签中增加此类；
2、a:link，a:hover，a:active，a:visited的顺序是怎么样的？why?
顺序为：a:link，a:visited ，a:hover，a:active；如果是两个及以上出现在css中，必须按照以上的顺序进行书写，否则将会出现错误；
对于这四个伪类的理解 a:link 表示a连接还未发生访问的状态，a:visited表示已经点击a连接进行访问之后的状态，a:hover表示鼠标悬停在a连接中的状态，a:active表示鼠标在点击中未释放a连接的状态；如果不按照此顺序进行书写那么将会出现以下问题如：设置的每个状态的样式混乱或者属性之间相互覆盖等；如下栗：
/*
a:link{background:#ff6600;}
a:active{background:green;}：
a:visited{background:blueviolet;}
a:hover{background:red;}
*/
/*这里的a:link和a:active的样式就不显示了；*/
借用他人描述为：在CSS中，如果对于相同元素有针对不同条件的定义，宜将最一般的条件放在最上面，并依次向下，保证最下面的是最特殊的条件。这样，浏览器在显示元素时，才会从特殊到一般、逐级向上验证条件，才会使你的每一个CSS语句都起到效果。当然，如果故意打乱顺序，也会造成一些特殊的效果。比如：
1.鼠标经过的“未访问链接”同时拥有a:link、a:hover两种属性，后面的属性会覆盖前面的属性定义；
2.鼠标经过的“已访问链接”同时拥有a:visited、a:hover两种属性，后面的属性会覆盖前面的属性定义；所以说，a:hover定义一定要放在a:link、a:visited的后面！
3、选择器的优先级是怎样的？对于复杂场景如何计算优先级？
1. 在属性后面使用!important会覆盖页面内任何位置定义的元素样式；
2. 作为style属性写在元素标签上的内联样式；
3. id选择器；
4. 类选择器；
5. 伪类选择器；
6. 属性选择器；
7. 标签选择器；
8. 通配符选择器；
9. 浏览器自定义；
计算优先级可以运用一下加法运算id选择器的权重为1000，class选择器的权重为100，标签选择器的权重为10去计算；如图：
上图在同一个p标签中分别指定了Id属性值为this-id和class属性值为this-cl,我们可以运用权重值进行计算id为1000>class为100所以我们设置的文字样式为color:red;将展示在浏览器中；
如果遇到两个权重相同的选择器怎么办？当然是在设置属性样式时下面的样式覆盖上面的样式啦~！
哇咔咔~ ！以上均为本人个人理解，如有描述不当之处还请大家多多指教啦~
网友评论