介绍CSS的样式选择器 以及对应的语法规则

CSS的样式选择器允许开发者根据不同的文档元素属性来选择并设置样式。以下是一些常见的CSS样式选择器及其相应的语法规则：

1. 元素选择器（Element Selector）
语法规则：选择器为HTML元素的名称，例如p、h1、img等。
示例代码：p{color: red;}

2. 类选择器（Class Selector）
语法规则：选择器以点号开头，后面跟随类名，例如.class-name。
示例代码：.red{color: red;}

3. ID选择器（ID Selector）
语法规则：选择器以#号开头，后面跟随ID名，例如#id-name。
示例代码：#header{background: blue;}

4. 子元素选择器（Child Selector）
语法规则：选择器以父元素名称后跟子元素名称的方式来选择元素，例如parent > child。
示例代码：ul > li{font-size: 16px;}

5. 后代元素选择器（Descendant Selector）
语法规则：选择器以祖先元素名称后跟空格再跟后代元素名称的方式来选择元素，例如ancestor descendant。
示例代码：div p{color: blue;}

6. 通配符选择器（Universal Selector）
语法规则：选择器为*，表示选择所有元素。
示例代码：*{margin: 0;}

7. 属性选择器（Attribute Selector）
语法规则：选择器以属性名称和可选的属性值组成，例如[attr]和[attr=value]。
示例代码：input[type=text]{background: gray;}

8. 伪类选择器（Pseudo-Class Selector）
语法规则：选择器以冒号开头，表示元素的特殊状态，例如:hover、:active、:focus等。
示例代码：a:hover{color: red;}

9. 伪元素选择器（Pseudo-Element Selector）
语法规则：选择器以双冒号开头，表示元素的某个部分，例如::before、::after等。
示例代码：p::before{content: "•";}