name选择器_001CSS-选择器与权重

CSS选择器

1. 基本选择器：
   1. 标签选择器 div{ }
   2. 类选择器 .name { }
   3. id选择器 #name { }

1. 高级选择器
   1. 后代选择器：div p 代表div中所有的p标签
   2. 交集选择器：div.box {} div.box li {}
   3. 并集选择器：div,p,h1,li { }

CSS两性——继承性与层叠性

继承性

CSS中有一部分属性可以被继承，比如文字和文本的属性color,font-size,font-family,font-*,text-*。即便标签本身不设置，也能从父标签里继承属性。

层叠性

在CSS中，层叠性是指当有冲突时，听谁的。这里涉及到权重的问题，id选择器>class选择器>标签选择器，先比较id选择器的个数，谁的id选择器多就选谁，即使其他的有多个class选择器，但是只要id选择器比别人少就不选。

以下面的代码为例：

 <div id="box1" class="box1">
        <div id="box2" class="box2">
            <div id="box3" class="box3">
                <p>我的颜色到底听谁的?</p>
            </div>
        </div>
    </div>

以上三种选择器都可以直接选择到p,此时比较权重，此处div.box2算class选择器1个，标签选择器1个，经比较得出颜色是绿色。

例一

#box1 .box2 .box3 p {
    color: red;
}
#box1 div.box2 div.box3 p {
    color: green; 
}
.box1 #box2 div p {
    color: blue;
}

cssid选择器class选择器标签选择器①121②123③112

例二

#box1 .box2 .box3 p {
    color: green;
}
.box1 .box2 #box3 p {
    color: blue;
}
.box1 #box2 .box3 p {
    color: red;
}

cssid选择器class选择器标签选择器①121②121③121

以上权重相同，按谁写在后面，就听谁的，所以结果是红色。

例三

#box1 {
    color: red;
}
​
.box1 .box2 .box3 {
    color: pink;
}
​
.box1 #box2 {
    color: green;
}

三种选择器都没有直接选择元素 通过继承让p拥有属性，此时看谁描述的近，所以结果是粉红色。

例四

#box1 #box2 #box3 {
    color: pink;
}
​
.box1 #box2 #box3 {
    color: green;
}
​
#box1 .box2 #box3 {
    color: red;
}

三种选择器都没有直接选择元素 通过继承让p拥有属性，此时看谁描述的近,就听谁的假如描述的一样近,此时再比较权重，权重是最高就听谁的，假如权重一样，以代码的顺序为准听后面的。

cssid选择器class选择器标签选择器①300②210③210

可以看出①中的id选择器为3个，权重最大，所以结果是粉红色。

!important 的使用

比如在下面的例子中，使用继承的方式都能选中p标签，因为就近原则，看谁描述得越近就听谁的，所以字体颜色是绿色。

#box1 {
    color: red;
}
#box1 #box2 .box3 {
    color: green;
}
.box1 .box2 {
    color: orange !important;
}

但是此时!important却不起作用了。

我们把p标签选择器也加上再试试。

#box1 p{
    color: red;
}
#box1 #box2 .box3 p{
    color: green;
}
.box1 .box2 p{
    color: orange !important;
}

可以看出此时的!important生效了。

所以通过以上的例子我们可以得出结论：

!important 可以提升选择器权重 在就近原则中,无法提升继承的权重