CSS 选择器#

1
/*选择所有div标签样式*/
2
div {
3
  color: red;
4
}
5

6
/*选择所有span标签样式*/
7
span {
8
  color: yellow;
9
}

1
/* blue 为类名，用 . 开头 */
2
.blue {
3
  color: blue;
4
}

1
<ul>
2
  <li>牌烧完了我打什么？</li>
3
  <li>转来转去像个小丑</li>
4
  <li class="blue">故障机器人最强故障机器人最</li>
5
  <li>哎，诶诶</li>
6
</ul>

1
/*#开头*/
2
#header {
3
  color: red;
4
}

1
<ul id="header">
2
  <li>牌烧完了我打什么？</li>
3
  <li>转来转去像个小丑</li>
4
  <li class="blue">故障机器人最强故障机器人最</li>
5
  <li>哎，诶诶</li>
6
</ul>

1
* {
2
  margin: 0;
3
  padding: 0;
4
}

1
* {
2
  margin: 0; /*去除所有元素的外边距*/
3
  padding: 0; /*去除所有元素的内边距*/
4
  box-sizing: border-box; /*统一盒模型*/
5
}

1
/*选择 box 类内部的所有 p 标签，父级和后代间用空格隔开*/
2
/*父级作用是限定，不会修改父级本身样式*/
3
/*父级和后代可以是两个任意类型的基础选择器*/
4
/*可以多级嵌套，只修改符合全部条件后代的选择器*/
5
.box p {
6
  color: skyblue;
7
}

1
.box > p {
2
  color: green;
3
}

1
/*邻接兄弟选择器*/
2
/*选择 h2 后面的第一个同层级 p 标签*/
3
h2 + p {
4
  color: pink;
5
}
6
/*通用兄弟选择器*/
7
/*选择 h2 后面的所有同层级 p 标签*/
8
h2 ~ p {
9
  color: pink;
10
}

1
a:link {
2
  color: #000000;
3
  text-decoration: none;
4
}
5
a:visited {
6
  color: #66ccff;
7
  text-decoration: none;
8
}
9
a:hover {
10
  color: #ee82ee;
11
  text-decoration: underline;
12
}
13
a:active {
14
  color: #f4004f;
15
  text-decoration: none;
16
}

1
.box {
2
  width: 300px;
3
  height: 300px;
4
  background-color: red;
5
}
6

7
/*注意这里没有空格*/
8
.box:hover {
9
  background-color: skyblue;
10
}
11

12
.search:focus {
13
  background-color: rgba(255,0,0,0.2)
14
}

1
ul li:first-child {
2
  color: pink;
3
  /* 第一个li元素的字体颜色为粉色 */
4
}
5

6
ul li:nth-child(2) {
7
  color: blue;
8
  /* 第二个li元素的字体颜色为蓝色 */
9
}
10

11
ul li:last-child {
12
  color: green;
13
  /* 最后一个li元素的字体颜色为绿色 */
14
}

1
button:disabled {
2
  /*透明度，让整个元素透明*/
3
  opacity: .4;
4
}
5

6
input:checked+label {
7
  color: #ff6900;
8
}

1
p::first-line {
2
  color: #66ccff;
3
}
4

5
p::first-letter {
6
  font-size: 28px;
7
}
8

9
div::before {
10
  content: "start";
11
  color: red;
12
}
13

14
div::after {
15
  content: "end";
16
  color: red;
17
}