css

样式来源

默认样式
行内样式 style=””
文档样式 <style></style>
外部样式 style.css

选择器

基本选择器

[属性]
# id
. class
* 通配符
上下文选择器
> 子元素只选择一代
空格所有后代
+ 相邻兄弟
~ 所有兄弟

css权重

最高级:!important
第一等:内链style=””
第二等:ID选择器 #h3
第三等:类选择器 .h3
第四等:空格选择器 div h3
通配符:子选择器、相邻选择器等

案例

<!DOCTYPE html>
<html lang="en">
<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>
<!-- 第三按文件和style顺序从下往上 -->
    <link rel="stylesheet" href="css.css">
<style>
*{
    font-size:45px;
    font-weight:bolder;
}
/* 子元素 只选择一代 */
.div2>div>span{
    color:#159454;
}
/* 空格 所有后代 */
.div3>div span{
    color:#8b9415;
}
/* 相邻兄弟 */
.div4>div+ul{
    color:#849229;
}
/* 所有兄弟 ~ */
.div5>div~ul{
    color:#359229;
}
/* 
最高级:!important
第一等:内链style=""
第二等:ID选择器 #h3
第三等:类选择器 .h3
第四等:空格选择器 div h3
通配符:子选择器、相邻选择器等
*/
div h3.h3#h3{
    color:#123456;
}
div h3.h3{
    color:#234567;
}
div h3{
    color:#345678;
}
h3{
    color:#456789;
}
/* 优先执行!important */
.div{
    color:#4a498f !important;
}
</style>
</head>
<body>
<div style="display: flex;" >
<div style="width:50%;" >
    <!-- 第二执行style -->
    <div class="div" style="color:red;">123</div>
    <div class="div2" >
        <div>
            <span>11</span>
        </div>
        <div>
            <div>
                <span>22</span>
            </div>
        </div>
    </div>
    <div class="div3" >
        <div>
            <span>11</span>
        </div>
        <div>
            <div>
                <span>22</span>
            </div>
        </div>
    </div>
    <div class="div4" >
        <div>
            <span>11</span>
        </div>
        <ul>
            <li>222</li>
        </ul>
        <ul>
            <li>333</li>
        </ul>
    </div>
    <div class="div5" >
        <div>
            <span>11</span>
        </div>
        <ul>
            <li>222</li>
        </ul>
        <ul>
            <li>333</li>
        </ul>
    </div>
</div>
<div style="width:50%;" >
<!-- 权重 -->
<h3 class="h3" id="h3" >123</h3>
</div>
</div>
</body>
</html>

批改老师：

PHPz

批改状态：合格

老师批语：

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

html快捷键/属性/标签学习

2021-12-21 22:54:52

css

样式来源

选择器

基本选择器

上下文选择器

css权重

案例