标签显示模式，复合选择器，规范

最新推荐文章于 2024-09-03 17:42:15 发布

海伦•

最新推荐文章于 2024-09-03 17:42:15 发布

阅读量226

点赞数 1

分类专栏： ==========前端========= CSS

本文链接：https://blog.csdn.net/qq_42794545/article/details/88917561

版权

==========前端========= 同时被 2 个专栏收录

28 篇文章 0 订阅

订阅专栏

CSS

4 篇文章 0 订阅

订阅专栏

1.标签显示模式

行内样式表
内部样式表
外部样式表 link连接css与html

标签显示模式

块标签：div，p，ol，ul等可以设置高度，宽度
行内元素：span，a，strong等
行内块元素：img，input，td

标签显示模式转换

display：inline 块集元素转换为行内

display：block 行内元素转换为块集

display：inline-block 行内块显示模式

2.复合选择器

交集选择器：标签.class{} 既满足标签又满足class
并集选择器：标签或者类选择器用逗号隔开{}
后代选择器：层层关系用空格隔开{}
子元素选择器：类>亲儿子{}

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>复合选择器</title>
    <style>
        .nav
        .sidenav, .nav{/* 并集选择器 */
            font-size: 18px;
            font-family: "microsoft yahei"
        }
        .sidenav .r-side{/* 后代选择器 */
            color: red;
        }
        .nav>ul>li>a{/* 子元素选择器 */
            color: seagreen;

        }
        
    </style>
</head>
<body>
    <div class="nav">
         <ul>
             <li><a href="#">公司首页</a></li>
             <li><a href="#">公司简介</a></li>
             <li><a href="#">公司产品</a></li>
             <li><a href="#">联系我们</a>
                 <ul>
                     <li><a href="#">公司邮箱</a></li>
                     <li><a href="#">公司电话</a></li>
                 </ul>
             </li>
            
         </ul>
    </div>
    <div class="sidenav">
        <div class="l-side">左侧导航栏</div>
        <a href="#" class="r-side">登录</a>
    </div>
</body>
</html>

属性选择器一：标签[属性] 或者标签[属性=值]
属性选择器二：标签[属性^=font] 表示以font开头或者标签[属性$=font] 表示以font结尾或者标签[属性*=font] 表示以font任意位置
伪元素选择器一：E::first-letter{} E::first-line{} E::selection{} 注意：代表伪类 ::代表伪元素
伪元素选择器二：E::before{content:" ";}内部前面插入 E::after{content:" ";}内部后面插入

3.规范

并集选择器的各个元素换行
大括号之前加个空格
属性：之后不可以有空格
一般情况下不允许超过三级
每个属性写完后面加“；”

修改案例


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>复合选择器</title>
    <style>
        .sidenav,
        .nav {/* 并集选择器 */
            font-size: 18px;
            font-family: "microsoft yahei";
        }
        .sidenav .r-side {/* 后代选择器 */
            color: red;
        }
        .nav>ul>li>a {/* 子元素选择器 */
            color: seagreen;

        }
        
    </style>
</head>
<body>
    <div class="nav">
         <ul>
             <li><a href="#">公司首页</a></li>
             <li><a href="#">公司简介</a></li>
             <li><a href="#">公司产品</a></li>
             <li><a href="#">联系我们</a>
                 <ul>
                     <li><a href="#">公司邮箱</a></li>
                     <li><a href="#">公司电话</a></li>
                 </ul>
             </li>
            
         </ul>
    </div>
    <div class="sidenav">
        <div class="l-side">左侧导航栏</div>
        <a href="#" class="r-side">登录</a>
    </div>
</body>
</html>