平常我们是不加引号的:

HTML:
<div data-a='aq1'>99</div>

CSS:

[data-a=aq1]{
    color: #f00;
}
想加上也行,单双引号都可以

但是意外发现,如果属性值是数字则需要引号,双引号、单引号都可以

HTML:

<div data-a='1'>单引号双引号随便</div>

CSS:
[data-a='1']{
/*单引号双引号随便 反正得有*/
    color: #f00;
}

综上,加上的话更保险。如果还发现特殊情况,会继续补充。暂时还没有去查找为什么。

css 属性选择器需要加引号吗的更多相关文章

  1. CSS 属性选择器的深入挖掘

    CSS 属性选择器,可以通过已经存在的属性名或属性值匹配元素. 属性选择器是在 CSS2 中引入的并且在 CSS3 中得到了很好拓展.本文将会比较全面的介绍属性选择器,尽可能的去挖掘这个选择器在不同场 ...

  2. IE7浏览器下CSS属性选择器二三事

    一.为何专门说起IE7 以前,或者说数年前,我们从事桌面端网页开发的时候,基本上都还要兼顾IE6浏览器, 即使有些特性,IE7支持,我们也会忽略之.于是,我们会不自然地把IE6和IE7浏览器归为一路货 ...

  3. CSS:CSS 属性 选择器

    ylbtech-CSS:CSS 属性 选择器 1.返回顶部 1. CSS 属性 选择器 具有特定属性的HTML元素样式 具有特定属性的HTML元素样式不仅仅是class和id. 注意:IE7和IE8需 ...

  4. CSS 属性选择器 ~=, |=, ^=, $=, *= 的区别

    CSS 属性选择器 ~=, |=, ^=, $=, *= 的区别 总结: "value 是完整单词" 类型的比较符号: ~=, |= "拼接字符串" 类型的比较 ...

  5. 使用这些 CSS 属性选择器来提高前端开发效率

    属性选择器非常神奇.它们可以使你摆脱棘手的问题,帮助你避免添加类,并指出代码中的一些问题.但是不要担心,虽然属性选择器非常复杂和强大,但是它们很容易学习和使用.在本文中,我们将讨论它们是如何运行的,并 ...

  6. CSS属性选择器温故-4

    1.属性选择器就是通过元素属性来找到元素 2.属性选择器语法 CSS3遵循了惯用的编码规则,通配符的使用提高了样式表的书写效率,也使CSS3的属性选择器更符合编码习惯 3.浏览器兼容性 CSS选择器总 ...

  7. CSS 属性选择器(八)

    一.属性选择器 属性选择使用中括号进行标识,中括号内包含属性名,属性值或者属性表达式 如h1[title],h1[title="Logon"], 二.属性选择器分类 2.1.匹配属 ...

  8. CSS笔记(二)CSS属性选择器

    对带有指定属性的HTML元素设置样式. 参考: http://www.w3school.com.cn/css/css_syntax_attribute_selector.asp 选择器 描述 [att ...

  9. 前端学习 -- Css -- 属性选择器

    属性选择器:根据元素的属性选择指定元素 语法:[属性名] 选取含有指定属性的元素 [属性名="属性值"]:选取属性值等于指定值的元素 [属性名^="属性值"]: ...

  10. css 属性选择器

    css2的属性选择器 1.[class~="flower"]:选中有flower的class class="flower ss" class="ss ...

随机推荐

  1. python Flask 操作数据库(2)

    单表操作 数据准备 from flask import Flask from flask_sqlalchemy import SQLAlchemy class Config: DEBUG = True ...

  2. 基于 Traefik 的激进 TLS 安全配置实践

    前言 Traefik是一个现代的HTTP反向代理和负载均衡器,使部署微服务变得容易. Traefik可以与现有的多种基础设施组件(Docker.Swarm模式.Kubernetes.Marathon. ...

  3. [seaborn] seaborn学习笔记6-热图HEATMAPPLOT

    6 热图Heatmapplot(代码下载) 热图是指通过将矩阵单个的值表示为颜色的图形表示.热力图显示数值数据的一般视图非常有用,制作热图很简单,且不需要提取特定数据点.在seaborn中使用heat ...

  4. [sklearn] 决策树、随机森林、隐马尔可夫模型

    决策树 决策树(Decision Tree)是一种用于处理分类和回归问题的无监督学习算法.如下图所示为某女青年在某相亲网站的相亲决策图.这幅图描述的都是一个非常典型的决策树模型. 通过对其相亲决策的分 ...

  5. CentOS7升级Linux内核

    CentOS7升级Linux内核 什么是Linux内核 虽然时候使用 Linux 来表示整个操作系统,严格地说,Linux 只是个内核,而发行版的操作系统是一个完整功能的系统,它建立在内核之上,具有各 ...

  6. centos搭建neo4j环境(含java)2021_12

    限centos neo4j与java下载: 链接:https://pan.baidu.com/s/1ei15dROGy3OwJfbislxH7g 提取码:8B3A   下载后 1.在linux中建立文 ...

  7. LinkedList集合-Vector集合

    LinkedList集合 java.util.LinkedList集合数据存储的结构是链表结构.方便元素添加.删除的集合.LinkedList是一个双向链表,那么双向链表是什么样子的呢,我们用个图了解 ...

  8. Unity3D——鼠标双击

    Unity之鼠标双击 小黑终于又回到公司了! 能在公司安生的待段时间了,今天更新一篇吧! 懒惰的小黑给大家分享个好东西吧,解决双击之痛! 前言 小黑相信有许多人和我一样.万年不会碰到一个需求:双击!可 ...

  9. 【分析笔记】SiliconLabs EFR32BG22 Bluetooth Mesh SensorClient 源码分析

    硬件环境: SLTB010A(BRD4184A Rev A02 / EFR32BG22C224F512IM40) 软件环境: SimplicityStudio5/gecko_sdk_3.2.3 分析工 ...

  10. 论文翻译:2022_PercepNet+: A Phase and SNR Aware PercepNet for Real-Time Speech Enhancement

    博客地址:凌逆战 (转载请注明出处) 论文地址:PercepNet+: 用于实时语音增强的相位和信噪比感知 PercepNet 引用格式: Ge X, Han J, Long Y, et al. Pe ...