Manchan's blog Manchan's blog
首页
  • 前端文章

    • HTML5
    • CSS3
    • JavaScript
  • 学习笔记

    • CSS选择器世界
地信
  • 技术文档
  • GitHub技巧
  • Nodejs
  • 博客搭建
  • 旧版博客
  • 学习
  • 面试
  • 心情杂货
  • 实用技巧
友链
关于
收藏
  • 分类
  • 标签
  • 归档
GitHub (opens new window)

まん酱

一个正在学习中的GISer~
首页
  • 前端文章

    • HTML5
    • CSS3
    • JavaScript
  • 学习笔记

    • CSS选择器世界
地信
  • 技术文档
  • GitHub技巧
  • Nodejs
  • 博客搭建
  • 旧版博客
  • 学习
  • 面试
  • 心情杂货
  • 实用技巧
友链
关于
收藏
  • 分类
  • 标签
  • 归档
GitHub (opens new window)
  • 《CSS选择器世界》

    • 概述
    • CSS选择器的优先级
    • CSS选择器的命名
    • 精通CSS选择符
    • 元素选择器
    • 属性选择器
      • ID选择器和类选择器
      • 属性值直接匹配选择器
      • 属性值正则匹配选择器
    • 用户行为伪类
    • URL定位伪类
    • 输入伪类
    • 树结构伪类
  • 学习笔记
  • 《CSS选择器世界》
GIS君-manchan
2022-11-25
目录

属性选择器

我们平常提到的属性选择器指的是[type="radio"]这类选择器,实际上,这是一种简称指的是“属性值匹配选择器”。实际上,在正式文档中,类选择器和ID 选择器都属于属性选择器因为本质上类选择器是 HTML 元素中 class 的属性值,ID 选择器是 HTML 素中 id 的属性值。

# ID选择器和类选择器

ID选择器和类选择器都属于属性选择器,因为几乎所有标签都支持id和class这两个属性,他们就有了专门的属性选择器。

ID 选择器和类选择器虽然性质一致,都属于属性选择器,但是它们的实际表现却有明显差异。

  1. 语法不同

    ID选择器以#开头,类选择器以.开头。

  2. 优先级不同

    ID选择器的优先级比类选择器的优先级高一个等级

  3. 唯一性与可重复性

    ID 具有唯一性,而类天生就可以重复使用。

    不同元素的类名是可以重复的,且类选择器可以控制所有元素。而ID在语义上是不能重复的,需保证其唯一性。

