选择器的一些类型和优先级别问题

最新推荐文章于 2024-01-11 09:26:10 发布

together小翊

最新推荐文章于 2024-01-11 09:26:10 发布

阅读量257

点赞数 2

分类专栏：选择器文章标签： html

本文链接：https://blog.csdn.net/m0_64820603/article/details/123602413

版权

选择器专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!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>选择器</title>
</head>
<style>
    div{
        color: blue;
         /* text-align: center;使其在页面居中 */
        /* line-height: 0; 在页面的高度 */
    }
/* 标签选择器选择方法 */
    .father{
        color: red;
    }
/* class选择器选择方法 */
    .father .son .grandson{
        color: green;
         /* text-align: center;使其在页面居中 */
        /* line-height: 0; 在页面的高度 */
    }
/* 后代选择器的选择方法 */
     h1{
        color: pink;
        /* text-align: center;使其在页面居中 */
        /* line-height: 0; 在页面的高度 */
    }
/* css文本样式的可在div标签里面应用 */
    

    .first{
       color: green;
       text-align: center;
       line-height: 0;
    }
    table{
        color: red;
        text-align: center;
        line-height: 0;
    }
    tr{
        color: red;
        text-align:center;
        line-height: 0;
    } 
/* 部分文本样式是不能在table标签中使用的，如text-align */

/* 同级选择器的选择方法 */
    .one+li{
        text-align: center;
        color: yellowgreen;
    }
/* 1.同级相邻选择法：对所选中的选择器的相邻的下一个同级选择器进行选择 */
    .one~li{
        text-align: center;
        color: skyblue;
    }
/* 2.同级所有选择法：对除所选中的选择器外的所有同级选择器进行选中 */
/* 文本样式可以应用于表单标签中 */
    a{
        text-align: center;
        line-height: 100px;
        text-decoration-color:red;
    }
/* 部分文本样式可以应用于a标签中 */

/* 选择器的优先级 */
/* 1.同类选择器以顺序为后填写，排在下面的优先 */
    div{
        color: red;
    }
    div{
        color: pink;
    }
/* 2.不同选择器的优先级别不同，id选择器>类选择器>标签选择器 */
    div{
        text-align: right;
    }
    .a{
        text-align: center;
    }
    #b{
        text-align: left;
    }
/* 3.选择器的个数越多，优先级越高 */
    /* 0，0，1 */
    p{
        color: blueviolet;
    }
    /* 0,0,2 */
    body p{
        color: aqua;
    }
/* 优先级计算方法：
   （百）（个）（十）
     id  class 标签 */
     /* 0,1,0 */
    .you{
        color: red;
    }
    /* 0,1,1 */
    .you,p{
        color: green;
    }
    /* 1,0,0 */
    #me{
        color: brown;
    }
    /* 1,0,1 */
    #me,p{
        color: skyblue;
    }
    /* 1,1,0 */
    #me,.you{
        color: yellow;
    }
    /* 1,1,1 */
    #me,.you,p{
        color: black;
    }
</style>
<body>
    <div class="father">
        <div class="son">
            <div class="grandson">
                <h1 >工作室</h1>
            </div>
        </div>
    </div>
<hr>
    <table class="first" border="1" > 
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
        </tr>
    </table>
<hr>
    <ul> 
        <li class="one">item0</li>
        <li class="two">item1</li>
        <li class="three">item2</li>
        <li class="four">item3</li>
        <li class="five">item4</li>
        <li class="six">item5</li>
        <li class="seven">item6</li>
        <li class="eight">item7</li>
    </ul>
<hr>
    <a href="">你好</a>

    <div id="b" class="a" >同类选择器</div>

    <p id="me" class="you">选择器个数</p>
</body>
</html>