CSS选择器及优先级

更新日期: 2020-02-12阅读: 1.9k标签: 选择器

选择器分类

id选择器

<div id="wrap"></div>
#wrap{ background: black; }

类选择器

<div class="wrap"></div>
.wrap{ background: black; }

标签选择器

div{
    margin:0;
}

属性选择器

<input type="text">
[type=text] {
    background: black;
}

伪类选择器

  1. a元素的伪类:link、visited、active、hover。
  2. 其他
    (1) li:first-child{} (修饰第一个li)
    (2) li:last-child{} (修饰最后一个li)
    (3) li:nth-child{} (修饰第()个li)
    (4) li:not(){} (不修饰第()个li,括号里面可以填以上的选择器)
<ul>
    <li></li>
    <li></li>
    <li><a href=""></a></li>
</ul>
li:first-child {
    border:1px solid black;
}
li:last-child {
    border:1px solid red;
}
li:nth-child(2){
    border:1px solid yellow;
}

伪元素选择器

p::first-line {
  color: blue;
  text-transform: uppercase;
}

群选择器
以,分隔(逗号分隔开需要修饰的模块名)

<div>
    <p><span></span></p>
    <p></p>
</div>

.qun,span {
    margin:0;
}

全局选择器
以*开头(星号标在大括号前,修饰了包含body所有的标签)

* {
    margin:0;
}

紧邻兄弟选择器(相邻选择器)
以+隔开相邻关系的元素,即第二个节点紧邻着第一个节点,并且拥有共同的父节点。

<div class="qun">
    <p class="first">
        <span>第一</span>
    </p>
    <p>第二</p> /*修饰*/
    <p>第三</p>
</div>

.first+p{
    margin:0;
}

一般兄弟选择器
以~隔开兄弟关系的元素,第二个节点在第一个节点后面的任意位置,并且这俩节点的父节点相同。

<div>
    <p>
        <span>第一</span>
    </p>
    <p>第二</p> /*修饰*/
    <p>第三</p> /*修饰*/
</div>

.first~p{
    margin:0;
}

子元素选择器
以>隔开父子级元素,子选择器只是选择元素的直接后代,即仅仅作用于第一个后代。

<div>
    <p>
        <span>第一</span>
    </p>
    <p>第二</p>
    <p>第三</p>
    <span>第四</span> /*修饰*/
</div>

.qun > span {
    color:black;
}

后代选择器
以空格隔开包含关系的元素,选择元素的所有后代

<div>
    <p>
        <span>第一</span> /*修饰*/
    </p>
    <p>第二</p>
    <p>第三</p>
    <span>第四</span> /*修饰*/
</div>

.qun span {
    color:black;
}


优先级的计算规则

!important > 内联 > ID选择器 > 类选择器 > 标签选择器。

优先级是由A、B、C、D的值来决定的,其中它们的值计算规则如下:

  1. 如果存在内联样式,那么A = 1, 否则A = 0;
  2. B的值等于ID选择器出现的次数;
  3. C的值等于类选择器和属性选择器和伪类出现的总次数;
  4. D的值等于标签选择器和伪元素出现的总次数 。

例子:

#nav-global > ul > li > a.nav-link

套用上面的算法,依次求出A B C D的值:

  1. 因为没有内联样式 ,所以A = 0;
  2. ID选择器总共出现了1次,B = 1;
  3. 类选择器出现了1次, 属性选择器出现了0次,伪类选择器出现0次,所以C = (1 + 0 + 0) = 1;
  4. 标签选择器出现了3次, 伪元素出现了0次,所以D = (3 + 0) = 3;

上面算出的A、B、C、D可以简记作:(0, 1, 1, 3)。
比较规则是: 从左往右依次进行比较 ,较大者胜出,如果相等,则继续往右移动一位进行比较 。如果4位全部相等,则后面的会覆盖前面的

链接: https://www.fly63.com/article/detial/7799

CSS3 target 选择器_:target伪类的使用

arget作为目标伪类选择器,是css3中的新特性之一。URL 带有后面跟有锚名称 #,指向文档内某个具体的元素。这个被链接的元素就是目标元素(target element)。:target 选择器可用于选取当前活动的目标元素。

css兄弟选择器(+ 和 ~)的使用和区别

这篇文章主要讲解css中兄弟选择器的使用,以及+和~的区别有哪些?+ 选择器:如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以使用相邻兄弟选择器。 ~ 选择器:作用是查找某一个指定元素的后面的所有兄弟结点。

jquery的选择器有哪些?如何对元素取值和设置值

jQuery 选择器 jQuery 选择器允许您对 HTML 元素组或单个元素进行操作, Jquery 选择器包括:基本选择器、层叠选择器 、基本过滤选择器 、内容过滤选择器、可视化过滤选择器.....

CSS中的focus-within伪类选择器

在CSS中 :focus-within 是一个伪类,CSS中伪类:focus-within能非常方便处理获取焦点状态, 当元素本身或其后代获得焦点时,:focus-within伪类的元素就会有效。

vue 选择器_实现scoped深度作用选择器

vue项目中,当<style>标签有scoped属性时,它的 CSS 样式只作用于当前组件中的元素,父组件的样式将不会渗透到子组件中。如果你希望 scoped 样式中的一个选择器能够作用得更深,例如影响子组件

css 选择器符号

空格:后代选择器,表示div元素里面所有的p元素。> 子选择器:表示div元素里面所有的子代(不含孙代及以后)p元素,~兄弟元素选择器:表示.cls元素往后的同级的p元素

css选择器总结_30个CSS3选择器

总结30个CSS3选择器:*选择器是选择页面上的全部元素,上面的代码作用是把全部元素的margin和padding设为0,最基本的清除浏览器默认样式的方法。

css节点选择器

基础选择器是选择器的所有选择器的基本组成元素,也最简单,包含如下5个类别:ID选择器,标签选择器,类选择器,属性选择器,通配选择器

CSS3 中关于 *-of-type 和 *-child的差异性及适用场景

CSS3 中有很多表示元素序号的选择器,有以下几种:first-child、:first-of-type、:last-of-type、:only-of-type、:only-child、:nth-child(n)、:nth-last-child(n)、:nth-of-type(n)、:nth-last-of-type(n)、:last-child

微信小程序文档没写支持, 但是实际支持的选择器有哪些?

目前支持的选择器有,在实践中我发现, 除了文档上说的几种选择器, 经过测试发现其实还有几种支持的选择器没有列举!还支持哪些选择器?

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!