[分享]css3所有的选择器

CSS3选择器是用来选择HTML中某些元素的工具，共有七种选择器：1. 元素选择器 根据元素的标签名来选择元素，例如p标签选择所有的段落元素。如下所示： p { color: red; } 2. 类选...

CSS3选择器是用来选择HTML中某些元素的工具，共有七种选择器：

1. 元素选择器
   根据元素的标签名来选择元素，例如p标签选择所有的段落元素。如下所示：
   p {
     color: red;
   }

2. 类选择器
   根据元素的class属性值来选择元素。语法为“.”，例如选择class为”example“的所有元素。如下所示：
   .example {
     font-size: 16px;
   }

3. ID选择器
   根据元素的id属性值来选择元素。语法为“#”，例如选择id为”header“的元素。如下所示：
   #header {
     background-color: blue;
   }

4. 属性选择器
   根据元素的属性和属性值来选择元素，例如选择属性名为”href“且属性值为”http://www.example.com“的所有元素。如下所示：
   a[href="http://www.example.com"] {
     color: green;
   }

5. 伪类选择器
   根据元素的状态来选择元素，例如选择未访问过的链接。如下所示：
   a:link {
     color: blue;
   }

6. 子串匹配选择器
   根据元素的属性值是否包含某个子串来选择元素，例如选择class属性值中包含”example“的所有元素。如下所示：
   [class*="example"] {
     font-size: 14px;
   }

7. 伪元素选择器
   可以向文档中添加虚拟元素的选择器，例如向p元素添加虚拟的“::before”元素。如下所示：
   p::before {
     content: "前缀：";
   }