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.浏览器默认的样式. ------------------ ...
随机推荐
- Kotlin来了
kotlin优点(主要是代码简洁度) 1.避免空指针异常,其次在一个文件中java方法必须写在class里面,而kotlin则没要求 2.在同一个文件中,有class a则不允许在class外的方法( ...
- MyBatis学习总结（一）mybatis与spring整合
MyBatis学习总结(一)mybatis与spring整合 一.需要的jar包 1.spring相关jar包 2.Mybatis相关的jar包 3.Spring+mybatis相关jar包 4.My ...
- UVA 1593: Alignment of Code(模拟 Grade D)
题意: 格式化代码.每个单词对齐,至少隔开一个空格. 思路: 模拟.求出每个单词最大长度,然后按行输出. 代码: #include <cstdio> #include <cstdli ...
- hdu 5163(前缀和+分类讨论)
Taking Bus Time Limit: 10000/5000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total ...
- VirtualBox安装部署的Ubuntu16.04的步骤
1.下载ubuntu16.04镜像 http://cn.ubuntu.com/download/ 以及虚拟机软件VirtualBox https://www.virtualbox.org/wiki/D ...
- block方法加入无效的问题
+(LDLabel *)labelWithFrame:(CGRect)frame withTitle:(NSString *)title withFont:(float)font withtextCo ...
- POJ 1833 排列【STL/next_permutation】
题目描述: 大家知道,给出正整数n,则1到n这n个数可以构成n!种排列,把这些排列按照从小到大的顺序(字典顺序)列出,如n=3时,列出1 2 3,1 3 2,2 1 3,2 3 1,3 1 2,3 2 ...
- hdu5884（多叉哈夫曼树）
hdu5884 题意 给出 n 个数,每次选择不超过 k 个数合并(删掉这些数,加入这些数的和),花费为合并的这些数的和,要求最后只剩下一个数,问 k 最小取多少. 分析 二分 k,合并数的时候可以按 ...
- Cookie和Session在Node.JS中的实践（三）
Cookie和Session在Node.JS中的实践(三) 前面作者写的COOKIE篇.SESSION篇,算是已经比较详细的说明了两者间的区别.机制.联系了.阅读时间可能稍长,因为作者本身作图也做了不 ...
- SQLServer To MySQL 解决方案
最近在忙一个项目,就不详写了.过两天不忙了把项目总结一下. 思路: Access作为桥梁 1.SQLServer To Access 2007 在access里直接导入 2.Use t ...