CSS2基础笔记（2）---- CSS选择器

原创已于 2023-04-25 22:36:47 修改 · 561 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css #笔记 #html #前端 #vscode

于 2023-04-23 23:47:10 首次发布

前端专栏收录该内容

14 篇文章

订阅专栏

本文详细介绍了CSS选择器的各种类型，包括基本选择器（通配、元素、类、ID），组合选择器（交集、并集、后代、子代、兄弟），以及属性选择器、伪类和伪元素选择器的应用，如动态伪类、结构伪类、否定伪类等，帮助读者全面理解CSS选择器的用法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、CSS选择器

1.CSS基本选择器（参考CSS2基础笔记（1））

1.1通配选择器

1.2元素选择器

1.3类选择器

1.4ID选择器

2.CSS组合选择器

2.1交集选择器

作用：选中同时符合多个条件的元素，交集有“并且”的含义。
语法：选择器1选择器2选择器3…选择器n {}

举例：

/* 常用，类名为beauty的p元素。有标签名的时候，标签名写在前面。 */
    p.beauty {
        color: green;
    }
/* 不常用，类名包含rich和beauty的元素 */
   .rich.beauty {
        color: orange;
    }

2.2并集选择器

作用：选中多个选择器对应的元素，并集有“或者”的意思。
语法：选择器1, 选择器2, 选择器3, …选择器n {}

举例：

/* 选中为id为suxi，或类名为rich,或类名为beauty的元素 */
	#suxi,
    .rich ,
    .beauty {
        font-size: 40px;
        background-color: gray;
        width: 180px;
    }

2.3后代选择器

作用：选中指定元素中，符合要求的后代元素。
语法：选择器1 选择器2 选择器3 … 选择器n {}

选择器之间用空格隔开。

举例：

  /* 选中ul中的所有li，用空格隔开 */
  ul li {
       color: red;
   }
  /* 选中ul中的所有li中的a，用空格隔开 */
  ul li a {
       color: orange;
   }
  /* 选中类名为subject元素中的所有类名为front-end的li */
 .subject li.front-end {
      color: blue;
  }
  /* 选中类名为subject元素中的所有li */
  .subject li {
      color: chocolate;
  }

2.4子代选择器

作用：选中指定元素中，符合要求的子元素（儿子元素）。
语法：选择器1 > 选择器2 > 选择器3 > … 选择器n {}

举例：

	/* div中的子代a元素 */
	div > a {
        color: red;
    }
    /* div中的子代p元素中的子代a元素 */
    div > p > a {
        color: skyblue;
    }
    /* 类名为foot的元素中的子代a元素 */
    .foot > a {
        color: chocolate;
    }

2.5兄弟选择器

2.5.1 相邻兄弟选择器

作用：选中指定元素后，符合条件的相邻兄弟元素。
语法：选择器1+选择器2 {}

举例：

   /* 选中div后紧紧相邻的兄弟p元素---相邻兄弟选择器 */
   div+p {
       color: red;
   }

2.5.2 通用兄弟选择器

作用：选中指定元素后，符合条件的所有兄弟元素。
语法：选择器1~选择器2 {}

举例：

   /* 选中div后所有的兄弟p元素---通用兄弟选择器 */
   div~p {
       color: red;
   }

2.6属性选择器

作用：选中属性值符合一定要求的元素。
语法：

语法	作用
[属性名]	选中具有某个属性的元素
[属性名=“值”]	选中包含某个属性，且属性值等于指定值的元素
[属性名^=“值”]	选中包含某个属性，且属性值以指定的值开头的元素
[属性名$=“值”]	选中包含某个属性，且属性值以指定的值结尾的元素
[属性名*=“值”]	选择包含某个属性，属性值包含指定值的元素

举例：

    /* 第一种写法：选中具有title属性的元素 */
    [title] {
       color: red;
    } 

    /* 第二种写法：选中具有title属性,且属性值为sweets2的元素 */
   [title="sweets2"] {
        color: red;
    } 

    /* 第三种写法：选中具有title属性,且属性值以字母s开头的元素*/
     [title^="s"] {
        color: red;
    }

    /* 第四种写法：选中具有title属性,且属性值以字母s结尾的元素*/
    [title$="s"] {
        color: red;
    }    

    /* 第五种写法：选中具有title属性,且属性值包含字母g的元素*/
     [title*="g"] {
        color: red;
    }

2.7伪类选择器

作用：选中特殊状态的元素。

2.7.1动态伪类

1. :link 超链接未被访问的状态。
2. :visited 超链接访问过的状态。
3. :hover 鼠标悬停在元素上的状态。
4. :active 元素激活的状态。
5. :focus 获取焦点的元素。

2.7.2结构伪类

常用：

 1. :first-child 所有兄弟元素中的第一个。
 2. :last-child 所有兄弟元素中的最后一个。
 3. :nth-child(n) 所有兄弟元素中的第 n 个。
 4. :first-of-type 所有同类型兄弟元素中的第一个。
 5. :last-of-type 所有同类型兄弟元素中的最后一个。
 6. :nth-of-type(n) 所有同类型兄弟元素中的 第n个 。

关于n的值：
1. 0或不写：什么都选不中 —— 几乎不用。
2. n：选中所有子元素 —— 几乎不用。
3. 1~正无穷的整数：选中对应序号的子元素。
4. 2n 或 even：选中序号为偶数的子元素。
5. 2n+1或 odd：选中序号为奇数的子元素。
6. -n+3：选中的是前 3 个。

了解：

  1. :nth-last-child(n) 所有兄弟元素中的倒数第 n 个。
  2. :nth-last-of-type(n) 所有同类型兄弟元素中的 倒数第n个 。
  3. :only-child 选择没有兄弟的元素（独生子女）。
  4. :only-of-type 选择没有同类型兄弟的元素。
  5. :root 根元素。
  6. :empty 内容为空元素（空格也算内容）。

2.7.3否定伪类

:not(选择器) 排除满足括号中条件的元素。

2.7.4UI伪类

1.:checked 被选中的复选框或单选按钮。
2.:enable 可用的表单元素（没有 disabled 属性）。
3.:disabled 不可用的表单元素（有 disabled 属性）。

2.7.5目标伪类（了解）

:target() 选中锚点指向的元素

2.7.6语言伪类（了解）

:lang() 根据指定的语言选择元素（本质是看lang属性的值）。

2.8伪元素选择器

作用：选中元素中的一些特殊位置。
常用伪元素：

伪元素	作用
::first-letter	选中元素中的第一个文字
::first-line	选中元素中的第一行文字
::selection	选中被鼠标选中的内容
::placeholder	选中输入框的提示文字
::before	在元素最开始的位置，创建一个子元素（必须用 content 属性指定内容）
::after	在元素最后的位置，创建一个子元素（必须用 content 属性指定内容）