19. 选择器 {ignore}

[toc]

选择器的作用：帮助你精准的选中想要的一个或多个元素。

1. 简单选择器

  1. ID选择器 #
  2. 元素选择器 元素名
  3. 类选择器 .
  4. 通配符选择器 *
  5. 属性选择器 [属性名]、[属性名="属性值"]、[属性名$="属性值"]、[属性名^="属性值"]、[属性名|="属性值"]、[属性名~="属性值"]、[属性名*="属性值"]
  6. 伪类选择器 :link、:visited、:hover、active
  7. 伪元素选择器 ::before、::after

上面列的并不全，还有一些css3的没罗列出来。

属性选择器

a[href$="baidu.com"]这个属性选择器表示的含义是：选中带有href属性的a元素，且href属性以baidu.com结尾。 —— 这么做的可以不把href属性写死。

更多细节 ==> 属性选择器 mdn

伪类选择器

用于选中某些元素的某种状态

  • link: 超链接未访问时的状态
  • visited: 超链接访问过后的状态
  • hover: 鼠标悬停状态
  • active：激活状态，鼠标按下状态

爱恨法则：l o v e h a t e —— 书写a元素的4种状态时，需要注意顺序；【这个顺序，是由css的层叠性来决定的。】

可以使用chrome浏览器的调试工具，控制元素所处的状态；

19. 选择器 - 图1

link和visited只能用于a元素，hover和active除了用于a元素，还可以用于其他元素。

伪元素选择器

before、after 就是在指定的元素前、后插入一个元素（这个元素是没有名字的）。

示例：

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <title>test</title>
  6.     <style>
  7.         span::before {
  8.             content: "《";
  9.             color: red;
  10.         }
  12.         span::after {
  13.             content: "》";
  14.             color: red;
  15.         }
  16.     </style>
  17.     </style>
  18. </head>
  20. <body>
  21.     <p>袁老师和成老师的<span>HTML和CSS</span>课程真的是不错呀！</p>
  22. </body>
  24. </html>

19. 选择器 - 图2

2. 选择器的组合

  1. 并且 挨在一起
  2. 后代元素 空格
  3. 子元素 >
  4. 相邻兄弟元素 +

  5. 后面的所有兄弟元素 ~

    • ~ 表示选择后面出现的所有兄弟元素，但是，CSS没有提供选择前面出现的所有兄弟元素，这跟浏览器的页面渲染机制有关（涉及到浏览器的内部原理）。

3. 选择器的并列

多个选择器, 用逗号 , 分隔；它只是一个语法糖。

语法糖：表示方便代码的书写，减轻程序员的负担。

小结

  • 简单选择器

    1. ID选择器 #
    2. 元素选择器 元素名
    3. 类选择器 .
    4. 通配符选择器 *
    5. 属性选择器 [属性名]、[属性名="属性值"]
    6. 伪类选择器 :link、:visited、:hover、active
    7. 伪元素选择器 ::before、::after

  • 选择器的组合

    1. 并且 挨在一起
    2. 后代元素 空格
    3. 子元素 >
    4. 相邻兄弟元素 +
    5. 后面的所有兄弟元素 ~
  • 选择器的并列 ,