常见的CSS选择器

CSS简介

CSS (Cascading Style Sheets，层叠样式表），是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言，CSS 文件扩展名为 .css。

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明，选择器通常是需要改变样式的 HTML 元素。CSS声明总是以分号结束，声明总以大括号 {} 括起来，CSS注释以 /* 开始, 以 */ 结束。

选择器{

属性名：属性值；

}

引入方式：

• 外部样式：将CSS文件用<link>标签链接进HTML
• 内部样式：在HTML文件里将样式写入<style></style>标签中
• 行内样式：使用style属性赋值

下是一些常见的 CSS 选择器：

元素选择器

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

如下代码，选择器将选择所有 <p> 元素。

p {
  color: blue;
}

类选择器

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

类选择器以 .开头，后面跟着类名称。

如下代码，选择器将选择所有具有类别为one的元素。

.one {
  background-color: yellow;
}

ID 选择器

通过元素的唯一标识符（ID）选择 HTML 元素。

ID 选择器以 # 开头，后面跟着 ID 名称。

如下代码，选择器将选择具有 ID 为one的元素。

#one {
  width: 200px;
}

属性选择器

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

如下代码，选择器将选择所有 type 属性为text的 <input> 元素

input[type="text"] {
  background-color: yellow;
}

后代选择器

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

后代选择器使用空格分隔元素名称，选择指定元素内所有对应元素。

如下代码，选择器将选择所有在<div>元素内的<p>元素。

div p {
  font-weight: bold;
}

子代选择器

与后代选择器一样通过指定元素的后代关系选择 HTML 元素，但二者分隔元素的方式不同，子代选择器用>来分隔，只选择指定元素的子元素（一级子标签）

如下代码，选择器将选择所有在<div>元素内的一级子<p>标签

div>p {
  font-weight: bold;
}

选择器列表（,）

选择所有匹配的节点。选择器列表是以逗号分隔的多个选择器所组成的列表。

当多个选择器共享相同的声明时，它们可以被编组进一个以逗号分隔的列表。选择器列表也可以作为参数传递给一些函数式 CSS 伪类。

以下三个声明是等效的：

span {
  border: red 2px solid;
}
div {
  border: red 2px solid;
}

span,
div {
  border: red 2px solid;
}

:is(span, div) {
  border: red 2px solid;
}

伪类和伪元素

这一类选择器的数量众多，通常用于很明确的目的。

伪类

伪类是开头为冒号的关键字：

<--匹配一组元素中的第一个元素-->
:first-child

<--匹配一组元素中的最后一个元素-->
:last-child

<--匹配属于父元素中唯一子元素的元素-->
:only-child

<--用来选择任何未通过验证的 <form>、<fieldset>、<input> 或其他表单元素-->
:invalid

伪类是选择器的一种，它用于选择处于特定状态的元素，比如当它们是这一类型的第一个元素时，或是当鼠标指针悬浮在元素上面的时候，会表现得会像是文档的某个部分应用了一个类一样，使用伪类可以减少标记文本中多余的类。

一些伪类只会在用户和文档交互的时候应用，这些伪类被称为用户行为伪类，也叫做动态伪类，表现得就像是一个类在用户和元素交互的时候应用到了元素上一样。

<--用户将光标鼠标悬停在元素上时触发-->
:hover

<--当用户点击或轻触一个元素或使用键盘的Tab键使元素获得焦点时，会被触发-->
:focus

伪元素

伪元素以类似方式表现，不过表现得是像你往标记文本中加入全新的 HTML 元素一样，而不是向现有的元素上应用类。

伪元素开头为双冒号::。

如果要选中一段文字的第一行，可以把使用一个<span>元素将文字的第一行包起来，然后使用元素选择器，但是，如果包起来的字符数目长于或者短于父元素的宽度，这样做就不可行，且屏幕宽度或者字体大小也会影响一行能容纳的字符数。这时可以使用伪元素::first-line即使单词/字符的数目改变，它也只会选中第一行。

<--在块级元素的第一行应用样式-->
::first-line (:first-line)

伪类和伪元素可以组合起来使用：

<--匹配article元素里面的第一个p元素的第一行-->

article p:first-child::first-line {
  font-size: 120%;
  font-weight: bold;
}