简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > css选择器/伪类/伪元素介绍
Blogger Information
Blog 17
fans 1
comment 0
visits 14615
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
890 people have browsed it

基本选择器

标签(元素)选择器 用标签名定义
类(class)选择器 用”.”表示
id选择器 用”#”表示
后代选择器 用空格
子选择器 用>表示
兄弟相邻选择器 用+或者~表示
下面是+~的解释
+ 只能选择紧挨着的下一个兄弟元素
~ 选择剩下所有的兄弟元素
  • 用九宫格来演示
    1. <body>
    2.   <div class="container">
    3.     <div class="item" id="first">1</div>
    4.     <div class="item">2</div>
    5.     <div class="item">3</div>
    6.     <div class="item">4</div>
    7.     <div class="item center">5</div>
    8.     <div class="item">6</div>
    9.     <div class="item">7</div>
    10.     <div class="item">8</div>
    11.     <div class="item">9</div>
    12.   </div>
    13. </body>
  1. <style>
  2. /*元素/标签选择器 直接用元素/标签名来表示*/
  3. body {
  4.         background-color: coral;
  5.       }
  6. /* 类选择器：对应着html标签中的class属性 用.来表示*/
  7. .item {
  8.         border: 2px solid #000;
  9.       }
  10. /* id选择器 用#id名表示*/
  11. #first {
  12.         background-color: green;
  13.       }
  14. </style>

  1. <style>
  2. body {
  3.         background-color: coral;
  4.       }
  5. .container {
  6.         background-color: crimson;
  7.       }
  8. /* 层叠样式表，相同元素后面追加的样式会覆盖前面的样式，所以1号格子变黄 */
  9. #first {
  10.         background-color: green;
  11.       }
  12. #first {
  13.         background-color: yellow;
  14.       }
  15. /* 前面有类样式的id选择器优先级 > 没有限定的id样式 1
  16.         没有限定的id样式前面默认是个*号可以省略不写
  17.         而*号属于元素级别。也就是id>clss > 标签(元素)
  18. 也就是1号格子先黄色在灰色最后紫色*/
  19. .item#first {
  20.         background-color: gray;
  21.       }
  22. #first.item {
  23.         background-color: rebeccapurple;
  24.       }
  25. /* 多个类复合应用用".类名.类名" ..中间不能用空格*/
  26. .item.center {
  27.         background-color: lightgreen;
  28.       }
  30. </style>

后代选择器 （用于选择指定标签元素下的后辈元素）

  1.     <style>
  2.       /* 后代选择器 给body下面的所有的div都会添加下边框*/
  3.       body div {
  4.         border-bottom: 2px solid red;
  5.       }
  6.       }
  7.     </style>
  8.   </head>
  9.   <body>
  10.     <div class="container">
  11.       <div class="item"">1</div>
  12.       <div class="item">2</div>
  13.       <div class="item">3</div>
  14.       <div class="item">4</div>
  15.       <div class="item center">5</div>
  16.       <div class="item">6</div>
  17.       <div class="item">7</div>
  18.       <div class="item">8</div>
  19.       <div class="item">9</div>
  20.     </div>
  21.   </body>

子选择器(父代选择器)（选择指定标签元素的第一代子元素）

  1. /* 子选择器(父代选择器)
  2.       只会给body的儿子container这个div添加边框
  3.       而孙子辈.item则没有任何样式 */
  4. body > div
  5.           border: 5px solid yellowgreen;
  6.       }

兄弟选择器 (+)

  1. /* 同级相邻 用+号选择五号单元格旁边的6号 */
  2.       .item.center + .item {
  3.         background-color: hotpink;
  4.       }

兄弟选择器（~）

  1. /* 同级所有用~号选择5号单元格后面所有的单元格 */
  2.       .item.center ~ .item {
  3.         background-color: brown;
  4.       }

结构伪类选择器(不分组不区分元素类型)

选择器 功能描述
:first-child 选择父元素的第一个子元素
:last-child 选择父元素的倒数第一个子元素
:nth-child(n) 选择父元素的第n个子元素,n从1开始计算
:nth-last-child(n) 选择父元素的倒数第n个子元素n从1开始计算
  • 结构伪类选择器很容易遭到误解，需要特别强调。如，p:first-child表示选择父元素下的第一个子元素 p，而不是选择 p 元素的第一个子元素。
    1. /* 选择第一个 */
    2.     .container > :first-child {
    3.       background-color: yellowgreen;
    4.     }
    5. /* 选择最后一个 */
    6.     .container > :last-child {
    7.       background-color: yellowgreen;
    8.     }
    9. /* 选择第七个 */
    10.     .container > :nth-child(7) {
    11.       background-color: green;
    12.     }
    13. /* 选择倒数第二个 */
    14.     .container > :nth-last-child(2) {
    15.       background-color: red;
    16.     }
  1. /* 选择偶数用深蓝色 */
  2.       .container > :nth-child(even) {
  3.         background-color: blue;
  4.       }
  5. /* 选择奇数用橙色 */
  6.       .container > :nth-child(odd) {
  7.         background-color: coral;
  8.       }

  1.  /* 从指定位置开始，选择剩下的所有,n+3代表从第三个开始
  2.         (n出现在表达中从0开始计算)*/
  3.       .container > .item:nth-child(n + 3) {
  4.         background-color: gold;
  5.       }
  6.  /* 只取前三个 */
  7.       .container > .item:nth-child(-n + 3) {
  8.         background-color: gray;
  9.       }
  10. /* 只取后两个 */
  11.       .container > .item:nth-last-child(-n + 2) {
  12.         background-color: gray;
  13.       }

