css3 ---2 属性的选择器
存在和值属性选择器1:[attr]:该选择器选择包含 attr 属性的所有元素,不论 attr 的值为何。
[name]{
background: pink;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>存在和值属性选择器</title>
<style type="text/css">
/*
[attr]:该选择器选择包含 attr 属性的所有元素,不论 attr 的值为何。
*/
[name]{
background: pink;
}
</style>
</head>
<body>
<div name="atguigu_llc">李立超</div>
<div name="atguigu_xfz">晓飞张</div>
<div name="atguigu_bhj">白浩杰</div>
<div name="atguigu_sym">腿长1米8</div>
<div>佟刚</div>
<div>陈雷</div>
<div>李贺飞</div>
</body>
</html>
存在和值属性选择器2:[attr=val]:该选择器仅选择 attr 属性被赋值为 val 的所有元素。
[name="atguigu_llc"]{
background: pink;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>存在和值属性选择器</title>
<style type="text/css">
/*
[attr=val]:该选择器仅选择 attr 属性被赋值为 val 的所有元素。
*/
[name="atguigu_llc"]{
background: pink;
}
</style>
</head>
<body>
<div name="atguigu_llc">李立超</div>
<div name="atguigu_xfz">晓飞张</div>
<div name="atguigu_bhj">白浩杰</div>
<div name="atguigu_sym">腿长1米8</div>
<div>佟刚</div>
<div>陈雷</div>
<div>李贺飞</div>
</body>
</html>
存在和值属性选择器3 :
[attr~=val]:该选择器仅选择 attr 属性的值(以空格间隔出多个值)中有包含 val 值的所有元素,
比如位于被空格分隔的多个类(class)中的一个类。
[name~="atguigu"]{
background: pink;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>存在和值属性选择器</title>
<style type="text/css">
/*
[attr~=val]:该选择器仅选择 attr 属性的值(以空格间隔出多个值)中有包含 val 值的所有元素,
比如位于被空格分隔的多个类(class)中的一个类。
*/
[name~="atguigu"]{
background: pink;
}
</style>
</head>
<body>
<div name="atguigu_llc atguigu">李立超</div>
<div name="atguigu_xfz">晓飞张</div>
<div name="atguigu_bhj atguigu">白浩杰</div>
<div name="atguigu_sym">腿长1米8</div>
<div>佟刚</div>
<div>陈雷</div>
<div>李贺飞</div>
</body>
</html>
存在和值属性选择器4:
[attr|=val] : 选择attr属性的值以val(包括val)或val-开头的元素
[attr^=val] : 选择attr属性的值以val开头(包括val)的元素。
[attr$=val] : 选择attr属性的值以val结尾(包括val)的元素。
[attr*=val] : 选择attr属性的值中包含字符串val的元素。
[name*="atguigu"]{
background: pink;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>存在和值属性选择器</title>
<style type="text/css">
/*
[attr|=val] : 选择attr属性的值以val(包括val)或val-开头的元素
[attr^=val] : 选择attr属性的值以val开头(包括val)的元素。
[attr$=val] : 选择attr属性的值以val结尾(包括val)的元素。
[attr*=val] : 选择attr属性的值中包含字符串val的元素。
*/
[name*="atguigu"]{
background: pink;
}
</style>
</head>
<body>
<div name="atguigu-llc atguigu">李立超</div>
<div name="atguigu-xfz">晓飞张</div>
<div name="atguigu-bhj atguigu">白浩杰</div>
<div name="atguigu_sym">腿长1米8</div>
<div>佟刚</div>
<div>陈雷</div>
<div>李贺飞</div>
</body>
</html>
css3 ---2 属性的选择器的更多相关文章
- css3的新特性选择器-------属性选择器
自己学css的时候比较乱,这次趁着复习把css3的新特性选择器和css2以前不怎么用的选择器做一个总结 <div id="parent"> <p>I'm a ...
- CSS3的属性选择器
CSS3中新增了许多选择器,今天零度给大家说说CSS3的属性选择器. 与CSS2相比,CSS3新增了3种属性选择器:[attr^=value].[attr$=value].[attr*=value]: ...
- CSS3常用30种选择器总结
CSS3常用30种选择器总结 HTML5/CSS3时尚的圆盘时钟动画 带当前日期 www.html5tricks.com/demo/html5-css3-clock-with-date/index.h ...
- CSS3常用属性
CSS是我们常用的控制网页样式和布局的一种标准. CSS3是最新的CSS标准. CSS3被拆分为"模块",旧的规范也已经拆分为小的块,同时还增加了新的属性. 一些比较重要的CSS3 ...
- css3新增属性API
写在前面:由于CSS5标准还未完全订下来,所以各种内核的浏览器都有自己的标准,为了不使属性混淆,所以各家在各自标准前加了一个前缀. -moz- 主要是firefox火狐 -webikt-主要是chr ...
- css3学习总结1--CSS3选择器
CSS3的属性选择器主要包括以下几种: 1. E[attr^="value"]:指定了属性名,并且有属性值,属性值是以value开头的: 2. E[attr$="valu ...
- css3新增加的选择器
css3新增加的选择器 一.属性选择器: E[attr] 只要有属性名E[attr=value] 属性名=属性值E[attr~=blue] 包含这个blue整个单词就可以E[attr^=c] 以这个字 ...
- css3部分属性兼容性别扭写法(因为很多我就叫他别扭了,希望全面早早支持css3吧)
/*圆角class,需要设置圆角的元素加上class名称*/ .roundedCorners{ -webkit-border-radius: 10px;/*webkit内核浏览器*/ -moz-bor ...
- 两点补充——CSS3新属性以及弹性布局
CSS3 新属性 一.[ CSS3新增属性前缀 ] 1.-webkit-:chrome/safari 2.-moz-:火狐 3.-mo-:IE 4.-o-: Opera 欧朋 二 .[CSS 长度单位 ...
随机推荐
- Python codecs小Tips
Python codecs小Tips 用codecs.open读进来的字符串都是unicode表示的.
- ionic-CSS:ionic checkbox(复选框)
ylbtech-ionic-CSS:ionic checkbox(复选框) 1.返回顶部 1. ionic checkbox(复选框) ionic 里面的 Checkbox 和普通的 Checkbox ...
- [转] undefined reference to `clock_gettime'
下面这个错误通常是因为链接选项里漏了-lrt,但有时发现即使加了-lrt仍出现这个问题,使用nm命令一直,会发现-lrt最终指向的文件 没有包含任何symbol,这个时候,可以找相应的静态库版本lib ...
- uoj118 【UR #8】赴京赶考
题目 不难发现我们直接走过去就行了 考虑到第\(i\)行的构造方法就是把\(b\)数组作为模板,每个数和\(a_i\)异或一下就可以了 于是不难发现对于一段连续相等的\(a\),它们在矩阵上就形成了完 ...
- coco2dx android package..
/Users/chong/Documents/engine/cocos2d-x-3.15.1/tools/cocos2d-console/bin/cocos compile -p android -m ...
- The linux command 之定制提示符
一.提示符分解 默认提示符如下所示: [me@linuxbox ~]$ 可以看出它包括我们的用户名.主机名.当前工作目录.提示符是由PS1变量定义的. [me@linuxbox ~]$ echo $P ...
- sql (9) COUNT
COUNT() 函数返回匹配指定条件的行数.语法SQL COUNT(column_name) 语法COUNT(column_name) 函数返回指定列的值的数目(NULL 不计入):新建表 Stude ...
- mySql搜索引擎
转载自 深入浅出mysql数据库 MySQL5.5以后默认使用InnoDB存储引擎,其中InnoDB和BDB提供事务安全表,其它存储引擎都是非事务安全表. 若要修改默认引擎,可以修改配置文件中的def ...
- Perl 基础语法
Perl 基础语法 Perl借用了C.sed.awk.shell脚本以及很多其他编程语言的特性,语法与这些语言有些类似,也有自己的特点. Perl 程序有声明与语句组成,程序自上而下执行,包含了循环, ...
- 阿里第一颗芯片问世,平头哥发布最强AI芯片含光800
阿里巴巴第一颗自研芯片正式问世.9月25日的杭州云栖大会上,达摩院院长张建锋现场展示了这款全球最强的AI芯片——含光800.在业界标准的ResNet-50测试中,含光800推理性能达到78563 IP ...