CSS中常用的选择器

CSS选择器

CSS选择器就是指定CSS要作用的标签，那个标签的名称就是选择器。意为：选择哪个容器。

CSS中常用的选择器及代码：

1. 元素选择器（Element Selector）：通过元素的标签名来选择元素。如p选择所有的<p>元素。

p {  
  color: blue;  
}  

2. 类选择器（Class Selector）：通过元素的class属性值来选择元素。如.my-class选择所有具有class="my-class"的元素。

.my-class {  
  font-weight: bold;  
}  

3. ID选择器（ID Selector）：通过元素的id属性值来选择元素。如#my-id选择具有id="my-id"的元素。

#my-id {  
  background-color: yellow;  
}  

4. 属性选择器（Attribute Selector）：通过元素的属性值来选择元素。如[name="value"]选择具有name="value"的元素。

[name="value"] {  
  border: 1px solid black;  
}  

5. 伪类选择器（Pseudo-class Selector）：通过元素的特定状态来选择元素。如:hover选择鼠标悬停的元素。

a:hover {  
  text-decoration: underline;  
}  

6. 伪元素选择器（Pseudo-element Selector）：通过元素的特定部分来选择元素。如::after选择元素的后代元素。

p::after {  
  content: " - The End";  
}  

7. 后代选择器（Descendant Selector）：通过元素的后代关系来选择元素。如div p选择<div>元素内的所有<p>元素。

div p {  
  font-style: italic;  
}  

8. 子元素选择器（Child Selector）：通过元素的父子关系来选择元素。如div > p选择<div>元素的直接子元素中的所有<p>元素。

div > p {  
  color: red;  
}  

9. 相邻兄弟选择器（Adjacent Sibling Selector）：通过元素的相邻兄弟关系来选择元素。如p + span选择<p>元素之后相邻的<span>元素。

h2 + p {  
  margin-top: 10px;  
}  

10. 通用兄弟选择器（General Sibling Selector）：通过元素的兄弟关系来选择元素。如p ~ span选择<p>元素之后的所有兄弟中的<span>元素。

h2 ~ p {  
  font-size: 14px;  
}