简单选择器

元素选择器

元素选择器根据元素名称来选择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;
}