简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > CSS选择器的学习与应用
Blogger Information
Blog 16
fans 2
comment 0
visits 19888
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
623 people have browsed it

CSS选择器根据其特征可以大致分为以下几类：

  • 简单选择器
  • 上下文选择器
  • 结构伪类选择器
  • 伪类选择器
  • 伪元素选择器
1.简单选择器

  • 元素选择器（标签选择器），用HTML标签名称作为选择器
    示例如下：

    1. <! DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8" />
    5.   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    6.   <title>简单选择器</title>
    7.   <style>
    8.     p {
    9.       color: blue;
    10.     }
    11.     div {
    12.       color: red;
    13.     }
    14.   </style>
    15. </head>
    16. <body>
    17.   <p>男</p>
    18.   <p>男</p>
    19.   <p>男</p>
    20.   <div>女</div>
    21.   <div>女</div>
    22.   <div>女</div>
    23. </body>
    24. </html>

  • 类选择器：用 “Class” 作为选择器
    示例如下：

    1. <! DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8" />
    5.   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    6.   <title>Document</title>
    7.   <style>
    8.     .red {
    9.       color: red;
    10.     }
    11.     .yellow {
    12.       color: yellow;
    13.     }
    14.   </style>
    15. </head>
    16. <body>
    17.   <ul>
    18.     <li class="red">苹果</li>
    19.     <li class="yellow">香蕉</li>
    20.     <li class="yellow">芒果</li>
    21.     <li class="red">草莓</li>
    22.   </ul>
    23. </body>
    24. </html>

  • 多类选择器：一个class中可能包含两个词列表，用空格进行隔开，同时表示2种样式。
    示例如下：

    1. <! DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8" />
    5.   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    6.   <title>Document</title>
    7.   <style>
    8.     .red {
    9.       color: red;
    10.     }
    11.     .yellow {
    12.       color: yellow;
    13.     }
    14.     .red.big {
    15.       color: red;
    16.       font-size: 30px;
    17.     }
    18.   </style>
    19. </head>
    20. <body>
    21.   <ul>
    22.     <li class="red">苹果</li>
    23.     <li class="yellow">香蕉</li>
    24.     <li class="yellow">芒果</li>
    25.     <li class="red">草莓</li>
    26.     <li class="red big">大苹果</li>
    27.   </ul>
    28. </body>
    29. </html>

  • id选择器：用 “#Id”作为选择器示例如下：

    1. <! DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8" />
    5.   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    6.   <title>class选择器</title>
    7.   <style>
    8.     #yellow {
    9.       color: yellow;
    10.     }
    11.     #cyan {
    12.       color: cyan;
    13.     }
    14.   </style>
    15. </head>
    16. <body>
    17.   <ul>
    18.     <li>苹果</li>
    19.     <li id="cyan">青苹果</li>
    20.     <li id="yellow">香蕉</li>
    21.   </ul>
    22. </body>
    23. </html>

    2.上下文选择器

  • 后代选择器：可以选择作为某元素后代的元素，示例如下：

    1. <! DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8" />
    5.   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    6.   <title>四代同堂</title>
    7.   <style>
    8.     .family div {
    9.       color: red;
    10.       font-size: 30px;
    11.     }
    12.   </style>
    13. </head>
    14. <body>
    15.   <div class="family">
    16.     <div>
    17.       小明的爷爷
    18.       <div>
    19.         小明的爸爸
    20.         <div>
    21.           小明
    22.           <div>
    23.             小明的儿子
    24.           </div>
    25.         </div>
    26.       </div>
    27.     </div>
    28.   </div>
    29. </body>
    30. </html>

  • 父子选择器：子元素选择器 示例如下：

  1. <! DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>子元素选择器</title>
  7.     <style>
  8.       .man > a {
  9.         color: red;
  10.       }
  11.     </style>
  12.   </head>
  13.   <body>
  14.     <div class="man">
  15.       <a href="#">小明的爷爷</a>
  16.       <p>
  17.         <a href="#">小明的爸爸</a>
  18.       </p>
  19.     </div>
  20.   </body>
  21. </html>

  • 同级相邻选择器:如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器,示例如下：
    1. <! DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8" />
    5.   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    6.   <title>同级选择器</title>
    7.   <style>
    8.     .nav > p + div {
    9.       background-color: sandybrown;
    10.       font-size: 20px;
    11.     }
    12.   </style>
    13. </head>
    14. <body>
    15.   <div class="nav">
    16.     <p>我是一个段落</p>
    17.     <div>
    18.       <p>我也是一个段落</p>
    19.     </div>
    20.     <div>
    21.       <p>我还是一个段落</p>
    22.     </div>
    23.   </div>
    24. </body>
    25. </html>
  • 同级所有选择器：选择指定元素之后的所有元素 示例如下：
    1. <! DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8" />
    5.   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    6.   <title>同级所有选择器</title>
    7.   <style>
    8.     .item.center ~ .item {
    9.       background-color: red;
    10.     }
    11.   </style>
    12. </head>
    13. <body>
    14.   <div>
    15.     <div class="item">1</div>
    16.     <div class="item">2</div>
    17.     <div class="item">3</div>
    18.     <div class="item">4</div>
    19.     <div class="item center">5</div>
    20.     <div class="item">6</div>
    21.     <div class="item">7</div>
    22.     <div class="item">8</div>
    23.     <div class="item">9</div>
    24.   </div>
    25. </body>
    26. </html>

