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各属性选择符区别的更多相关文章

  1. CSS属性选择符

    属性选择符: E[att] 选择具有att属性的E元素. <style type="text/css"> a[class]{ background-color: red ...

  2. #8.10.16总结# 属性选择符 伪对象选择符 CSS的常用样式

    属性选择符 E[att] E[att="val"] E[att~="val"] E[att^="val"] E[att$="val ...

  3. 强大的CSS 属性选择符 配合 stylish 屏蔽新浪微博信息流广告

    新建一条微博域名下的规则: @-moz-document domain("weibo.com") { #v6_pl_rightmod_rank,#v6_pl_rightmod_ad ...

  4. CSS知识点：选择符

    一.选择符的种类 1)通配选择符 它用来给页面所有的元素设置样式 *{margin:0;padding:0;}.但是实际当中不建议这么用,页面中用到了哪些样式,就统一设置样式,因为*影响性能.也可以给 ...

  5. CSS那些事儿-阅读随笔1（CSS简介与选择符）

    最近开始详细钻研CSS有关的知识,参考资料是<CSS那些事儿>.将把在此过程中的收获进行记录,方便以后的学习. 一.CSS简介 1.什么是CSS CSS全称为Cascading Style ...

  6. CSS3初学篇章_3（属性选择符/字体样式/元素样式）

    属性选择符  选择符  说明  E[att]  选择具有att属性的E元素.  E[att="val"]  选择具有att属性且属性值等于val的E元素.  E[att~=&quo ...

  7. CSS(二）选择符

     2019-04-11 22:14:23 1.类型选择符(标签选择符)  html中所有的标签都可以直接对元素选择  p em i a html body.....   特点:对页面中所有当前类型的元 ...

  8. css伪类选择符

    1):link/:visited/:hover/:active (爱恨原则 love/hate)2):first-child/:last-child/:only-child/:nth-child(n) ...

  9. 学习CSS记录：选择符优先级

    1.标有!important 关键字声明属性. 2.HTML中的CSS样式属性. 3.作者编辑的CSS文件模式属性. 4.用户设置的样式. 5.浏览器默认的样式. ------------------ ...

随机推荐

  1. yii上传图片、yii上传文件、yii控件activeFileField使用

    yii框架提供了activeFileField控件来完成上传文件(当然也包括了上传图片)的操作,下面介绍yii的activeFileField使用方法.1.函数原型:public static str ...

  2. leetcode-Min Cost Climbing Stairs

    题目: On a staircase, the i-th step has some non-negative cost cost[i] assigned (0 indexed). Once you ...

  3. [BZOJ1032][JSOI2007]祖码Zuma 区间dp

    1032: [JSOI2007]祖码Zuma Time Limit: 10 Sec  Memory Limit: 162 MB Submit: 1105  Solved: 576 [Submit][S ...

  4. AC日记——奶牛集会 洛谷 P2345

    奶牛集会 思路: 把奶牛按照v排序: 然后,每次都把奶牛放入一个集合s: 因为奶牛已经排序: 所以,每次第i次放入奶牛起作用的v就是vi: 每次ans+=(xi*sum-sumxl)*vi+(sumx ...

  5. HDU 6301.Distinct Values-贪心、构造字典序最小的数列 (2018 Multi-University Training Contest 1 1004)

    HDU6301.Distinct Values 这个题就是给你区间要求区间内的数都不相同,然后要求是字典序最小,直接贪心走一遍,但是自己写的时候,思路没有错,初始化写挫了... 将区间按左端点小的排序 ...

  6. Java this关键字详解

    this 关键字用来表示当前对象本身,或当前类的一个实例,通过 this 可以调用本对象的所有方法和属性.例如: public class Demo{ public int x = 10; publi ...

  7. log4j配置文件中的additivity属性

    它是 子Logger 是否继承 父Logger 的 输出源(appender)的标志位.具体说,默认情况下子Logger会继承父Logger的appender,也就是说子Logger会在父Logger ...

  8. 关于android主线程异常NetworkOnMainThread不能访问网络

    在Android开发中,如果你使用的是Android4.0以后,那你会发现,只要是写在主线程(就是Activity)中的HTTP请求,运行时都会报错,这是因为Android在4.0以后为了防止应用的A ...

  9. 分布式协调服务Zookeeper

    ZooKeeper是一个分布式的,开放源码的分布式应用程序协调服务,是Google的Chubby一个开源的实现,是Hadoop和Hbase的重要组件.它是一个为分布式应用提供一致性服务的软件,提供的功 ...

  10. Ubuntu 16.04使用“从互联网自动获取”时间无法写入硬件BIOS的奇怪问题

    目前发现的就是这个问题,只能手动同步到BIOS. 如果是手动设置过时间,那么可以正常同步到BIOS. 而如果切换到从互联网自动获取时间时,是不能同步到BIOS的,但是界面上的时间确实最新的. 并且这个 ...