css来源优先级与选择器权重

css来源优先级与选择器

自定义css样式来源及优先级示例

优先级：内联样式>文本样式>外联样式

p{
    color:aqua;
}
.title{
    color:cyan;
    font-size: larger;
}

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="demo3.css">
</head>
<body>
    <style>
        p{
            color:blue;
        }
        .title{
            color:chartreuse;
            font-size:30px;
        }
    </style>
    <p style="color: red;">就是这一段文字看看效果</p>
    <div class="title">这一段用类定义的样式会呈现什么效果呢？</div>
    <div class="title" style="color:cornflowerblue;font-size:xx-small">这一段用类定义的样式会呈现什么效果呢？</div>
</body>
</html>

常用选择器及权重

常用选择器有如下几种：

标签选择器：html预置标签如段落、表格，文本，表单等
属性选择器：用标签+[属性=“属性值”]来表示
群组选择器：用,来表示
通配选择器:用*来表示
上下文选择器：
- 子元素用 >表示
- 后代元素：用空格表示
- 相邻兄弟：用+号表示
- 所有兄弟：用~波浪线表示

选择器权重用（0 0 0）表示
其中个位上的0表示为标签tag，十位上的0表示为class，百位上的数字表示为id

示例如下：

/* 标签选择器，权重最低 */
ul{
    color:aqua;
    border: 2px solid;
}
/* 空格表示后代 */
.list .item{
    border: 2px greenyellow solid;
}
/* 虽然写在后面，但是权重为0  1  0,比上面样式低 */
.item{
    color:blue
}
/* 用ID来做最高权重 */
#seven{
    background-color: burlywood;
    color:rgb(233, 19, 222);
}
/* 所有兄弟及其后代元素 */
.list .item.five ~ *{
    background-color:coral;
}

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="demo3.css">
</head>
<body>
    <ul class="list">
        <dd class="item">item1</dd>
        <dd class="item">item2</dd>
        <dd class="item">item3</dd>
        <dd class="item">item4</dd>
        <dd class="item five">item5</dd>
        <dd class="item">item6</dd>
        <dd class="item" id="seven">item7</dd>
        <dd class="item">item8</dd>
    </ul>
</body>
</html>

css来源优先级与选择器

自定义css样式来源及优先级示例

常用选择器及权重

相关文章