CSS中有10种样式选择器,它们分别是:1. 元素选择器 2. ID选择器 3. 类选择器 4. 属性选择器 5. 后代选择器 6. 相邻兄弟选择器 7. 通用兄弟选择器 8. 子元素选择器 9. 伪
CSS中有10种样式选择器,它们分别是:
1. 元素选择器 2. ID选择器 3. 类选择器 4. 属性选择器 5. 后代选择器 6. 相邻兄弟选择器 7. 通用兄弟选择器 8. 子元素选择器 9. 伪类选择器 10. 伪元素选择器
下面我们来一一了解它们。
1. 元素选择器
<p>使用元素名称作为选择器,用来匹配HTML中的元素。</p> 例如:p { color: red; }
2. ID选择器
<p>使用ID属性选择器来选择HTML元素,ID选择器在页面中的唯一性。可以在一个页面中使用多个ID选择器,但不要重复。</p> 例如:#example { background-color: yellow; }
3. 类选择器
<p>使用类名选择HTML元素。类名是由开发人员自己规定的,可以在多个元素中重复使用。</p> 例如:.example { font-size: 20px; }
4. 属性选择器
<p>使用HTML元素的属性来选择样式。属性选择器可以通过元素的class, id, name或其他属性来选择对应的元素。</p> 例如:input[type="text"] { color: blue; }
5. 后代选择器
<p>使用后代选择器可以选择一个元素的所有后代元素。</p> 例如:div p { color: green; }
6. 相邻兄弟选择器
<p>选择紧接在另一个元素后面的元素。</p> 例如:h1 + p { color: red; }
7. 通用兄弟选择器
<p>选择和另一个元素相邻的所有元素。</p> 例如:h1 ~ p { font-size: 24px; }
8. 子元素选择器
<p>选择一个元素的所有直接子元素。</p> 例如:ul > li { color: purple; }
9. 伪类选择器
<p>用来选择那些没有真正添加到文档树中的元素,比如链接的状态。</p> 例如:a:hover { color: orange; }
10. 伪元素选择器
<p>它们被创建用于向某些选择器添加特殊效果。</p> 例如:p::first-letter { font-size: 36px; }
以上就是CSS中10种样式选择器的介绍。根据每个元素的不同属性进行不同的选择,可以让页面更加丰富多彩。
粉丝
0
关注
0
收藏
0