Community Learn Tools Library Leisure
search
English
Home > List of blog posts > CSS:基本选择器、层级选择器、选择器权重优先级
Blogger Information
Blog 56
fans 0
comment 4
visits 37926
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
CSS:基本选择器、层级选择器、选择器权重优先级
异乡客
Original
460 people have browsed it
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8" />
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  8.     <title>选择器1：基本选择器</title>
  9. </head>
  11. <body>
  12.     <h2>itme1</h2>
  13.     <h2 title="hello">itme2</h2>
  14.     <h2 id="a">item3</h2>
  15.     <h2 id="a">item4</h2>
  16.     <h2 class="b">item5</h2>
  17.     <h2 class="b">item6</h2>
  19.     <style>
  20.         /* 基本选择器：根据元素自身特点来选择 */
  21.         /* 1.标签选择器 */
  23.         h2 {
  24.             color: red;
  25.         }
  26.         /* 2.属性选择器 */
  28.         h2[title="hello"] {
  29.             color: green;
  30.         }
  31.         /* 3.id选择器，用于唯一元素，id唯一性由程序员控制，浏览器不检查 */
  33.         h2[id="a"] {
  34.             color: blue;
  35.         }
  36.         /* 4.class类选择器 ，用于多个元素*/
  38.         h2[class="b"] {
  39.             color: violet;
  40.         }
  41.         /* id ,class是高频属性 */
  43.         h2#a,
  44.         h2.b {
  45.             /* color: orange; */
  46.             background-color: yellow;
  47.         }
  48.         /* 层叠样式表，后面的覆盖前面的 */
  49.         /* 通配符，选择下面所有的元素 */
  51.         html body * {
  52.             background-color: gray;
  53.             /* background-color: gray !important; */
  54.             /* !important;//提权到100%，优先级别最高 */
  55.         }
  56.         /* 上下文选择器 */
  57.     </style>
  58. </body>
  60. </html>

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8" />
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  8.     <title>选择器2：层级选择器/上下文选择器</title>
  9. </head>
  11. <body>
  12.     <!-- ul.list>li.item*8{itme$} -->
  13.     <ul class="list">
  14.         <li class="item">itme1</li>
  15.         <li class="item second">itme2</li>
  16.         <li class="item">
  17.             itme3
  18.             <!-- ul.inner>li*3{item3_$} -->
  19.             <ul class="inner">
  20.                 <li>item3_1</li>
  21.                 <li>item3_2</li>
  22.                 <li>item3_3</li>
  23.             </ul>
  24.         </li>
  25.         <li class="item">itme4</li>
  26.         <li class="item">itme5</li>
  27.         <li class="item">itme6</li>
  28.         <li class="item">itme7</li>
  29.         <li class="item">itme8</li>
  30.     </ul>
  32.     <style>
  33.         /* 1.子元素 */
  35.         .list>li {
  36.             border: 1px solid #000;
  37.         }
  38.         /* 2.后代，选择所有的后代，不加>  空格即可 */
  40.         .list li {
  41.             border: 1px solid rgb(248, 26, 26);
  42.         }
  43.         /* 3.相邻关系，相邻兄弟+ */
  45.         .item.second+* {
  46.             background-color: gray;
  47.         }
  48.         /* 4.选择所有兄弟，后面的 */
  50.         .item.second~* {
  51.             background-color: rgb(223, 26, 26);
  52.         }
  53.     </style>
  54. </body>
  56. </html>

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8" />
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  8.     <title>3.选择器的权重/优先级（重点）</title>
  9. </head>
  11. <body>
  12.     <h1 class="title" id="active">Hello</h1>
  13.     <style>
  14.         body h1.title#active {
  15.             /* 1 1 2 */
  16.             color: red;
  17.         }
  19.         body h1.title {
  20.             /* 0 1 2 */
  21.             color: greenyellow;
  22.         }
  24.         body h1 {
  25.             /* 0 0 2 */
  26.             /* body加上后，权重变为0 0 2 */
  27.             color: darkorange;
  28.         }
  30.         h1 {
  31.             /* 0 0 1 */
  32.             color: green;
  33.             /* 后面的覆盖前面的 ，如果要前面的生效，则要提权*/
  34.         }
  35.         /* 规则
  37.         第一位：标签数量 个位
  38.         第二位：class数量 十位
  39.         第三位：id数量 百位 
  40.         id不推荐使用，因为权重太高了，为了让代码具有弹性，尽量使用class
  41.         为什么不使用最低权重的标签呢，因为标签数量太少了，而class可以任意命名。
  43.         */
  44.         /* h1 {
  45.             color: violet !important;
  46.         } */
  47.         /* bootsrap ,element ui这些都不能改，因为升级会覆盖 */
  48.     </style>
  50.     <div class="col-md-3 vip">Bootstrap</div>
  51.     <style>
  52.         div.col-md-3.vip {
  53.             border: 6px solid rgb(241, 14, 60);
  54.         }
  56.         div.col-md-3 {
  57.             border: 1px solid #002;
  58.         }
  59.     </style>
  60. </body>
  62. </html>

Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post