Attribute Selectors(属性选择器)

  E[attr ~="val"]  E[attr |="val"]  E[attr ^="val"]  E[attr $="val"]  E[attr *="val"]

E[attr ~="val"]

  我们平常用的属性选择器是 E[data="a"],我们来看看他们两个有什么区别:

E[attr |="val"]  这个|是  \  这个键的|

  选择以val 开头的元素,以val开头的元素后面可以加-

E[attr ^="val"]  E[attr $="val"]

这两个选择器比较简单,我就放在一起讲了:

  E[attr ^="val"]  以 val 开头的

  E[attr $="val"]  以 val 结尾的

E[attr *="val"]

  里面只要包含着 val 就可以选中

css3系列之属性选择器的更多相关文章

  1. CSS3 01. CSS3现状、属性选择器、伪类选择器、结构伪类、伪元素选择器、颜色、文本阴影shadow、盒子模型、私有化前缀

    CSS 3 现状 兼容性差,需添加私有前缀/移动端优于PC端/不断改进中/渐进增强原则/考虑用户群体/遵照产品的方案 : CSS3手册 需要阅读其--阅读及使用指引 []表示全部的可选项 || 或者 ...

  2. css3新增的属性选择器

    使用css选择器,可以实现一个样式对应多个html文档的元素,在{}前面的部分就是"选择器",指明了样式的作用对象. 在CSS中追加了三个属性选择器:[att*=val].[att ...

  3. 晨读笔记:CSS3选择器之属性选择器

    一.属性选择器 1.E[foo^="bar"]:该属性选择器描述的是选择属性以bar开头的元素,如: //所有以名称g_开头的div的字体颜色为红色div[name^=" ...

  4. CSS3选择器之属性选择器

    一.属性选择器 1.E[foo^="bar"]:该属性选择器描述的是选择属性以bar开头的元素,如: //所有以名称g_开头的div的字体颜色为红色div[name^=" ...

  5. CSS3知识点总结----属性选择器

    1.E[attr]只使用属性名,但没有确定任何属性值 2.E[attr="value"]指定属性名,并指定了该属性的属性值 3.E[attr~="value"] ...

  6. css3 -- 属性选择器

    属性选择器: 1.CSS属性选择器 属性选择器E[attr="value"]{} 包含属性选择器E[attr~="value"]{} 2.CSS3的新属性选择器 ...

  7. 【前端开发系列】—— CSS3属性选择器总结

    想想自己为什么要学CSS,作为一个开发过前端的人员来说,调试一个图片花了半天的时间,最后发现分隔符用错了,实在是一件很丢人的事情.因此,痛下决心来学习CSS,最近一周也会更新下相关的学习笔记. CSS ...

  8. css3系列-2.css中常见的样式属性和值

    css3系列-2.css中常见的样式属性和值 继续上一篇文章的继续了解css的基础知识,关注我微信公众号:全栈学习笔记 css中常见的样式属性和值 字体与颜色 背景属性 文本属性 边框属性 内外边距 ...

  9. CSS3 选择器——属性选择器

    上一节在<CSS3选择器——基本选择器>中主要介绍了CSS3选择器的第一部分,这节主要和大家一起来学习CSS3选择器的第二部分——属性选择器.属性选择器早在CSS2中就被引入了,其主要作用 ...

随机推荐

  1. 缩略图调查——抖音客户端/PC/iphone

    最近对抖音有点上瘾,经常看到这样的视频列表: 由于抖音平台的限制,用户最多只能上传60s的视频,因此分段为3个视频.而在视频列表的缩略图模式下,三个视频的封面恰好组合成一张图像.这种方式比较符合审美标 ...

  2. Android测试工具 UIAutomator介绍

    UI Automator 测试工具定义以及用途 UI Automator 测试框架提供了一组 API,用于构建在用户应用和系统应用上执行交互的界面测试.通过 UI Automator API,您可以执 ...

  3. maven 的安装与环境变量配置

    在http://maven.apache.org下载maven安装包 一.Windows 1.解压压缩包: jar -xvf "D:/apache-maven-3.5.0-bin.zip&q ...

  4. Java 第三课 数组排序

    1.java.util.Arrays.sort(arr)  //升序 2.冒泡排序:相邻元素比较 for (int i=0; i <arr.length-1; i++){//内部遍历一次,确定最 ...

  5. origin添加两个Y轴

    1. 选中X和两个Y 2. 点击Double Y 3. 关掉gap to Symbol,否则Line+Symbol这种显示方式可能显示不出线条 ​

  6. STM32入门系列-GPIO工作模式及LED电路原理

    GPIO工作模式 由于GPIO内部的结构关系,决定了GPIO可配置成以下几种模式. 输入模式 在输入模式时,施密特触发器打开,输出被禁止.可通过输入数据寄存器GPIOx_IDR读取I/O状态.输入模式 ...

  7. JMeter实战(三) 界面使用

    JMeter 有 2 种运行方式,一种是 CLI,一种是 GUI,本篇文章就来介绍一下后者,图形用户界面,因为后续文章大部分都是基于 GUI 的. 本文演示的是英文版,想用中文的同学可以在菜单栏点击 ...

  8. python网络编程(TCP/IP、发邮件)

    TCP/IP 关注公众号"轻松学编程"了解更多. 计算机为了联网,就必须规定通讯协议,早期的计算机网络是由各个厂商规定的一些协议,他们之间互不兼容. 为了把全世界的电脑能够连接到一 ...

  9. mysql运维-slave_skip_errors

    1 简介    mysql在主从复制过程中,由于各种的原因,从服务器可能会遇到执行BINLOG中的SQL出错的情况,在默认情况下,服务器会停止复制进程,不再进行同步,等到用户自行来处理.    sla ...

  10. python开发基础(二)常用数据类型调用方法

    1 数字: int 2 3 int : 转换,将字符串转化成数字 4 num1 = '123' 5 num2 = int (a) 6 numadd = num2 +1000 7 print(num2) ...