css选择器常见用法

以下是 CSS 选择器的常见用法：

1. 元素选择器：通过元素的名称来选择，例如 p 选择所有的 <p> 段落元素，div 选择所有的 <div> 元素。

2. 类选择器：使用 .classname 的形式，选择具有指定类名的元素。例如 .myClass 选择所有应用了 myClass 类的元素。

3. ID 选择器：使用 #idname 的形式，选择具有指定 ID 的单个元素。例如 #myId 选择具有 id="myId" 的元素。

4. 通配符选择器：* 选择所有的元素。

5. 后代选择器：使用空格分隔多个选择器，选择指定元素的后代元素。例如 div p 选择 <div> 元素内部的所有 <p> 元素。

6. 子选择器：使用 > 选择直接子元素。例如 div > p 选择 <div> 元素的直接子 <p> 元素。

7. 相邻兄弟选择器：使用 + 选择紧接在指定元素后的第一个兄弟元素。例如 p + span 选择紧跟在 <p> 元素后的第一个 <span> 元素。

8. 通用兄弟选择器：使用 ~ 选择指定元素之后的所有兄弟元素。例如 p ~ span 选择 <p> 元素之后的所有 <span> 元素。

9. 属性选择器：根据元素的属性来选择，例如 [attribute] 选择具有指定属性的元素，[attribute="value"] 选择具有指定属性且属性值为指定值的元素。

以下是 CSS 选择器常见用法的示例： 

1. 元素选择器：

p {
  color: red;
}

这会将所有的 <p> 段落元素的文本颜色设置为红色。  

2. 类选择器：

.myClass {
  font-size: 18px;
}

当元素应用了 class="myClass" 时，如 <div class="myClass">这是示例</div>，其字体大小将被设置为 18 像素。

3. ID 选择器：

#myId {
  background-color: yellow;
}

对于 <div id="myId">这是 ID 选择器示例</div> 这样的元素，其背景颜色会变为黄色。

4. 通配符选择器：

* {
  margin: 0;
  padding: 0;
}

这会将所有元素的外边距和内边距都设置为 0。

5. 后代选择器：

div p {
  text-decoration: underline;
}

在 <div><p>这是后代选择器示例</p></div> 中，<p> 元素的文本会添加下划线。

6. 子选择器：

div > p {
  border: 1px solid black;
}

对于 <div><p>这是子选择器示例</p><span><p>这个不会被选中</p></span></div>，只有直接位于 <div> 元素下的 <p> 元素会有黑色的边框。 

7. 相邻兄弟选择器：

p + span {
  color: blue;
}

在 <p>这是段落</span><span>这是相邻兄弟选择器示例</span> 中，紧跟在 <p> 元素后的 <span> 元素文本颜色会变为蓝色。

8. 通用兄弟选择器：

p ~ span {
  font-style: italic;
}

在 <p>这是段落</span><span>这是通用兄弟选择器示例 1</span><span>这是通用兄弟选择器示例 2</span> 中，<p> 元素后面的所有 <span> 元素都会变为斜体。

9. 属性选择器：

[href] {
  text-decoration: none;
}

对于具有 href 属性的元素，如 <a href="https://example.com">链接</a>，其文本不会有下划线。

[href="https://example.com"] {
  background-color: green;
}

对于 href 属性值为 https://example.com 的元素，会有绿色的背景。