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. Golang/Go语言/Go IDE/Go windows环境搭建/Go自动提示编译器/GoSublime

    Go是Google开发的一种编译型,并发型,并具有垃圾回收功能的编程语言. 罗伯特·格瑞史莫(Robert Griesemer),罗勃·派克(Rob Pike)及肯·汤普逊于2007年9月开始设计Go ...

  2. 华为上机测试题（Excel表格纵列字母数字转换-java）

    PS:这是我刚做的一道题,题目不难,满分60,得分40,大家看看哪里有问题,欢迎提意见,感谢! /* * 题目:Excel表格纵列字母数字转换 * 描述: 在Excel中列的编号为A-Z,AA-AZ, ...

  3. 右上角X灰化

    CMenu* menu = this->GetSystemMenu(FALSE); menu->EnableMenuItem(SC_CLOSE, MF_BYCOMMAND | MF_GRA ...

  4. Appium+python自动化10-AVD 模拟器【转载】

    前言 有些小伙伴没android手机,这时候可以在电脑上开个模拟器玩玩 一.模拟器配置 1.双击启动AVD Manager,进入配置界面

  5. iOS手势UIGestureRecognizer的使用失效问题

    问题:视图正常展示在界面中,父层是放在window上的,底部的一个控件的点击事件失效(所有设置都正常) 解决思路:虽然视图能够正常展示,但是发现父类视图的底部尺寸比子类的视图的尺寸小,也就是说上层视图 ...

  6. Ubuntu下触控板手势调节软件xSwipe

    楼主进了一台Thinkpad T450s,触控板支持4点触控,安装了ubuntu14.04 LTS之后,触控板只剩下双指滑动了,略有不爽,各种google,百度. 真找到办法了. 首先得知了touch ...

  7. #请用索引取出下面list的指定元素：

    #!/usr/bin/python # -*- coding: utf-8 -*- L = [ ['Apple', 'Google', 'Microsoft'], ['Java', 'Python', ...

  8. 每天一个liunx命令4之 ps -ef ,ps -aux ,ps aux

    1ps aux和ps –aux 请注意"ps -aux"不同于"ps aux".POSIX和UNIX的标准要求"ps -aux"打印用户名为 ...

  9. intel 硬盘加速技术

    Intel Smart Response Technology 混合硬盘技术 Intel Rapid Storage Technology SERVER:

  10. 国内 docker 仓库镜像对比

    http://www.datastart.cn/tech/2016/09/28/docker-mirror.html