css3系列之属性选择器
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系列之属性选择器的更多相关文章
- CSS3 01. CSS3现状、属性选择器、伪类选择器、结构伪类、伪元素选择器、颜色、文本阴影shadow、盒子模型、私有化前缀
CSS 3 现状 兼容性差,需添加私有前缀/移动端优于PC端/不断改进中/渐进增强原则/考虑用户群体/遵照产品的方案 : CSS3手册 需要阅读其--阅读及使用指引 []表示全部的可选项 || 或者 ...
- css3新增的属性选择器
使用css选择器,可以实现一个样式对应多个html文档的元素,在{}前面的部分就是"选择器",指明了样式的作用对象. 在CSS中追加了三个属性选择器:[att*=val].[att ...
- 晨读笔记:CSS3选择器之属性选择器
一.属性选择器 1.E[foo^="bar"]:该属性选择器描述的是选择属性以bar开头的元素,如: //所有以名称g_开头的div的字体颜色为红色div[name^=" ...
- CSS3选择器之属性选择器
一.属性选择器 1.E[foo^="bar"]:该属性选择器描述的是选择属性以bar开头的元素,如: //所有以名称g_开头的div的字体颜色为红色div[name^=" ...
- CSS3知识点总结----属性选择器
1.E[attr]只使用属性名,但没有确定任何属性值 2.E[attr="value"]指定属性名,并指定了该属性的属性值 3.E[attr~="value"] ...
- css3 -- 属性选择器
属性选择器: 1.CSS属性选择器 属性选择器E[attr="value"]{} 包含属性选择器E[attr~="value"]{} 2.CSS3的新属性选择器 ...
- 【前端开发系列】—— CSS3属性选择器总结
想想自己为什么要学CSS,作为一个开发过前端的人员来说,调试一个图片花了半天的时间,最后发现分隔符用错了,实在是一件很丢人的事情.因此,痛下决心来学习CSS,最近一周也会更新下相关的学习笔记. CSS ...
- css3系列-2.css中常见的样式属性和值
css3系列-2.css中常见的样式属性和值 继续上一篇文章的继续了解css的基础知识,关注我微信公众号:全栈学习笔记 css中常见的样式属性和值 字体与颜色 背景属性 文本属性 边框属性 内外边距 ...
- CSS3 选择器——属性选择器
上一节在<CSS3选择器——基本选择器>中主要介绍了CSS3选择器的第一部分,这节主要和大家一起来学习CSS3选择器的第二部分——属性选择器.属性选择器早在CSS2中就被引入了,其主要作用 ...
随机推荐
- CF1430 D. String Deletion(div 2)
题目链接:http://codeforces.com/contest/1430/problem/D 题意:有一个长度为n(n<=2*10^5)的01字符串,每轮操作有两步: 第一步是删去字符串中 ...
- Nexus3常用功能备忘
欢迎访问我的GitHub https://github.com/zq2599/blog_demos 内容:所有原创文章分类汇总及配套源码,涉及Java.Docker.Kubernetes.DevOPS ...
- 前后端分离Java后端主流开发环境框架20200622
开发环境: IDE:IntelliJ IDEA 2017+ DB: mysql5.7.4.PostgreSQL.mongoDB.redis JDK:JDK1.8+ Maven:Maven 3.2.3+ ...
- 给html添加图标
<link rel="icon" type="image/ico" href="images/favicon.ico" />
- MySQL主主模式+Keepalived高可用
今天闲来无事,打算搭建一个MySQL的高可用架构,采用的是MySQL的主主结构,再外加Keepalived,对外统一提供虚IP.先来说说背景吧,现在的项目为了高可用性,都是避免单节点的存在的,比如,我 ...
- 教你如何使用github+jsDelivr搭建免费图床
前言 之前写了一篇文章,教你如何使用Typora+PicGo实现图片自动上传到图床 . 这里我用的是七牛图床,七牛图床有一定的免费使用量(没记错的话应该是10个G),如果你的存储量超过这个大小就需要付 ...
- python实现类的多态
多态 关注公众号"轻松学编程"了解更多. 1.多态使用 一种事物的多种体现形式,举例:动物有很多种 注意: 继承是多态的前提 函数重写就是多态的体现形式 演示:重写Animal类 ...
- js 元素添加多个监听
function addListener(element,e,fn){ if(element.addEventListener){ element.addEventListen ...
- Android Google官方文档解析之——System Permissions
Android is a privilege-separated operating system, in which each application runs with a distinct sy ...
- leetcode111:combination-sum
题目描述 给出一组候选数C和一个目标数T,找出候选数中加起来和等于T的所有组合. C中的数字在组合中可以被无限次使用 注意: 题目中所有的数字(包括目标数T)都是正整数 你给出的组合中的数字 (a 1 ...