devbox
小小林熬夜学编程
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

CSS中常见选择器的用法

作者：小小林熬夜学编程 | 2024-03-05 15:23:48

赞

踩

CSS中常见选择器的用法

CSS选择器是CSS的基石，赋予开发者精确控制HTML文档中元素样式的能力。选择器定义了CSS规则集将应用到HTML文档的哪一部分，通过不同类型的选择器，可以根据元素的tag、ID、class、属性、状态等各种条件来应用样式。本文将详细介绍各种CSS选择器并提供示例代码。

类型选择器（标签选择器）

类型选择器，也称为标签选择器，根据HTML元素的名称来选取元素。

  1. /* 所有的段落都会被应用样式 */
  2.  
  3. p {
  4.  
  5.   color: blue;
  6.  
  7. }

id选择器

通过元素的ID属性选择特定的HTML元素。ID在HTML文档中是唯一的。

  1. /* 应用于ID为"header"的元素 */
  2.  
  3. #header {
  4.  
  5.   background-color: navy;
  6.  
  7. }

类选择器

类选择器通过HTML元素的class属性选取元素，一个class可以被多个元素共享。

  1. /* 所有带有"class-name"类的元素 */
  2.  
  3. .class-name {
  4.  
  5.   font-weight: bold;
  6.  
  7. }

后代选择器

后代选择器（也称为上下文选择器）用于选取某个元素的后代元素。

  1. /* 选择<div>内的所有<span> */
  2.  
  3. div span {
  4.  
  5.   color: red;
  6.  
  7. }

子选择器

子选择器仅选择直接子元素。

  1. /* 只选择<div>元素的直接子元素<ul> */
  2.  
  3. div > ul {
  4.  
  5.   list-style-type: none;
  6.  
  7. }

相邻同辈选择器

相邻同辈选择器选取紧随其后的相邻同辈元素。

  1. /* 选择<p>元素之后的第一个<h2>元素 */
  2.  
  3. p + h2 {
  4.  
  5.   margin-top: 0;
  6.  
  7. }

一般同辈选择器

一般同辈选择器用于选取某元素之后的所有具有相同父元素的同辈元素。

  1. /* 选择<h2>元素之后所有兄弟元素<h2> */
  2.  
  3. h2 ~ h2 {
  4.  
  5.   border-top: 1px solid gray;
  6.  
  7. }

通用选择器

通用选择器是一个通配符，匹配文档中的所有元素。

  1. /* 页面中所有元素都将有黄色背景 */
  2.  
  3. * {
  4.  
  5.   background: yellow;
  6.  
  7. }

属性选择器

属性选择器根据元素的属性及其值来选择元素。

  1. /* 选择含有"target"属性的HTML元素 */
  2.  
  3. [target] {
  4.  
  5.   border: 1px solid black;
  6.  
  7. }
  8.  
  9. /* 选择"target"属性等于"_blank"的HTML元素 */
  10.  
  11. [target="_blank"] {
  12.  
  13.   background-color: silver;
  14.  
  15. }

属性选择器与特殊字符

CSS还提供了特定的字符，供属性选择器使用，用于更加细致的条件匹配。

  1. /* 选择具有以"btn-"开头的class属性值的元素 */
  2.  
  3. [class^="btn-"] {
  4.  
  5.   padding: 5px 10px;
  6.  
  7. }
  8.  
  9. /* 选择具有以"-btn"结尾的class属性值的元素 */
  10.  
  11. [class$="-btn"] {
  12.  
  13.   font-weight: bold;
  14.  
  15. }
  16.  
  17. /* 选择class属性值含有"btn-"的任何地方的元素 */
  18.  
  19. [class*="btn-"] {
  20.  
  21.   font-size: 1.2em;
  22.  
  23. }

伪元素选择器

伪元素选择器用于样式化元素的特定部分或生成的内容。

::first-letter 和 ::first-line

  1. p::first-letter {
  2.  
  3.   font-size: 200%;
  4.  
  5.   color: #8A2BE2;
  6.  
  7. }
  8.  
  9. p::first-line {
  10.  
  11.   font-variant: small-caps;
  12.  
  13. }

::before 和 ::after

  1. h1::before {
  2.  
  3.   content: "Welcome ";
  4.  
  5.   color: green;
  6.  
  7. }
  8.  
  9. h1::after {
  10.  
  11.   content: "!";
  12.  
  13.   color: red;
  14.  
  15. }

伪类选择器

伪类选择器用于定义元素的特殊状态。

:link、:visited、:hover、:focus、:active

  1. a:link {
  2.  
  3.   color: #FF0000;
  4.  
  5. }
  6.  
  7. a:visited {
  8.  
  9.   color: #00FF00;
  10.  
  11. }
  12.  
  13. a:hover {
  14.  
  15.   color: #FF00FF;
  16.  
  17. }
  18.  
  19. a:focus {
  20.  
  21.   border: 1px dashed #0000FF;
  22.  
  23. }
  24.  
  25. a:active {
  26.  
  27.   color: #0000FF;
  28.  
  29. }

:target 和 :not()

  1. :target {
  2.  
  3.   background-color: #f9f9f9;
  4.  
  5. }
  6.  
  7. :not(.highlighted) {
  8.  
  9.   background-color: #ffff00;
  10.  
  11. }

结构化伪类选择器

结构化伪类选择器允许基于文档结构选择元素。

:nth-child 和 :nth-last-child

  1. li:nth-child(odd) {
  2.  
  3.   color: red;
  4.  
  5. }
  6.  
  7. li:nth-child(even) {
  8.  
  9.   color: blue;
  10.  
  11. }
  12.  
  13. /* 从末尾开始的第二个子元素 */
  14.  
  15. li:nth-last-child(2) {
  16.  
  17.   font-size: 1.5em;
  18.  
  19. }

:nth-of-type 和 :nth-last-of-type

  1. /* 选择第一个<p>类型的元素 */
  2.  
  3. p:nth-of-type(1) {
  4.  
  5.   font-weight: bold;
  6.  
  7. }
  8.  
  9. /* 选择倒数第二个<p>类型的元素 */
  10.  
  11. p:nth-last-of-type(2) {
  12.  
  13.   background-color: lightgray;
  14.  
  15. }

伪类表单选择器

CSS为表单提供了一组伪类选择器，用于根据不同的状态来设置样式。

:required、:valid、:invalid、:optional、:in-range 和 :out-of-range

  1. input:required {
  2.  
  3.   border: 1px solid red;
  4.  
  5. }
  6.  
  7. input:valid {
  8.  
  9.   border: 1px solid green;
  10.  
  11. }
  12.  
  13. input:invalid {
  14.  
  15.   background-color: #ffdddd;
  16.  
  17. }
  18.  
  19. input:optional {
  20.  
  21.   opacity: 0.75;
  22.  
  23. }
  24.  
  25. input:in-range {
  26.  
  27.   border-color: blue;
  28.  
  29. }
  30.  
  31. input:out-of-range {
  32.  
  33.   border-color: orange;
  34.  
  35. }

:read-only 和 :read-write

  1. input:read-only {
  2.  
  3.   background-color: #eeeeee;
  4.  
  5. }
  6.  
  7. input:read-write {
  8.  
  9.   background-color: #fff;
  10.  
  11. }

通过精确选择元素，CSS选择器几乎可以无限制地控制页面样式。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小小林熬夜学编程/article/detail/191998
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号