Community Learn Tools Library Leisure
search
English
Home > List of blog posts > css选择器的优先级解释以及结构伪类的用法
Blogger Information
Blog 3
fans 0
comment 0
visits 1687
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
527 people have browsed it

一、css选择器的优先级解释

排序规则：!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

  1. <html lang="zh-CN">
  2.   <head>
  3.     <meta charset="UTF-8" />
  4.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>Document</title>
  7.     <!-- 内部样式,仅作用于当前的html文档 -->
  8.     <style>
  9.       h1,
  10.       h2,
  11.       h3,
  12.       h4,
  13.        {
  14.         font-size: 2em;
  15.       }
  16.       /* 语法 : 选择器 {
  17.             声明,有二部分
  18.             属性: 值,多个声明之间用分号隔开
  19.         } */
  21.       /* 选择器 + 声明块 = 样式规则 */
  23.       h1 {
  24.         color: #990091;
  25.         /* !important 级别最高的,不建议用,适用于调试 */
  26.         color: #ff0 !important;
  27.       }
  29.       html body h3.active {
  30.         color: #900;
  31.       }
  33.       html body h4#first {
  34.         color: #22e932;
  35.       }
  36.     </style>
  37.   </head>
  38.   <body>
  39.     <!-- 行内样式,仅适用于当前元素,优先级要高于style标签设置的内部样式 -->
  40.     <h1 style="color: #3c6">这个是h1!important样式</h1>
  41.     <h2 style="color: #e90d94">这个是h2标签样式</h2>
  42.     <h3 class="active">类样式</h3>
  43.     <h4 class="active" id="first">这个是id签样式</h4>
  44.   </body>
  45. </html>

引用样式方法

  1. 1、引用样式方法一
  2.       @import url(style.css);
  3. 2、引用样式方法二
  4.      <link rel="stylesheet" href="style.css" />
  5. 3、属性选择器
  6.      - li[class="on"] = li.on
  7.      - li[id="foo"] = li#foo
  8. 4、-后代选择器  ul li
  9.    -只选中子元素,忽略孙元素body > ul > li 
  10.    -同级相邻 .start + li 
  11.    -同级所有兄弟 .start ~ li

结构伪类

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>伪类</title>
  8.     <style>
  9.       /* 结构伪类: 选择子元素, 要有一个父元素做为查询起点 */
  10.       /* .list > :nth-child(3) {
  11.         background-color: violet;
  12.       } */
  13.       /* 匹配任何位置的元素
  14.       n = (0,1,2,3,4....) */
  15.       /* .list > li:nth-child(0n + 3) {
  16.         background-color: violet;
  17.       } */
  19.       /* 分组伪类结构选择器,推荐使用 */
  20.       .list > li:nth-of-type(3) {
  21.         background-color: #ff4800;
  22.       }
  24.       /* 选择中第一个p  */
  25.       .list > p:nth-of-type(1) {
  26.         background-color: #0dec0d;
  27.       }
  29.       .list > li:nth-of-type(1) {
  30.         background-color: #0db1f1;
  31.       }
  32.       /* 最后一个li  */
  33.       .list > li:nth-of-type(7) {
  34.         background-color: #800035;
  35.       }
  37.       /* 最后一个p  */
  38.       .list > p:nth-of-type(3) {
  39.         background-color: #630cee;
  40.       }
  42.       .list p:last-of-type {
  43.         background-color: blue;
  44.       }
  46.       .list p:first-of-type {
  47.         background-color: red;
  48.       }
  50.       /* 选择倒数第三个li  */
  51.       .list > li:nth-last-of-type(3) {
  52.         background-color: yellow;
  53.       }
  55.       ul li:only-of-type {
  56.         background-color: yellow;
  57.       }
  59.       /* 选择任何一个: :nth-of-type(n)
  60.       选择第一个: :first-of-type
  61.       选择最后一个: :last-of-type
  62.       选择倒数某一个: :nth-last-of-type()
  63.       唯一子元素的元素: :only-of-type */
  64.     </style>
  65.   </head>
  66.   <body>
  67.     <ul class="list">
  68.       <li>参数1</li>
  69.       <li>参数</li>
  70.       <li>参数</li>
  71.       <li>参数4</li>
  72.       <li>参数5</li>
  73.       <li>参数6</li>
  74.       <p>参数7</p>
  75.       <p>参数8</p>
  76.       <li>参数9</li>
  77.       <p>参数0</p>
  78.     </ul>
  80.     <ul>
  81.       <li>参数</li>
  82.     </ul>
  83.   </body>
  84. </html>
Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：
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