css优先取值怎么写

在CSS中，我们可能会使用多个选择器来定义相同的样式，但是当样式冲突时，就需要根据CSS的优先级规则来决定最终的样式取值。

 /* 选择器1 */    h1 {
            color: red;
    }
        /* 选择器2 */    .title {
            color: blue;
    }
        /* 选择器3 */    #header h1 {
            color: green;
    }
     

以上就是三个不同的选择器，它们都定义了不同的样式。那么当我们的HTML中有一个h1元素，它既有class属性为"title"，又在id属性为"header"的div元素中，那么这个h1元素最终的颜色会是什么呢？

这时就需要根据CSS的优先级规则来决定了。我们可以根据以下三个规则进行分析：

1. 内联样式 > 内部样式表 > 外部样式表
2. id选择器 > 类选择器 > 元素选择器
3. 指定性 > 位置权重

其中第一条规则非常好理解，就是内联样式的优先级最高，因为它是直接写在元素的style属性中的。

接下来看第二条规则，id选择器的优先级最高，因为id属性是唯一的，所以它与某个元素的关联程度非常高，即使它与其他选择器组合使用，也能够很好地识别出元素。

类选择器的优先级次之，因为一个元素可以同时包含多个类，所以它与元素的关联程度就没有id选择器那样强了。

最后是元素选择器，这是最基础的选择器，只是根据元素名称来选择元素，优先级最低。

第三条规则比较复杂，是指当存在多个选择器时，根据选择器的特殊性（指定性）来决定优先级。指定性是一个由四个数字组成的值，分别表示内联样式、id选择器、类选择器、元素选择器的个数。

例如以下选择器的指定性分别为(0,0,1,1)、(0,1,0,0)、(1,0,1,0)：

 h1.title {
            color: red;
    }
        #header {
            color: blue;
    }
        #header h1 {
            color: green;
    }
     

当存在冲突时，就需要根据指定性的值来决定最终的样式取值。例如前面提到的h1元素，它同时符合选择器1、选择器2、选择器3，但是选择器3的指定性值最高，所以最终的颜色会是绿色。

以上就是CSS优先取值规则的详细介绍，当我们设置CSS样式时，一定要考虑好选择器的优先级，避免出现样式冲突的情况。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！