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. Fiddler抓包11-HTTPS证书Actions无法导出问题【转载】

    本篇转自博客:上海-悠悠 原文地址:http://www.cnblogs.com/yoyoketang/tag/fiddler/ 前言 在点Actions时候出现Export Failed:The r ...

  2. kylin

    Kylin只能导入扁平化的Hive表,简而言之,其不支持Hive的复杂数据类型,如array.struct.map等

  3. Codeforces 938D Buy a Ticket （转化建图 + 最短路）

    题目链接  Buy a Ticket 题意   给定一个无向图.对于每个$i$ $\in$ $[1, n]$, 求$min\left\{2d(i,j) + a_{j}\right\}$ 建立超级源点$ ...

  4. hiho一下第133周 2-SAT·hihoCoder音乐节(2-SAT)(强连通)

    2-SAT·hihoCoder音乐节 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 hihoCoder音乐节由hihoCoder赞助商大力主办,邀请了众多嘉宾和知名乐队 ...

  5. 最基础的java

    一．Window中常见的dos命令 在哪里操作dos命令: Win7 ---> 开始  ---->所有程序--->附件---->命令提示符 Win7-->  开始  -- ...

  6. BZOJ2038 [2009国家集训队]小Z的袜子(hose)（莫队算法）

    神奇的莫队算法,用来解决可离线无修改的区间查询问题: 首先对原序列进行分块,√n块每块√n个: 然后对所有查询的区间[l,r]进行排序,首先按l所在的块序号升序排序,如果一样就按r升序排序: 最后就按 ...

  7. POJ 2109 Inner Vertices（扫描线+树状数组）

    [题目链接] http://poj.org/problem?id=3109 [题目大意] 在一个棋盘上放满白子,现在把一些白子变成黑子, 如果一个白子上下左右都有黑子,就会变成黑子,问最终黑子个数 [ ...

  8. Eclipse使用Debug模式调试Spring Boot项目时跳转到exitCurrentThread的问题

    Spring Boot项目使用了spring-boot-devtools工具且在Eclipse中Debug调试会自动跳转到这个方法: public static void exitCurrentThr ...

  9. sqlserver日志文件缩小

    原文:sqlserver日志文件缩小        最近装了个500g的固态硬盘,导入我原来的数据库后发现有60多个G的内存不见了, 最后发现我的某个数据库有60多个G的日志文件(.ldf文件)文件, ...

  10. java中终止线程的三种方式

    在java中有三种方式可以终止线程.分别为: 1.  使用退出标志,使线程正常退出,也就是当run方法完成后线程终止.  2.  使用stop方法强行终止线程(这个方法不推荐使用,因为stop和sus ...