CSS选择器和伪类

目录

CSS选择器

1.元素选择器

2. id 选择器

3. 类选择器

4.通用选择器

5.分组选择器

6.后代选择器

7.子选择器

8.相邻兄弟选择器

9.通用兄弟选择器

伪类

1. :first-child/:last-child /nth-child(n)

2. :hover 鼠标悬停

3. :active 已选择

4. :focus 获得焦点

5. :link 未访问的

6. :visited 已访问的

---

• 元素选择器
• id选择器 (#)
• 类选择器 (.)
• 通用选择器 (*)
• 分组选择器 (逗号)
• 后代选择器 (空格)
• 子选择器 (>)
• 相邻兄弟选择器 (+)
• 通用兄弟选择器 (~)

CSS选择器

1.元素选择器

页面上的所有 <p> 元素都将居中对齐，并带有红色文本颜色：

p {
  text-align: center;
  color: red;
}

2. id 选择器

将应用于 id="para1" 的 HTML 元素：

#para1 {
  text-align: center;
  color: red;
}

3. 类选择器

所有带有 class="center" 的 HTML 元素将为红色且居中对齐：

.center {
  text-align: center;
  color: red;
}

class="center" 的 <p> 元素会居中对齐：

p.center {
  text-align: center;
  color: red;
}

4.通用选择器

下面的 CSS 规则会影响页面上的每个 HTML 元素：

* {
  text-align: center;
  color: blue;
}

5.分组选择器

用逗号来分隔每个选择器，h1、h2 和 p 元素具有相同的样式定义:

h1, h2, p {
  text-align: center;
  color: red;
}

6.后代选择器

下面的例子选择 <div> 元素内的所有 <p> 元素：

div p {
  background-color: yellow;
}

7.子选择器

下面的例子选择属于 <div> 元素下一层级为 <p> 的子元素：

div > p {
  background-color: yellow;
}

8.相邻兄弟选择器

相邻兄弟选择器匹配所有作为指定元素的相邻同级的元素。

兄弟（同级）元素必须具有相同的父元素，“相邻”的意思是“紧随其后”。

下面的例子选择紧随 <div> 元素之后的同级 <p> 元素：

div + p {
  background-color: yellow;
}

9.通用兄弟选择器

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

下面的例子选择属于 <div> 元素的同级元素的所有 <p> 元素：

div ~ p {
  background-color: yellow;
}

伪类

常用几个伪类：

1. :first-child/:last-child /nth-child(n)

伪类与指定的元素匹配：该元素是另一个元素的第一个/最后一个/第n个子元素

//选择器匹配所有 <p> 元素中的第一个 <i> 元素
p i:first-child {
  color: blue;
}

//选择器匹配所有 <p> 元素中的最后一个 <i> 元素
p i:last-child {
  color: blue;
}

/* 选择每隔一个元素选择一次，从第二个元素开始 */
p :nth-child(2n) {
   color: blue;
}

/* 选择每隔一个元素选择一次，从第一个元素开始 */
p :nth-child(2n+1) {
    color: blue;
}

2. :hover 鼠标悬停

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

3. :active 已选择

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

4. :focus 获得焦点

5. :link 未访问的

/* 未访问的链接 */
a:link {
  color: #FF0000;
}

6. :visited 已访问的

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