简单选择器

元素选择器

元素选择器根据元素名称来选择HTML元素。

1
2
3
4
p {
text-align: center;
color: red;
}

id选择器

id选择器使用HTML元素的id来选择元素。

元素的id在页面中必须是唯一的。

格式:#id

1
2
3
4
5
#para1 {
text-align: center;
color: red;
}
<!-- 选中id="para1"的元素 -->

CSS类选择器

类选择器选择有特定class属性的HTML元素。

格式:点(.) + 类名

1
2
3
4
.center {
text-align: center;
color: red;
}

CSS通用选择器

通用选择器(*)会选择页面上的所有HTML元素

1
2
3
4
* {
text-align: center;
color: blue;
}

CSS分组选择器

同时选中多个元素,设置相同样式。

1
2
3
4
h1, h2, p {
text-align: center;
color: red;
}

组合器选择器

CSS选择器可以包含多个简单选择器。简单选择器之间可以包含组合器

CSS中有四种组合器:

  • 后代选择器(空格)
  • 子选择器(>)
  • 相邻兄弟选择器(+)
  • 通用兄弟选择器(~)

后代选择器

后代选择器匹配属于指定元素后代的所有元素

下面指定属于div元素内的所有p元素

1
2
3
div p {
background-color: yellow;
}

子选择器

子选择器匹配属于指定元素中的直接子元素

下面匹配属于div子元素的p元素

1
2
3
div > p {
background-color: yellow;
}

相邻兄弟选择器

相邻兄弟选择器匹配指定元素的相邻同级元素

同级元素:具有相同的父类

下面匹配紧随div元素后的所有p元素。

1
2
3
div + p {
background-color: yellow;
}

通用兄弟选择器

通用兄弟选择器匹配指定元素同级的所有指定元素

1
2
3
div ~ p {
background-color: yellow;
}

伪类选择器

伪类选择器用于定义元素的特殊状态

语法

1
2
3
selector:pseudo-class {
property: value;
}

锚伪类

超链接以不同的形式显示:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/* 未访问的链接 */
a:link {
color: #FF0000;
}

/* 已访问的链接 */
a:visited {
color: #00FF00;
}

/* 鼠标悬停链接 */
a:hover {
color: #FF00FF;
}

/* 已选择的链接 */
a:active {
color: #0000FF;
}

注意:hover必须在link和visited之后,active必须在hover之后。

属性选择器

选择带有特定属性的HTML元素。

[attribute]选择器

[attribute]选择器用于选择带有特定属性的HTML元素。

例如,下列选择带target属性的a标签:

1
2
3
a[target] {
background-color: yellow;
}

[attribute = “value”]选择器

[attibute = “value”]用于选择带有指定属性和值的HTML标签。

例如,选择target=”_blank”的HTML标签:

1
2
3
a[target="_blank"] { 
background-color: yellow;
}

[attibute ~= “value”]选择器

[attribute ~= “value”]选择属性值包含指定词的HTML元素。

例如,选择title属性值带有flower的元素。

1
2
3
[title~="flower"] {
border: 5px solid yellow;
}

[attribute |= “value”]选择器

[attribute ^= “value”]选择指定属性以指定值开头的元素。

下例选取 class 属性以 “top” 开头的所有元素:

1
2
3
[class|="top"] {
background: yellow;
}

值必须是完整单词。

[attribute ^= “value”]选择器

[attribute ^= “value”]选择指定属性以指定值开头的元素。

下例选取 class 属性以 “top” 开头的所有元素:

1
2
3
[class^="top"] {
background: yellow;
}

值不一定是完整单词。

[attribute $= “value”]选择器

[attribute $= “value”]选择指定属性以指定值结尾的元素。

例如,选择class属性的值以”test”结果的元素。

1
2
3
[class$="test"] {
background: yellow;
}

[attribute *= “value”]选择器

[attribute *= “value”]选择属性包含指定单词的HTML元素。

例如,选择title属性值带有te的元素。

1
2
3
[class*="te"] {
background: yellow;
}

设置表单样式

若需为不带class和id的表单设置样式,可以如下使用:

1
2
3
4
5
6
7
8
9
10
11
12
input[type="text"] {
width: 150px;
display: block;
margin-bottom: 10px;
background-color: yellow;
}

input[type="button"] {
width: 120px;
margin-left: 35px;
display: block;
}