CSS优先级

最新推荐文章于 2023-09-19 22:46:12 发布

xx小台灯

最新推荐文章于 2023-09-19 22:46:12 发布

阅读量141

点赞数

分类专栏： css 文章标签： css css3 html

本文链接：https://blog.csdn.net/li5672/article/details/121230757

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

内联样式优先与Style标签

<!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>Document</title>
    <style>
        h1 {
            color: red;
        }
    </style>
</head>
<body>
    <h1 style="color: blue;">CSS测试</h1>
</body>
</html>

后声明的优先于先声明的

<!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>style与link</title>
    <style>
        h1 {
            color: red;
        }
    </style>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <h1>CSS测试</h1>
</body>
</html>

style.css

h1{color: blue;}

Style标签优先于link标签

style标签在link标签后面的前提下,其实也是先后顺序的比较

<!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>style与link</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <style>
        h1 {
            color: red;
        }
    </style>
    <h1>CSS测试</h1>
</body>
</html>

style.css

h1{color: blue;}

id优先与class

即使class在id之后声明

<!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>class与id</title>
   <style>
       #text {
           color: red;
       }
       .text {
           color: blue;
       }
   </style>
</head>
<body>
   <h1 class="text" id="text">CSS测试</h1>
</body>

</html>

选择器选择器越详细优先级越高

<!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>
   <style>
       .parent h1 {
           color: red;
       }
       h1 {
           color: blue;
       }
   </style>
</head>
<body>
   <div class="parent">
       <h1 id="text">CSS测试</h1>
   </div>
</body>
</html>

xx小台灯

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS优先级

内联样式优先与Style标签<!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">
复制链接

扫一扫