优秀的编程知识分享平台

网站首页 > 技术文章 正文

Web开发学习笔记(27)——CSS3(1)选择器

nanyue 2024-07-31 12:12:20 技术文章 6 ℃

（1）CSS3 中提供的新选择器 —— 属性选择器：

  • 属性选择器

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

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

选择器

描述

E[attr^=“xx”]

选择元素 E，其中 E 元素的 attr 属性是以 xx 开头的任何字符。

E[attr$=“xx”]

选择元素 E，其中 E 元素的 attr 属性是以 xx 结尾的任何字符。

E[attr*=“xx”]

选择元素 E，其中 E 元素的 attr 属性是包含 xx 的任何字符。

例子，

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      a[href^="#"] {
        color: rgb(179, 255, 0);
      }
      a[href$="org"] {
        color: rgb(195, 0, 255);
      }
      a[href*="le"] {
        background-color: rgb(0, 255, 149);
        color: white;
      }
    </style>
  </head>
  <body>
    <ul>
      <li><a href="#">本地链接</a></li>
      <li><a href="https://www.wangyelang.cn">王耶浪</a></li>
      <li><a href="https://developer.mozilla.org">Web开发</a></li>
      <li><a href="https://learningnotes.com">学习笔记</a></li>
    </ul>
  </body>
</html>

显示为，

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

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

在 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 的子元素。

例子,

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      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);
      }
    </style>
  </head>
  <body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </body>
</html>

显示效果，

  • div:nth-child(2) 给 div 的第 2 个子元素添加绿色背景颜色。
  • div:nth-of-type(4) 给父元素下第 4 个 div 子元素添加紫色背景颜色。

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

在 CSS3 中有以下几种 UI 伪类选择器。

选择器

描述

:focus

给获取焦点的元素设置样式。

::selection

给页面中被选中的文本内容设置样式。

:checked

给被选中的单选框或者复选框设置样式。

:enabled

给可用的表单设置样式。

:disabled

给不可用的表单设置样式。

:read-only

给只读表单设置样式。

:read-write

给可读写的表单元素设置样式。

:valid

验证有效。

:invalid

验证无效。

练习一：属性有效性验证

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /*格式错误*/
      input:invalid {
        background-color: red;
      }
      /*格式正确*/
      input:valid {
        background-color: green;
      }
    </style>
  </head>
  <body>
    电子邮箱：<input type="email" />
  </body>
</html>

练习二：获得焦点验证

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      input:focus {
        background-color: rgb(255, 153, 0);
      }
    </style>
  </head>
  <body>
    姓名：<input type="text" /><br />
    密码：<input type="password" />
  </body>
</html>

练习：

实现一个五彩导航

在前面的内容中，我们已经学习了 CSS3 的选择器应用。我们在之前的章节中也做过横向导航，这里我们结合所学的 CSS3 选择器来实现一个升级版的导航。

知识点

  • hover 伪类选择器

要求

  1. 新建一个 html 文件。
  2. 将 <a> 标签转换成行内块，宽 120px 高 58px、设置背景颜色 #FFFAE8；
  3. 当鼠标移动到链接上时达到以下要求：
  • 背景颜色分别变为 #E1D15E、#F9D6D1、#5BDE66、#EBAA8D、#BED780；
  • 设置圆角效果（border-radius）；
  • 字体：颜色为 #fff，去掉链接下划线。

验证测试

按以上要求用 HTML 完成以下效果：

解题：

<!DOCTYPE html>
<html>
<head>
  <style>
    a {
      display: inline-block;
      width: 120px;
      height: 58px;
      background-color: #FFFAE8;
      text-align: center;
      line-height: 58px;
      text-decoration: none;
      color: #fff;
      border-radius: 10px;
    }
    a:hover:nth-of-type(1) {
      background-color: #E1D15E;
    }
    a:hover:nth-of-type(2) {
      background-color: #F9D6D1;
    }
    a:hover:nth-of-type(3) {
      background-color: #5BDE66;
    }
    a:hover:nth-of-type(4) {
      background-color: #EBAA8D;
    }
    a:hover:nth-of-type(5) {
      background-color: #BED780;
    }
  </style>
</head>
<body>
  <a href="#">导航一</a>
  <a href="#">导航二</a>
  <a href="#">导航三</a>
  <a href="#">导航四</a>
</body>
</html>

Tags：

猜你喜欢

最近发表
标签列表