结构伪类选择器(分组)

选择器 功能描述
:last-of-type 用作选择同种标签的倒数第一个元素
:nth-of-type(3) 匹配同类型中的第n个同级兄弟元素 
  1. /* 分组结构伪类分两步
  2.    第一元素按照类型分组
  3.    在分组中根据索引尽心选择 
  4.    选择倒数第一个div所以三号单元格变绿*/
  5.   .container div:last-of-type {
  6.         background-color: lawngreen;
  7.       }
  8.       /* 在分组中匹配任何一个
  9. span:nth-of-type(3)选span类型中的第三个，六号单元格变红*/
  10.       .container span:nth-of-type(3) {
  11.         background-color: red;
  12.       }
  13.       /* 分组中匹配前两个个 */
  14.       .container div:nth-of-type(-n + 2) {
  15.         background-color: red;
  16.       }
  17.       /* 分组中最后两个 */
  18.       .container span:nth-last-of-type(-n + 2) {
  19.         background-color: blue;
  20.       }
  22. <body>
  23.     <div class="container">
  24.       <div class="item">1</div>
  25.       <div class="item">2</div>
  26.       <div class="item">3</div>
  27.       <span class="item">4</span>
  28.       <span class="item">5</span>
  29.       <span class="item">6</span>
  30.       <span class="item">7</span>
  31.       <span class="item">8</span>
  32.       <span class="item">9</span>
  33.     </div>
  34.   </body>

伪类(前面：)与伪元素(前面：：)

伪类 伪元素 作用
:target ：target必须和id配合实现锚点操作
:focus :focus 当获取焦点的时候
:not() 用于选择不满足条件的元素
::selection 只用于设置选中文本时候的前景色与背景色
::before 在什么什么之前生成，无法被鼠标选中
::after 在什么什么之后生成，无法被鼠标选中 
  1. <style>
  2.       #login-form {
  3.         display: none;
  4.       }
  5.       /* 当前#login-form的表单元素被a的锚点激活的时候执行 */
  6.       #login-form:target {
  7.         display: block;
  8.       }
  9.       /* :focus 当获取焦点的时候 */
  10.       input:focus {
  11.         background-color: aqua;
  12.       }
  13.       /* ::selection 设置选中文本时候的前景色与背景色 */
  14.       input::selection {
  15.         color: coral;
  16.         background-color: rebeccapurple;
  17.       }
  18.       /* :not() 用于选择不满足条件的元素 */
  19.       .list > :not(:nth-of-type(3)) {
  20.         color: green;
  21.       }
  22.       /* ::before 在list之前生成购物车 */
  23.       .list::before {
  24.         content: "购物车";
  25.         color: greenyellow;
  26.         font-size: 1.5rem;
  27.         border-bottom: 2px solid #000;
  28.       }
  29.       /* ::after 在list之后生成结算中... */
  30.       .list::after {
  31.         content: "结算中...";
  32.         color: brown;
  33.         font-size: 1.2rem;
  34.       }
  35.     </style>
  36.   </head>
  37.   <body>
  38.     <!-- <a href="#login-form">我要登录</a> -->
  39.     <button onclick="location='#login-form'">登录</button>
  40.     <form action="" method="post" id="login-form">
  41.       <label for="email">邮箱:</label>
  42.       <input type="email" name="email" id="email" />
  43.       <label for="password">密码:</label>
  44.       <input type="password" name="password" id="password" />
  45.       <button>登录</button>
  46.     </form>
  47.     <hr />
  48.     <ul class="list">
  49.       <li>item1</li>
  50.       <li>item2</li>
  51.       <li>item3</li>
  52.       <li>item4</li>
  53.     </ul>
  54.   </body>

-总结：
对于css选择器，有了全新理解。但是不是很熟练，需要加强练习。

  • 疑问：
    :nth-last-child(-n + 2)——-（）中代表表达式，当代表表达式时n从0开始计算
    :nthchild(n)——（）中的n现在代表子元素，从1开始计数
    这么想对不对
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！