css选择器

元素选择器(Element Selector)

通过元素名称选择 HTML 元素。

1
2
3
4
5
// 如下代码,p 选择器将选择所有 <p> 元素:

p {
color: blue;
}

类选择器(Class Selector)

通过类别名称选择具有特定类别的 HTML 元素。

1
2
3
4
5
6
// 类选择器以 . 开头,后面跟着类别名称。
// 如下代码,.highlight 选择器将选择所有具有类别为 "highlight" 的元素。

.highlight {
background-color: yellow;
}

ID 选择器(ID Selector)

通过元素的唯一标识符(ID)选择 HTML 元素。

1
2
3
4
5
6
// ID 选择器以 # 开头,后面跟着 ID 名称。
// 如下代码,#runoob 选择器将选择具有 ID 为 "runoob" 的元素。

#runoob {
width: 200px;
}

属性选择器(Attribute Selector)

通过元素的属性选择 HTML 元素。属性选择器可以根据属性名和属性值进行选择。

1
2
3
4
5
// 如下代码,input[type="text"] 选择器将选择所有 type 属性为 "text" 的 <input> 元素。

input[type="text"] {
border: 1px solid gray;
}

后代选择器(Descendant Selector)

通过指定元素的后代关系选择 HTML 元素。

1
2
3
4
5
6
// 后代选择器使用空格分隔元素名称。
// 如下代码,div p 选择器将选择所有在 <div> 元素内的 <p> 元素。

div p {
font-weight: bold;
}

背景: background 属性