跳至主要內容

选择器

𝓳𝓭𝔂𝓼𝔂𝓪大约 5 分钟

选择器

标签选择器

如果需要对页面中的某一类标签统一设定样式时，应该使用标签选择器，标签选择器的关键字以标签的名字命名。

语法格式如下

标签名 {
  属性名: 属性值;
}
标签选择器
 <h1>学习 Web 前端技术课程</h1>

body {
	background-color: deepskyblue;
	color: floralwhite;
}
h1 {
	text-align: center;
}

类选择器

在定义类选择器时，需要用点号和类名来定义，而在使用该类选择器时，需要在使用该类选择器的元素标签中，增加 class="类名"的属性（不包括点号），表示该标签使用了指定的类选择器。

语法格式为：

.类名 {
  属性名: 属性值;
}
类选择器
图书分类：
    <ul>
      <li>经典</li>
      <li>文艺</li>
      <li class="book">科幻</li>
      <li class="book">童书</li>
      <li>生活</li>
    </ul>

.book {
	color: lightskyblue;
}

id 选择器

在定义 id 选择器时，需要用 “#” 号和 id 名来定义选择器，而在使用该 id 选择器时，需要在 HTML 标签元素中，增加 id="id 名"的属性（不包括 “#” 号），指定这个 HTML 元素的 id，这个 id 在 HTML 文档中是唯一的。

#id 选择器名 {
  属性: 属性值;
}
id选择器
图书分类：
<ul>
  <li>经典</li>
  <li>文艺</li>
  <li id="book">科幻</li>
  <li>童书</li>
  <li>生活</li>
</ul>

#book {
	color: lightskyblue;
  }

提示

  • 在 HTML 中选择器的优先级为：id 选择器 > 类选择器 > 标签选择器。
  • 在样式声明中加入 !important 规则时，它会改变样式声明的优先级。

后代选择器

  • 后代选择器主要可以更加精确定位到指定元素，以免与其他元素混淆。
  • 后代选择器是选择标签内部中某一标签的所有元素，其包括子元素及其他后代元素。
  • 在使用后代选择器时，父标签名和后代标签名必须用空格隔开，这样才能识别是某个标签内部的后代元素。
后代选择器
<div id="paragraph">
  <p>这是一个段落</p>
</div>

#paragraph p {
	color: lightskyblue;
}

群组选择器

群组选择器主要用来给多个不同的元素添加相同的 CSS 样式。

在使用群组选择器时，两个选择器之间必须要用英文逗号隔开。

群组选择器
<div>段落一</div>
<span>段落二</span>

div,span {
	color: lightskyblue;
}

属性选择器

属性选择器就是通过正则的方式去匹配指定属性的元素，为其设置样式。

在 CSS3 中新增了三种属性选择器，如下所示：

选择器描述
E[attr^=“xx”]选择元素 E，其中 E 元素的 attr 属性是以 xx 开头的任何字符。
E[attr$=“xx”]选择元素 E，其中 E 元素的 attr 属性是以 xx 结尾的任何字符。
E[attr*=“xx”]选择元素 E，其中 E 元素的 attr 属性是包含 xx 的任何字符。
属性选择器
<ul>
  <li><a href="#">本地链接</a></li>
  <li><a href="https://www.lanqiao.cn">蓝桥云课</a></li>
  <li><a href="https://developer.mozilla.org">MDN</a></li>
  <li><a href="https://unsplash.com">Unsplash</a></li>
</ul>

a[href^="#"] {
color: rgb(179, 255, 0);
}
a[href$="org"] {
color: rgb(195, 0, 255);
}
a[href*="un"] {
background-color: rgb(0, 255, 149);
color: white;
}

相关信息

  • 在上面代码中，我们使用 a[href^="#"] 去匹配 a 标签中 href 属性值以 # 开头的元素。
  • 使用 a[href$="org"] 去匹配 a 标签中 href 属性值以 org 结尾的元素。
  • 使用 a[href*="un"] 去匹配 a 标签中 href 属性值包含 un 的元素。

子元素伪类选择器

子元素伪类选择器就是选择某元素的子元素的一种选择器。

在 CSS3 中，有以下几种子元素伪类选择器：

选择器描述
E:first-child选择元素 E 的第一个子元素。
E:last-child选择元素 E 的最后一个子元素。
E:nth-child(n)选择元素 E 的第 n 个子元素，n 有三种取值，数字、odd 和 even。注意第一个子元素的下标是 1。
E:only-child选择元素 E 下唯一的子元素。
E:first-of-type选择父元素下第一个 E 类型的子元素。
E:last-of-type选择父元素下最后一个 E 类型的子元素。
E:nth-of-type(n)选择父元素下第 n 个 E 类型的子元素，n 有三种取值，数字、odd 和 even。
E:only-of-type选择父元素唯一的 E 类型的子元素。
E:nth-last-child(n)选择所有 E 元素倒数的第 n 个子元素。
E:nth-last-of-type(n)选择所有 E 元素倒数的第 n 个为 E 的子元素。
子元素伪类选择器
<div></div>
<div></div>
<div></div>
<div></div>

div {
width: 100px;
height: 100px;
margin-top: 10px;
background-color: rgb(0, 255, 242);
}
div:nth-child(2) {
background-color: rgb(0, 255, 128);
}
div:nth-of-type(4) {
background-color: rgb(111, 0, 255);
}

UI 伪类选择器

UI 伪类选择器是通过元素的状态来选择的一种选择器

选择器描述
:focus给获取焦点的元素设置样式。
::selection给页面中被选中的文本内容设置样式。
:checked给被选中的单选框或者复选框设置样式。
:enabled给可用的表单设置样式。
:disabled给不可用的表单设置样式。
:read-only给只读表单设置样式。
:read-write给可读写的表单元素设置样式。
:valid验证有效。
:invalid验证无效。

页面上有一个邮箱输入框，当你的输入满足邮箱格式时，输入框的背景颜色为绿色；当你的输入不满足要求，背景颜色为红色。

UI伪类选择器
电子邮箱：<input type="email" />

/*格式错误*/
input:invalid {
background-color: red;
}
/*格式正确*/
input:valid {
background-color: green;
}

页面上有一个姓名输入框和一个密码输入框，当聚焦输入框时，输入框的背景颜色会发生改变、

UI伪类选择器
姓名：<input type="text" /><br />
密码：<input type="password" />

input:focus {
background-color: rgb(255, 153, 0);
}
默认页脚
Copyright © 2023 𝓳𝓭𝔂𝓼𝔂𝓪