实训day 选择器

最新推荐文章于 2024-09-04 22:39:59 发布

-Wave

最新推荐文章于 2024-09-04 22:39:59 发布

阅读量72

点赞数

分类专栏：实训内容

本文链接：https://blog.csdn.net/weixin_44092937/article/details/91533883

版权

实训内容专栏收录该内容

10 篇文章 0 订阅

订阅专栏

选择器
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器</title>
    <style>
        /*
           标签选择器 ： 对对应的标签进行渲染
           标签名{
              属性：值；
           }
        */
        p{
            color:red;
        }
        /*类选择器
          .类名{
             属性值：值；
          }
        */
        span{
            color:blue;
        }
        .p1{
            color:yellow;
        }
        .p2{
            color:red;
        }
        /*id 选择器*/
        #p3{
            color:green;
        }
    </style>
</head>
<body>
<p class="p1">段落1</p>
<p class="p2">段落2</p>
<p class="p1">段落3</p>
<p class="p2">段落4</p>
<p class="p1" id="p3">段落5</p>
<p class="p2">段落6</p>
<span class="p1">文子</span>

</body>
</html>

根据权重

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器</title>
    <style>
        p{
            color:yellow;
        }
        /*
        后代选择器
        选择器 选择器{

        }
        */
        div p{
            color:green;
        }
        /*子代选择器
          父选择器>子选择器{
          }
        */
        div>p{
            color:red;
        }
        strong>p {
            color: black;
        }
        /*通配符*/
        *{
            color:blue;
        }
        /*群选择器*/
        div,p{
            color:purple;
        }
        /*
           选择器分类        权重大   选择大的选择器
           行内选择器         1000
           id选择器   “#id“  100
           类选择器     .类名    10
           标签选择器             1
           通配符选择器          0

          子代选择器
           后代选择器
           群组选择器
           作用于同一标签时 相同覆盖 不同叠加

        */
    </style>
</head>
<body>
<div>
    <p>段落1</p>
    <strong><p>段落2</p></strong>
    <p>段落3</p>
</div>
</body>
</html>