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. Kubernetes监控工具

    #镜像在谷歌上需要FQ#####################################监控工具#当前最新版本 heapster https://github.com/kubernetes/h ...

  2. java模拟生日发祝福

    1.新建customer表生日都选为当天 所需jar包 2.使用c3p0连接到数据的xml配置文件 3.连接数据库的工具类 package com.cc.birthday; import java.s ...

  3. Jquery实现下拉列表左右选择

    知识点: jquery  的 click dbclick  事件  appendTo方法 <!DOCTYPE html> <html> <head> <met ...

  4. 天猫首页迷思之－jquery实现左侧广告牌图片轮播

    本次要实现的是天猫首页每个楼层左侧的图片轮播效果.见图: 功能点有:点击右箭头向右滑动:点击左箭头向左滑动:什么都不点自动滑动. 1.实现样式.简单分析一下大概的html结构.一个大的div里面包含两 ...

  5. HDU 6351暴力枚举 6354计算几何

    Beautiful Now Time Limit: 5000/2500 MS (Java/Others)    Memory Limit: 262144/262144 K (Java/Others)T ...

  6. HDU 17新生赛 身份证验证【模拟】

    身份证验证 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submi ...

  7. linux 自动删除n天前文件

    现在系统每天生成一个日期文件夹,并压缩上传到ftp服务器,造成目录下文件太多,所以决定写个定时删除文件的任务 写脚本文件 find /home/data -mtime +90 -name " ...

  8. ttServer缓存的简单使用

    ttserver是一款 DBM 数据库,该数据库读写非常快,哈希模式写入100万条数据只需0.643秒,读取100万条数据只需0.773秒,是 Berkeley DB 等 DBM 的几倍.利用Toky ...

  9. IntelliJ IDEA插件-翻译插件

    说明:这个翻译插件应该是最好的了. 官网:https://github.com/YiiGuxing/TranslationPlugin 但是这个有个缺点就是使用收费的API,基于有道,截止今天使用的是 ...

  10. 基于CoreText的排版引擎

    前言 本人今年主要在负责猿题库iOS客户端的开发,本文旨在通过分享猿题库iOS客户端开发过程中的技术细节,达到总结和交流的目的. 这是本技术分享系列文章的第三篇.本文涉及的技术细节是:基于CoreTe ...