简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 选择器权重和伪类选择器
Blogger Information
Blog 28
fans 0
comment 1
visits 13110
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
选择器权重和伪类选择器
centos
Original
563 people have browsed it

选择器权重和伪类选择器

选择器有id class tag 三种

id代表千位
class代表百位
tag代表个位
其中!improtant是最高级别，忽略权重
下面演示权重递归
为了方便演示，代码顺序采用倒序，以免同位选择器因为读写顺序产生歧义

  • html部分
    1. <!DOCTYPE html>
    2. <html lang="en">
    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.   <link rel="stylesheet" tyep="text/css" href="0321.css" />
    9. </head>
    10. <body>
    11.   <ul class="item" id="title">
    12.     <li>列表1</li>
    13.     <li>列表2</li>
    14.     <li>列表3</li>
    15.     <li>列表4</li>
    16.     <li>列表5</li>
    17.     <li>列表6</li>
    18.     <li>列表7</li>
    19.     <li>列表8</li>
    20.     <li>列表9</li>
    21.     <li>列表10</li>
    22.     <li>列表11</li>
    23.     <li>列表12</li>
    24.     <li>列表13</li>
    25.   </ul>
    26. </body>
    27. </html>
  • css部分
  1. /* 添加一个id */
  2. #title li {
  3.   background-color: brown;
  4. }
  5. /* 添加class */
  6. .item li {
  7.   background-color: blueviolet;
  8. }
  9. /* 两个标签 */
  10. ul li {
  11.   background-color: bisque;
  12. }
  13. /* 一个标签 */
  14. li {
  15.   border: 1px solid;
  16.   background-color: aquamarine;
  17. }




伪类选择器

伪类选择器以’：’开头，常用的有first-child last-child nth-of-type(n+b) nth-first-of-type last-of-type 奇数odd 偶数even 等组合
以下是演示css

  1. li {
  2.   border: 1px solid;
  3. }
  4. /* 选择第一个 */
  5. ul > li:first-child {
  6.   background-color: aquamarine;
  7. }
  8. /* 选择最后一个 */
  9. ul > li:last-child {
  10.   background-color: brown;
  11. }
  12. /* 选择第三个 */
  13. ul > li:nth-of-type(3) {
  14.   background-color: bisque;
  15. }
  16. /* 选择倒数第三个 */
  17. ul > li:nth-last-of-type(3) {
  18.   background-color: bisque;
  19. }
  20. /* 前三个 */
  21. ul > li:nth-of-type(-n + 3) {
  22.   background-color: red;
  23. }
  24. /* 最后三个 */
  25. ul > li:nth-last-of-type(-n + 3) {
  26.   background-color: blue;
  27. }
  28. /* 奇数行 */
  29. ul > li:nth-last-of-type(odd) {
  30.   background-color: blueviolet;
  31. }
  32. /* 偶数行 */
  33. ul > li:nth-last-of-type(even) {
  34.   background-color: gray;
  35. }
Correcting teacher：PHPzPHPz

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
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！