# 属性值直接匹配选择器

  1. [attr]

    [attr]表示只要包含指定的属性就匹配,尤其适用于一些 HTML 布尔属性,这些布尔属性只要有属性值,无论值的内容是什么,都认为这些属性的值是 true。

    <html>
       <input disabled>
       <input disabled=nm>
       <input disabled="disabled">
       <input disabled="true">
       <input disabled="false">
    </html>
    
    <style>
     [disable] { }
    </style> 
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11

    如上面的写法都是禁用输入框,直接使用属性选择器即可判断,无需关注具体的属性值。

  2. [attr="val"]

    [attr="val"]是属性值完全匹配选择器,例如:

    [type="radio"] {}
    [type="checkbox"] {}
    ol[type="a"] {}
    ol[type="i"] {}
    
    1
    2
    3
    4

    提示

    (1)不区分单引号和双引号,单引号和双引号都是合法的。

    (2)引号是可以省略的。

  3. [attr~="val"]

    [attr~="val"]是属性值单词完全匹配选择器,专门用来匹配属性中的单词。

    匹配的属性值不能是空字符串,不能是部分字符串。

    <a href rel="nofollow noopener">链接</a>
    <style>
     [rel~="noopener"] {}
     [rel~="nofollow"] {}
    </style>
    
    1
    2
    3
    4
    5
  4. [attr|="val"]

    [attr|="val”]是属性值起始片段完全匹配选择器,表示具有 attr 属性的元素,其值要么正好是 val,要么以val 外加短横线-开头。

# 属性值正则匹配选择器

  1. [attr^="val"]

    [attr^="val"]表示匹配attr属性值以字符val开头的元素。

    <!-- 匹配 -->
    <div attr="val"></div>
    <!-- 不匹配 -->
    <div attr="text val"></div>
    <!-- 匹配 -->
    <div attr="value"></div>
    <!-- 匹配 -->
    <div attr="val-ue"></div>
    
    1
    2
    3
    4
    5
    6
    7
    8

    实际开发中,开头正则匹配属性选择器用得比较多的地方是判断<a>元素的链接地址类型,也可以用来显示对应的小图标。

  2. [attr$="val"]

    [attr$="val"]表示匹配attr属性值以字符val结尾的元素。

    <!-- 匹配 -->
    <div attr="val"></div>
    <!-- 匹配 -->
    <div attr="text val"></div>
    <!-- 不匹配 -->
    <div attr="value"></div>
    <!-- 不匹配 -->
    <div attr="val-ue"></div>
    
    1
    2
    3
    4
    5
    6
    7
    8

    在实际开发中,结尾正则匹配属性选择器用得比较多的地方是判断<a>元素的链接的文件类型,然后是显示对应的小图标。

  3. [attr*="val"]

    [attr*="val"]表示匹配attr属性值包含字符val的元素。

    <!-- 匹配 -->
    <div attr="val"></div>
    <!-- 匹配 -->
    <div attr="text val"></div>
    <!-- 匹配 -->
    <div attr="value"></div>
    <!-- 匹配 -->
    <div attr="val-ue"></div>
    
    1
    2
    3
    4
    5
    6
    7
    8

我们可以借助属性选择器来辅助我们实现搜索过滤效果,如通讯录、城市列表,这样做性能高,代码少。

<html>
<input type="search" id="input" placeholder="输入城市名称或拼音" />
<ul>
  <li data-search="重庆市chongqing">重庆市</li>
  <li data-search="哈尔滨市haerbing">哈尔滨市</li>
  <li data-search="长春市changchun">长春市</li>
  <li data-search="兰州市lanzhou">兰州市</li>
  <li data-search="北京市beijing">北京市</li>
  <li data-search="杭州市hangzhou">杭州市</li>
  <li data-search="长沙市changsha">长沙市</li>
  <li data-search="沈阳市shenyang">沈阳市</li>
  <li data-search="成都市chengdu">成都市</li>
  <li data-search="合肥市hefei">合肥市</li>
  <li data-search="天津市tianjin">天津市</li>
  <li data-search="西安市xian">西安市</li>
  <li data-search="武汉市wuhan">武汉市</li>
  <li data-search="济南市jinan">济南市</li>
  <li data-search="广州市guangzhou">广州市</li>
  <li data-search="南京市nanjing">南京市</li>
  <li data-search="上海市shanghai">上海市</li>
  <li data-search="昆明市kunming">昆明市</li>
  <li data-search="郑州市zhangzhou">郑州市</li>
  <li data-search="贵阳市guiyang">贵阳市</li>
  <li data-search="西宁市xining">西宁市</li>
  <li data-search="海口市haikou">海口市</li>
  <li data-search="南昌市nanchang">南昌市</li>
  <li data-search="香港 特区xianggang">香港 特区</li>
  <li data-search="澳门 特区aomen">澳门 特区</li>
</ul>

</html>

<script>
  let eleStyle = document.createElement('style');
  document.head.appendChild(eleStyle);
  // 文本框输入
  input.addEventListener("input", function () {
    let value = this.value.trim();
    eleStyle.innerHTML = value ? '[data-search]:not([data-search*="' + value + '"]) { display: none; }' : '';
  });
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

正则匹配运算符是属性选择器新增的运算符,它可以忽略属性值大小写,使用i作为运算符。

如选择器是[atty*="val" i],则:

<!-- 匹配 -->
<div attr="VAL"></div>
<!-- 匹配 -->
<div attr="Text val"></div>
<!-- 匹配 -->
<div attr="Value"></div>
<!-- 匹配 -->
<div attr="Val-ue"></div>
1
2
3
4
5
6
7
8
微信 支付宝
#CSS#CSS选择器
文章更新于: 2022/11/28 16:26:17
元素选择器
用户行为伪类

← 元素选择器 用户行为伪类→

最近更新
01
文档
02-03
02
前端面试学习
01-02
03
Markdown首行缩进
12-01
更多文章>
Theme by Vdoing | Copyright © 2020-2023 Manchan All rights reserved.
鄂ICP备2020015911-1号
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式