CSS选择器用于选择HTML或XML文档中的元素,以便对其应用样式。CSS选择器有多种类型,常见的包括以下几种:
- 元素选择器(Element Selector):通过指定元素名称来选择匹配的元素。例如,
p
选择器选择所有的<p>
元素。 - 类选择器(Class Selector):通过指定类名来选择匹配的元素。类选择器以
.
开头,后面跟着类名。例如,.highlight
选择所有具有highlight
类的元素。 - ID选择器(ID Selector):通过指定唯一的ID来选择匹配的元素。ID选择器以
#
开头,后面跟着ID名称。例如,#logo
选择具有logo
ID的元素。 - 属性选择器(Attribute Selector):通过匹配元素的属性来选择元素。属性选择器可以根据属性的存在、值或其他条件进行选择。例如,
[type="submit"]
选择所有type
属性值为submit
的元素。 - 后代选择器(Descendant Selector):通过指定元素的后代关系来选择元素。后代选择器使用空格分隔不同层级的元素。例如,
div p
选择所有位于<div>
元素内部的<p>
元素。 - 子元素选择器(Child Selector):通过指定元素的直接子元素关系来选择元素。子元素选择器使用
>
符号分隔父元素和子元素。例如,ul > li
选择所有作为<ul>
直接子元素的<li>
元素。 - 相邻兄弟选择器(Adjacent Sibling Selector):通过指定元素与其相邻的兄弟元素关系来选择元素。相邻兄弟选择器使用
+
符号分隔两个相邻的元素。例如,h2 + p
选择紧跟在<h2>
元素后面的<p>
元素。
这些是CSS选择器的常见类型,每种选择器都有其特定的匹配规则和应用场景。在实际使用中,可以根据需要灵活组合不同类型的选择器,以选择目标元素并应用样式。