CSS基础知识总结（2）

1、为CSS规则添加!important，会出现什么效果？

它会消除掉样式表中固有的优先级，然后应用新的优先级。虽然说它跟优先级没有什么关系，但是它本身会影响输出的结果，然后需要指出的一点是：当两条相互冲突的带有！important规则的声明呗应用在相同的元素上面是时，会选择优先级更高的样式进行使用。

我们在如下情况下，可以选择使用!important。

A：覆盖掉内联样式，就是说我们懒得去找某个HTML元素，我们在那边的style内容里面写了什么东西，直接用！important，写上新的样式，直接将它覆盖掉。

    <style>
        .awesome{
            color: red !important;
        }
    </style>
    <body>
        <p class="awesome" style="color: greenyellow;">hello world</p>
    </body>

 

B：覆盖掉优先级更高的样式：看下面案例->

    <style>
        #someElement{
            color: blue;
        }

        .awesome{
            color: red !important;
        }
    </style>
    <body>
        <p id="someElemment">
            <p class="awesome">hello world</p>
        </p>
    </body>

既然！important能够把样式覆盖掉，那么我们能不能把!important覆盖掉呢？

A：再次添加一条带!important的CSS规则，再给这个样式一个更高的优先级，比如说我们已经在类选择器中使用了!important，那么我们可以再在id选择器里面使用!important。

B：或者再写一次此样式，但是得在原样式之后，比方说我们最开始就把!important用在了id选择器里面，如果说第一条，我们就不适用了，我们就直接在后面写一条新样式好了。

2、比较div h1、 #div h1、h1、div h1 #_h、div h1.c_h 这几个的优先级。

在进行比较之前，我们需要理解优先级的比较：

内联样式：权值为1000

id选择器：权值为0100

类、伪类：权值为0010

属性选择器：权值为0011

标签、伪元素选择器：权值为0001

通配符、子类选择器、兄弟选择器：权值为0000.

那么我们可以得出上面的值的权值为：

div h1：0002

#div h1：0101

h1：0001

div h1 #_b:0102

div h1.c_h:0012

把上面的值从左往右比较就是了。

3、E:nth-last-of-type与E:last-child的区别。

nth-last-of-type用一个参数指定，该参数表示匹配元素的模式，从末尾开始数。

last-child:代表一组兄弟元素中的最后一个元素。

posted @ 2024-07-05 17:07  Tomhard  阅读(28)  评论(0)    收藏  举报