前端学习06派生选择器、id选择器、继承、优先级

最新推荐文章于 2022-11-05 09:50:40 发布

花落墨山河

最新推荐文章于 2022-11-05 09:50:40 发布

阅读量141

点赞数

本文链接：https://blog.csdn.net/weixin_44189110/article/details/108832230

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css</title>


    <!-- （3）外部样式引入css文件 link:css-->
    <link rel="stylesheet" href="css/style.css">
    <!-- （2）内部样式 p-->
        <!-- （4）导入外部样式 import-->

    <style type="text/css">
        @import "css/box.css";

         /* 派生选择器 */
         div.style1 {
            color: lightpink;
        }

         .box1 li{
            color: teal;
        }

        p{
            background-color: teal;
            font-size: 18px;
            font-style: italic;
        }
        
        /* * {
            color: red;
        }; */
      
        /* id选择器 */
        #content{
            color: rgb(21, 240, 21);
        }

       /* 选择器的分组 */
        h1,.box3,p{
            color: khaki;
        }
        p{
            width: 100px;
            background-color: rgb(231, 213, 44);
            color: lawngreen;
        }
        /* 选择器继承 */
        .test{
            font-size: 28px;

        }
        .test span{
            font-weight: bold;
            font-size: 12px; /*改写父元素的*/
        }
        /* 优先级 */
        p{
            color: rgb(4, 4, 122)!important;
        }

        #content div.main_content h2{/*100+1+10+1=112*/
            color: mediumorchid;
        }
        #content .main_content h2{/*100+10+1=111*/
            color: rgb(246, 222, 252);
        }
        
    </style>

    
</head>
<body>
    原先是用表格布局
    w3c推出了css，把结构和样式分离，html只负责结构，样式交给css实现，
    更易维护修改

    css语法有三个部分：
        选择器{
            属性："属性值"
        }
    
    CSS引用方式
     <!-- （1）行间样式嵌入式样式 -->
        <div style="color: springgreen; width: 100px;">行间样式测试1</div>
        <p>段落</p>
        <span>span标签</span>
        
        <div class="box">导入外部样式 类选择器</div>
        
    在实际项目开发中，最好使用外部样式。link import
        1.link还可以加载RSS等其他的事务
        2.link引用css时，在页面栽入时同时加载；@import需要页面完全栽入以后加载
        3.link支持使用JavaScript控制DOM去改变样式
    
    CSS选择器分类：
        1.*:所有标签，性能差，开发室不建议
        2.标签选择器
        3.类选择器class 可以定义一组
        4.id选择器 id名称唯一，不许重复
        <p id="content"> id选择器 </p>
        5.派生选择器：根、上下文选择标签
        <ul class="box1">
            <li>li001</li>
            <li>li002</li>
            <li>li003</li>
        </ul>
        <div class="style1">-----!divb------</div>
        注意！
        style里面{}；，不要加分号

        6.伪类选择器（以后学）
    <br>
    选择器的分组
        让多个选择器（元素）具有相同的样式，一般用于设置公共样式。
        <div class="box3">box3</div>
        <p>p</p>
        <h1>h1</h1>
    <br>
    选择器的继承
        子元素可以继承，父元素的样式
        <div class="test">这是一段测试 <span>内容</span>。</div>
    <br>
    优先级
        !important(10000)>内联样式1000>id选择器100 >类、伪类10 >标签选择器1
        <div id="content">
            <div class="main_content">
                <h2>h2标题</h2>
            </div>
        </div>
    
</body>
</html>```

花落墨山河

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端学习06派生选择器、id选择器、继承、优先级

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>css</title>  &
复制链接

扫一扫