css内部样式的执行顺序

最新推荐文章于 2024-06-16 17:29:19 发布

陈小帅1019

最新推荐文章于 2024-06-16 17:29:19 发布

阅读量918

点赞数

本文链接：https://blog.csdn.net/qq_40174864/article/details/82387472

版权

总的来说：最内层影响最终效果；同级之间，后执行的决定最终效果。

1）有<p>和class同时存在的话，

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Ankoucehn</title> <style> .a{ color:red; } p{ color: blue; } </style> </head> <body> <p class="a">aaaaaa</p> <p class="a">bbbbbb</p> <p class="a">ccc</p> </body> </html>

打印出来的是红色的，所以是class影响最终效果。

<head>
    <meta charset="UTF-8">
    <title>Ankouchen</title>
    <link rel="stylesheet" href="5.css">
    <style>
        #p1 { background-color: blue;}
        .x { background-color: red; }
        p { background-color: yellow }
        table {color: blue;}
        tr {color: red;}
        td {color: yellow;}
        .y{background-color: dodgerblue;}
        span {background-color: red;}
        span {background-color: yellow;}
    </style>
</head>
<body>
<p id="p1" class="x" >段落1</p>
<table border="1" width="100%">
    <tr>
        <td>内容</td>
    </tr>
</table>
<span class="y">内容</span>
</body>
</html>

结论：

a.所有最终p段落的背景颜色是blue。id应该是最内层的，与p和.class相比，ID影响最终的效果

b:table最终的颜色是yellow，最内层是td，而td是yellow所以最终效果是yellow。

c：id=“y”影响span的最终效果。ID属于内层，如果去掉class的话，只剩下span之间的比较，那么哪个后执行，就会影响最终的效果。

2)父子选择器

 /*父子关系选择器

 父选择器  > 子选择器
 div     >  span
*/    
（截取得是部分代码）
<style>
        /*父子关系选择器

        父选择器  > 子选择器
        div     >  span
       */
        div>span {color:red;}
</style>
<body>
<div>
    <span>aaaa</span>
</div>
<div>
    <p><span>bbbb</span></p>
</div>
</body>

最终打印的结果是aaaa是红色的，而bbbb不变，原因是div下是span的选择器只有aaaa；div和bbbb中间隔了一代p标签。

3）/* 后代选择器
祖先选择器空格后代选择器
*/

这个是找到所有符合条件的后代选择器

<style>

#div3 tbody td {color:red;}

</style>

<body>

</body>

陈小帅1019

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css内部样式的执行顺序

总的来说：最内层影响最终效果；同级之间，后执行的决定最终效果。1）有&lt;p&gt;和class同时存在的话，&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Ankoucehn&lt;/title&
复制链接

扫一扫