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. 中国大陆无法访问Steve Purcell的emacs配置解决办法

    因为大陆网络问题,没办法访问Steve Purcell的emacs配置中的melpa.org,所以我们更改目录即可. 1.删除自己的配置. $ rm ~/.emacs $ rm -rf ~/.emac ...

  2. 我从16ASPX上下了一个程序在运行时出错是怎么回事？运行时出现用户SA登陆失败，但是我已经把数据库导入SQL

    如果你账号密码正确,那你可能没有打开你的管线服务,或者没有配置好你的客户端

  3. UVA 11396 Claw Decomposition 染色

    原题链接:https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem ...

  4. Java中堆和栈有什么区别

    stack 和 heep 都是内存的一部分stack 空间小,速度比较快, 用来放对象的引用heep 大,一般所有创建的对象都放在这里. 栈(stack):是一个先进后出的数据结构,通常用于保存方法( ...

  5. 关于spring.net的面向切面编程 (Aspect Oriented Programming with Spring.NET)-切入点（pointcut）API

    本文翻译自Spring.NET官方文档Version 1.3.2. 受限于个人知识水平,有些地方翻译可能不准确,但是我还是希望我的这些微薄的努力能为他人提供帮助. 侵删. 让我们看看 Spring.N ...

  6. sql server 性能调优 资源等待之内存瓶颈的三种等待类型

    原文:sql server 性能调优 资源等待之内存瓶颈的三种等待类型 一.概述 这篇介绍Stolen内存相关的主要三种等待类型以及对应的waittype编号,CMEMTHREAD(0x00B9),S ...

  7. lrc 校验码 ascii 格式

    lrc 校验码  ascii 格式 将adr1 (站号)至最后一个数据内容相加,得到结果以256为单位,超出部分去除(如得到的结果为16#128H则只取28H,) 然后计算二次反补得到后的结果即为侦误 ...

  8. Vue + Webpack + Vue-loader 系列教程

    http://www.cnblogs.com/terry01/p/5953464.html 介绍 Vue-loader 是什么? vue-loader 是一个加载器,能把如下格式的 Vue 组件转化成 ...

  9. CM3大礼包

  10. JAVA常见算法题(七)

    package com.xiaowu.demo; /** * 输入一行字符,分别统计出其中英文字母.空格.数字和其它字符的个数. * * @author WQ * */ public class De ...