按元素类型选择(Element Type Selector)
按元素类型选择是最基础的选择器,通过标签名选择某种类型的元素。
p { color: red; }
ID选择器(ID Selector)
ID选择器是通过HTML中的id属性选取指定元素的选择器。
#myId { background-color: blue; }
类选择器(Class Selector)
类选择器通过CSS指定的class属性选择某种类型的元素。
.myClass { font-size: 18px; }
属性选择器(Attribute Selector)
属性选择器可以选择特定属性的元素,包括属性值。
input[type="text"] { border: 1px solid #ddd; }
伪类选择器(Pseudo-class Selector)
伪类选择器用于指定元素在不同状态下应该具备的特定样式。
a:hover { color: blue; }
组合选择器(Combinators)
组合选择器可以综合不同选择器的效果来选取元素。
div p { color: green; }
子元素选择器(Child Selector)
子元素选择器只能选择作为某个元素子元素的元素。
ul >li { list-style: circle; }
相邻兄弟选择器(Adjacent Sibling Selector)
相邻兄弟选择器可以选择与另一个元素在同一级别并紧接着的元素。
h2 + p { font-style: italic; }
通用兄弟选择器(General Sibling Selector)
通用兄弟选择器可以选取某个元素后的所有兄弟元素。
h2 ~ p { font-weight: bold; }
以上是CSS选择器的简单介绍,当然还有更多更复杂的选择器可以使用。了解这些选择器的特点和用法,可以帮助大家更好的应用CSS来控制网页样式。