在Web开发中,层叠样式表(CSS)是用于描述HTML或XML(包括SVG和XHTML等其他XML语言)文档的样式的语言。CSS描述了文档的表现形式,包括布局、颜色和字体等。在CSS中,选择器是一种模式,用于选择需要添加样式的元素。以下是一些常见的CSS选择器。
元素选择器是最基本的选择器,它匹配HTML元素的类型名称。例如,p
选择器将匹配所有的元素。
p {
color: red;
}
类选择器匹配HTML元素的类属性。类选择器以.
开始。例如,.myClass
选择器将匹配所有类名为myClass
的元素。
.myClass {
color: blue;
}
ID选择器匹配HTML元素的ID属性。ID选择器以#
开始。例如,#myID
选择器将匹配所有ID为myID
的元素。
#myID {
color: green;
}
属性选择器匹配具有特定属性的HTML元素。例如,[target]
选择器将匹配所有具有target
属性的元素。
[target] {
color: yellow;
}
伪类选择器允许你样式化链接的状态,例如未访问的链接、已访问的链接、鼠标悬停在链接上时等。例如,:hover
选择器将匹配鼠标悬停在其上的元素。
a:hover {
color: purple;
}
组合选择器允许你同时选择多个元素。你可以使用,
来分隔每个选择器。例如,p, li
选择器将匹配所有的和
元素。
p, li {
color: orange;
}
选择作为另一个元素后代的元素。
div p {
text-align: center;
}
选择作为另一个元素直接子元素的元素。
ul > li {
list-style-type: circle;
}
选择紧接在另一个元素后的兄弟元素。
h2 + p {
margin-top: 10px;
}
*
将匹配所有元素。
* {
box-sizing: border-box;
}