html+css 选择器优先级

最新推荐文章于 2024-08-02 20:11:41 发布

超越～and me

最新推荐文章于 2024-08-02 20:11:41 发布

阅读量579

点赞数 11

分类专栏： html基础文章标签： html css 前端

本文链接：https://blog.csdn.net/2301_78986604/article/details/138255672

版权

html基础专栏收录该内容

56 篇文章 0 订阅

订阅专栏

1.基本选择器优先级

id>class>tagname(标签选择器)>*(通配符选择器)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>基本选择器的优先级</title>
  <style type="text/css">
   #id3{color:yellow;}
   h3{color:red!important;}
   #id3{color:black;}
   .green{color:green;}
  </style>
</head>
<body>
  <h3 class="green" id="id3">同时应用三种选择器所定义样式的h3标题文字</h3>
</body>
</html>

效果图

注：！important提高样式表的优先级（最高）

2.多元素组合选择器的优先级

控制对象的精准度>id个数>class个数>tagname个数>后定义覆盖前定义

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>基本选择器的优先级</title>
  <style type="text/css">
  *{margin:0;padding:0;}
  #wrap-1{
    width:600px;
    margin:20px auto;
  }
  li{list-style:none;}
  a{text-decoration:none;}
  #wrap-1 ul.list p #text-1{        /*两个id,一个class，两个tagname*/
    color:blue;
  }
  #wrap-1 .list #box-1 span{       /* 两个id，一个class，一个tagname*/
    color:red;
    font-size:30px;
  }
  span{color:green;}                 /*一个tagname*/
  </style>
</head>
<body>
  <div class="wrap" id="wrap-1">
    <ul class="list">
      <li id="list-1">
        <p class="box" id="box-1">
          <span class="text" id="text-1">
            多元素组合选择器所影响最内层的文字
          </span>
        </p>
      </li>
    </ul>
  </div>
</body>
</html>

效果图

3.css书写顺序

(1)显示属性：display，list-style，position，float，clear

(2)自身属性:width，height，margin，padding，border，background

(3)字体和文本属性:font，color，text-align，vertical-align，text-indent

(4)css3中新增属性:content,box-shadow,border-radius,transform

超越～and me

关注

11
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
html+css 选择器优先级

(3)字体和文本属性:font，color，text-align，vertical-align，text-indent。(2)自身属性:width，height，margin，padding，border，background。(1)显示属性：display，list-style，position，float，clear。控制对象的精准度>id个数>class个数>tagname个数>后定义覆盖前定义。id>class>tagname(标签选择器)>*(通配符选择器)2.多元素组合选择器的优先级。
复制链接

扫一扫

专栏目录