3.结构伪类选择器

  • :first-child 选择第一个元素，示例如下：

    1. <! DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8" />
    5.   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    6.   <title>结构伪类</title>
    7.   <style>
    8.     .calabash > div:first-child {
    9.       background-color: red;
    10.     }
    11.   </style>
    12. </head>
    14. <body>
    15.   <div class="calabash">
    16.     <div>我是大娃</div>
    17.     <div>我是二娃</div>
    18.     <div>我是三娃</div>
    19.     <div>我是四娃</div>
    20.     <div>我是五娃</div>
    21.     <div>我是六娃</div>
    22.     <div>我是七娃</div>
    23.   </div>
    24. </body>
    25. </html>

  • :nth-child(n) 索引是从1开始，取第n个元素：示例如下

    1. <! DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8" />
    5.   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    6.   <title>结构伪类</title>
    7.   <style>
    8.     .calabash > div::nth-child(7) {
    9.       background-color: violet;
    10.     }
    11.   </style>
    12. </head>
    14. <body>
    15.   <div class="calabash">
    16.     <div>我是大娃</div>
    17.     <div>我是二娃</div>
    18.     <div>我是三娃</div>
    19.     <div>我是四娃</div>
    20.     <div>我是五娃</div>
    21.     <div>我是六娃</div>
    22.     <div>我是七娃</div>
    23.   </div>
    24. </body>
    25. </html>

  • :nth-child(n) 索引是从1开始，取第n个元素
  • :nth-child(2n) 索引是从1开始，表示偶数单元格
  • :nth-child(even)也可以用偶数关键字来表示
  • :nth-child(2n-1) 索引是从0开始，表示奇数数单元格
  • :nth-child(odd)也可以用奇数关键字来表示
  • :nth-child(n+m) 索引是从0开始，取索引为m的元素开始剩下所有元素
  • :nth-child(-n+m) 索引从0开始，取索引为m的元素开始往前面的所有元素

  • :nth-last-child(n) 索引从1开始 ，取倒数第n个子元素
    示例如下：

    1. <!   DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8" />
    5.   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    6.   <title>结构伪类</title>
    7.   <style>
    8.     /* 让索引1的子元素字体设置为40px */
    9.     .calabash > :nth-child(1) {
    10.       font-size: 40px;
    11.     }
    12.     /* 取偶数增加蓝色边框 */
    13.     .calabash > :nth-child(even) {
    14.       border: 3px solid blue;
    15.     }
    16.     /* 取奇数增加红色边框 */
    17.     .calabash > :nth-child(odd) {
    18.       border: 3px solid red;
    19.     }
    20.     /* 索引为5开始到后面所有元素宽为200px */
    21.     .calabash > :nth-child(n + 5) {
    22.       width: 200px;
    23.     }
    24.     /* 索引为4开始往前的所有元素高度为40px */
    25.     .calabash > :nth-child(-n + 4) {
    26.       height: 40px;
    27.     }
    28.     /* 索引为倒数第二个背景色为蓝色 */
    29.     .calabash > :nth-last-child(2) {
    30.       background-color: blue;
    31.     }
    32.   </style>
    33. </head>
    35. <body>
    36.   <div class="calabash">
    37.     <div>我是大娃</div>
    38.     <div>我是二娃</div>
    39.     <div>我是三娃</div>
    40.     <div>我是四娃</div>
    41.     <div>我是五娃</div>
    42.     <div>我是六娃</div>
    43.     <div>我是七娃</div>
    44.   </div>
    45. </body>
    46. </html>

4.伪类与伪元素

  • :target:必须与id配合，实现锚点操作
  • :focus:当获取焦点的时候
  • ::selection:一般用于设置选择文本的前景色和背景色
  • :not():用于选择不满足条件的元素
  • ::before:在元素前面加上什么内容，多与content一起使用

  • ::after:在元素后面加上什么内容，多与content一起使用
    示例如下：

    1. <! DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8">
    5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.   <title>伪类与伪元素</title>
    7.   <style>
    8.       /* 隐藏登录框 */
    9.       #login-form {
    10.           display: noe;
    11.       }
    12.       /* 激活登录框 */
    13.       #login-form:target {
    14.           display: block;
    15.       }
    16.       /* 鼠标焦点在输入框时增加背景色 */
    17.       input:focus {
    18.           background-color: pink;
    19.       }
    20.       /* 设置选中问的前景色和背景色 */
    21.       input::selection {
    22.           color: white;
    23.           background-color: skyblue;
    24.       }
    25.       /* 除了列表倒数第一都为红色 */
    26.       .list > :not(:nth-last-of-type(1)) {
    27.           color: red;
    28.       }
    29.       /* 列表前面加内容 */
    30.       .list::before {
    31.           content:"我的购物车";
    32.           color: blue;
    33.           font-size: 2rem;
    34.           border: 1px solid #000;   
    35.       }
    36.       /* 列表后面加内容 */
    37.       .list::after {
    38.           content: "结算中...";
    39.           color: coral;
    40.           font-size: 1.5rem;
    41.       }
    43.   </style>
    44. </head>
    45. <body>
    46.       <!-- <a href="#login-form">我要登录:</a> -->
    47.       <button onclick="location='#login-form'">点击登录</button>
    48.       <form action="" method="post" id="login-form">
    49.         <label for="email">用户名:</label>
    50.         <input type="email" name="email" id="email" />
    51.         <label for="password">密码:</label>
    52.         <input type="password" name="password" id="password" />
    53.         <button>登录</button>
    54.       </form>
    55.       <hr />
    56.       <ul class="list">
    57.         <li>华为手机</li>
    58.         <li>小米手机</li>
    59.         <li>锤子手机</li>
    60.         <li>苹果手机</li>
    61. </body>
    62. </html>

总结：CSS选择器的内容还是比较多的，花了很久才能写出来。以后还要多敲多看多熟悉！

Correcting teacher：WJWJ

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！