CSS各属性选择符区别
CSS2.1:
ele[attribute] 匹配具有属性attribute的ele元素。
ele[attribute = value] 匹配具有属性attribute且值为value的元素。
ele[attribute ~= value] 匹配具有属性attribute且其中一个值为value的元素。(多个值用空格隔开)
ele[attribute |= value] 匹配具有属性attribute且其中一个值为value的元素或者以"value-"开头的ele元素。
CSS3:
ele[attribute ^= val] 匹配具有属性attribute且值以val开头的元素。
ele[attribute
$= val] 匹配具有属性attribute且值以val结束的元素。
ele[attribute
*= val] 匹配具有属性attribute且值以包含val的元素。
见代码：
<!DOCTYPE html>
<html>
<head>
<style>
[lang~=china]
{
background:yellow;
} [lang|=english]
{
background:red;
} [lang^=au]
{
background:green;
} [lang$=en]
{
background:gray;
} [lang*=lo]
{
background:blue;
} </style>
</head> <body>
<p lang="china">Hello!</p>
<p lang="english-1">Hi!</p>
<p lang="aus">Ello!</p>
<p lang="us-en">Hi!</p>
<p lang="color">nihao!</p> <p><b>注释：</b>对于 IE8 及更早版本的浏览器中的 [attribute|=value]，必须声明 <!DOCTYPE>。</p> </body>
</html>
效果图：
CSS各属性选择符区别的更多相关文章
- CSS属性选择符
属性选择符: E[att] 选择具有att属性的E元素. <style type="text/css"> a[class]{ background-color: red ...
- #8.10.16总结# 属性选择符 伪对象选择符 CSS的常用样式
属性选择符 E[att] E[att="val"] E[att~="val"] E[att^="val"] E[att$="val ...
- 强大的CSS 属性选择符 配合 stylish 屏蔽新浪微博信息流广告
新建一条微博域名下的规则: @-moz-document domain("weibo.com") { #v6_pl_rightmod_rank,#v6_pl_rightmod_ad ...
- CSS知识点：选择符
一.选择符的种类 1)通配选择符 它用来给页面所有的元素设置样式 *{margin:0;padding:0;}.但是实际当中不建议这么用,页面中用到了哪些样式,就统一设置样式,因为*影响性能.也可以给 ...
- CSS那些事儿-阅读随笔1（CSS简介与选择符）
最近开始详细钻研CSS有关的知识,参考资料是<CSS那些事儿>.将把在此过程中的收获进行记录,方便以后的学习. 一.CSS简介 1.什么是CSS CSS全称为Cascading Style ...
- CSS3初学篇章_3（属性选择符/字体样式/元素样式）
属性选择符 选择符 说明 E[att] 选择具有att属性的E元素. E[att="val"] 选择具有att属性且属性值等于val的E元素. E[att~=&quo ...
- CSS(二）选择符
2019-04-11 22:14:23 1.类型选择符(标签选择符) html中所有的标签都可以直接对元素选择 p em i a html body..... 特点:对页面中所有当前类型的元 ...
- css伪类选择符
1):link/:visited/:hover/:active (爱恨原则 love/hate)2):first-child/:last-child/:only-child/:nth-child(n) ...
- 学习CSS记录：选择符优先级
1.标有!important 关键字声明属性. 2.HTML中的CSS样式属性. 3.作者编辑的CSS文件模式属性. 4.用户设置的样式. 5.浏览器默认的样式. ------------------ ...
随机推荐
- vue-cli 3.0脚手架与vux的配合使用
在最近的项目中,引用了vux,在可拓展性以及复用性,都算是比较优秀的框架了.但是美中不足的是对于vux在对于vue-cli3.0的跟进还没有同步 需要自己做下修改,同比 有赞的vant 以及 ivie ...
- 如何让natTable表格支持自定义多个右键菜单
在nebula中,官方默认提供了一个构造natTable的builder类,并且提供了一个debugInfo的默认右键菜单,但是当我们通过官方提供的builder去创建natTable,并且要添加多个 ...
- Android 利用Sharp样式设置文本框EditText圆角形状
1.首先新建样式文件editsharp.xml: <?xml version="1.0" encoding="utf-8"?> <shape ...
- 51nod 1649.齐头并进-最短路(Dijkstra)
1649 齐头并进 题目来源: CodeForces 基准时间限制:1 秒 空间限制:131072 KB 分值: 10 难度:2级算法题 在一个叫奥斯汀的城市,有n个小镇(从1到n编号),这些小镇通过 ...
- HDU 5915 The Fastest Runner Ms. Zhang （CCPC2016 长春 E题，分类讨论 + 求字典序最小的直径 + 数据结构寻找最小值）
题目链接 CCPC2016 Changchun Problem E 题意 给定一个$n$个点$n$条边的无向图,现在从某一点$s$出发,每个点都经过一遍,最后在$t$点停止,经过的边数为$l$ ...
- poj2976（01分数规划）
poj2976 题意 给出 a b 数组,一共 n 对数,其中最多可以去掉 k 对,问怎样使剩下比率(原始比率是 $ \frac{\sum_{i=1}^{n} a}{\sum_{i=1}^{n} b} ...
- Java笔记：JDK安装小问题
昨天在实验室的Windows机器上安JDK,环境变量什么的都配好了,Java -version也没有问题,但是一运行Javac编译就会出现java/lang/NoClassDefFoundError: ...
- 拓扑排序【p1137】 旅行计划
Description 小明要去一个国家旅游.这个国家有\(N\)个城市,编号为\(1\)至\(N\),并且有\(M\)条道路连接着,小明准备从其中一个城市出发,并只往东走到城市\(i\)停止. 所以 ...
- 使用after伪类，配合IE的zoom或者overflow清除浮动
用after伪类实现,兼容多种浏览器:.clearfix:after {content:"."; display:block; height:0; clear:both; visi ...
- 1.14（java学习笔记）数组
假如我们需要用到1000个相同类型的数据,肯定不可能创建1000个变量, 这样既不方便,也不直观,也不便于我们使用.这时就需要用到数组. 一.数组的声明与使用 public class Array { ...