CSS3选择器详解

来源：互联网发布：怎么让访客网络不影响编辑：程序博客网时间：2024/06/06 03:42

一、CSS3选择器分类
1.基本选择器
2.层次选择器
3.伪类选择器
1）动态伪类选择器
2）目标伪类选择器
3）语言伪类选择器
4）UI元素状态伪类选择器
5）结构伪类选择器
6）否定伪类选择器
4.伪元素
5.属性选择器

二、基本选择器语法
这里写图片描述
这里着重说一下群组选择器（selector1,selector2,…,selectorN）,是将有相同样式的元素分组在一起，每个选择器之间用逗号隔开，表示规则中包含多个不同的选择器，省去逗号的话就变成了后代选择器。

三、层次选择器语法
这里写图片描述

1.后代选择器（E F）
也称包含选择器，作用是选择元素E的所有后代元素F，F不管是E的子元素，孙辈元素，或更深层次关系，都被选中。
实例：
效果如图：
这里写图片描述
代码如下：

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>无标题文档</title><style type="text/css"> *{margin:0;padding:0;}body{    width:300px;    margin:0 auto;}div{    margin:5px;    padding:5px;    border:1px solid #ccc;}div div{    background:orange;}</style></head><body><div>1</div><div>2</div><div>3</div><div>4    <div>5</div>    <div>7</div></div><div>7    <div>8        <div>9            <div>10</div>        </div>    </div></div></body></html>

2.子选择器（E>F)
只能选择某元素的子元素。
实例：
样式表中增加一条：

body>div{    background: green;}

效果如图：
这里写图片描述

3.相邻兄弟选择器（E+F）
效果如图：
这里写图片描述
代码如下：

<style type="text/css"> *{margin:0;padding:0;}body{    width:300px;    margin:0 auto;}div{    margin:5px;    padding:5px;    border:1px solid #ccc;}div div{    background:orange;}body>div{    background: green;}.active + div{    background:red;}</style></head><body><div class="active">1</div><!--为了说明相邻兄弟选择器，在此处添加一类名active --><div>2</div><div>3</div><div>4    <div>5</div>    <div>7</div></div><div>7    <div>8        <div>9            <div>10</div>        </div>    </div></div></body>

4、通用兄弟选择器（E~F）
效果如图：
这里写图片描述
添加如下样式代码：

.active ~ div{    background:yellow;}

三、伪类选择器
1.动态伪类选择器：
动态伪类并不存在与html中，只有当用户和网站交互的时候才体现出来。
动态伪类包含两种：一种是在链接中常看到的锚点伪类，
另一种是用户行为伪类。
详细说明如下所示：
这里写图片描述
实战：美化按钮
效果如图：正常，悬浮和点击状态的变化

代码如下：

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>无标题文档</title><style type="text/css"> .download-info{    text-align:center;}/*默认状态下按钮效果*/.btn{    background-color:#0074cc;    *background-color:#0055cc; /*css hack 写法，用于特定浏览器识别*/    /*CSS#渐变制作背景图片*/    background-image: -ms-linear-gradient(top;#0088cc,#0055cc);    background-image: -webkit-gradient(linear,0 0,0 100%,from(#0088cc),to(#0055cc));    background-image: -webkit-linear-gradient(top,#0088cc,#0055cc);    background-image: -o-linear-gradient(top,#0088cc,#0055cc);    background-image: -moz-linear-gradient(top,#0088cc,#0055cc);    background-image: linear-gradient(top,#0088cc,#0055cc);    background-repeat:repeat-x;    display:inline-block;    *display:inline;    border:1px solid #cccccc;    *border:0;    border-color:#ccc;    /*CSS3的色彩模块*/    border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);    border-radius:6px;    color:#ffffff;    cursor:pointer;/*cursor规则是设定网页浏览时用户鼠标指针的样式，也就是鼠标的图形形状*/    font-size:20px;    font-weight:normal;    filter: progid:dximagetransform.microsoft.gradient(startColorstr='#0088cc',endColorstr='#0055cc',GradientType=0);/*这一句代码是ie自带滤镜的渐变效果，渐变开始的颜色是#ffffff，结束的颜色是#ECE9D8，gradientType=0表示纵向淅变，如果把它改成1就是横向渐变~~*/    filter: progid:dximagetransform.microsoft.gradient(enable=false);    line-height:normal;    padding:14px 24px;    text-align:center;    /*CSS3文字阴影特性*/    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);    text-decoration:none;    vertical-align:middle;    *zoom:1;/*css中的zoom的作用1、检查页面的标签是否闭合不要小看这条，也许折腾了你两天都没有解决的 CSS BUG 问题，却仅仅源于这里。毕竟页面的模板一般都是由开发来嵌套的，而他们很容易犯此类问题。快捷提示：可以用 Dreamweaver 打开文件检查，一般没有闭合的标签，会黄色背景高亮。　　2、样式排除法有些复杂的页面也许加载了 N 个外链 CSS 文件，那么逐个删除 CSS 文件，找到 BUG 触发的具体 CSS 文件，缩小锁定的范围。　　对于刚才锁定的问题 CSS 样式文件，逐行删除具体的样式定义，定位到具体的触发样式定义，甚至是具体的触发样式属性。　　3、模块确认法有时候我们也可以从页面的 HTML 元素出发。删除页面中不同的 HTML 模块，寻找到触发问题的 HTML 模块。　　4、检查是否清除浮动其实有不少的 CSS BUG 问题是因为没有清除浮动造成的。养成良好的清除浮动的习惯是必要的，推荐使用 无额外 HTML 标签的清除浮动的方法（尽量避免使用 overflow:hidden;zoom:1 的类似方法来清除浮动，会有太多的限制性）。　　5、检查 IE 下是否触发 haslayout很多的 IE 下复杂 CSS BUG 都与 IE 特有的 haslayout 息息相关。熟悉和理解 haslayout 对于处理复杂的 CSS BUG 会事半功倍。推荐阅读 old9 翻译的 《On having layout》（如果无法翻越穿越伟大的 GFW，可阅读 蓝色上的转帖 ）快捷提示：如果触发了 haslayout，IE 的调试工具 IE Developer Toolbar 中的属性中将会显示 haslayout 值为 -1。　　6、边框背景调试法故名思议就是给元素设置显眼的边框或者背景（一般黑色或红色），进行调试。此方法是最常用的调试 CSS BUG 的方法之一，对于复杂 BUG 依旧适用。经济实惠还环保^^最后想强调一点的是，养成良好的书写习惯，减少额外标签，尽量语义，符合标准，其实可以为我们减少很多额外的复杂 CSS BUG，更多的时候其实是我们自己给自己制造了麻烦*/}/*悬浮状态下按钮效果*/.btn:hover{    background-position: 0 -15px;    background-color: #0055cc;    *background-color:#004ab3;    color:#ffffff;    text-decoration:none;/*这个属性允许对文本设置某种效果，如加下划线。*/    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);    /*css3动画效果*/    -webkit-transition: background-position 0.1s linear;    -moz-transition: background-position 0.1s linear;    -ms-transition: background-position 0.1s linear;    -o-transition: background-position 0.1s linear;    transition: background-position 0.1s linear;}/*点击时效果*/.btn:active{    background-color: #0055cc;    *background-color: #004ab3;    background-color:#004099 \9;    background-image: none;    outline:0;/*outline （轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用*/    /*盒子阴影特性*/    box-shadow:inset 0 2px 4px rgba(0, 0, 0, 0.15);    color:rgba(255, 255, 255, 0.75);}/*获得焦点按钮效果*/.btn:focus{    outline:thin dotted #333;    outline:5px auto -webkit-focus-ring-color;/*作用使得外边框发光*/    outline-offset: -2px;/*outline-offset 属性对轮廓进行偏移，并在边框边缘进行绘制*/}</style></head><body><div class="download-info"><a href="#" class="btn">View project on GitHub</a></div></body></html>

这里有有关于css hack 写法的详细说明。

2.目标伪类：
语法：
这里写图片描述
实战：手风琴效果：
这里是详细介绍。

3.语言伪类选择器：
根据元素的语言编码匹配元素。这种语言信息必须包含在文档中，或与文档关联，不能从CSS指定。为文档指定语言，有两种方法可以表示：

<!DOCTYPE HTML><html lang="en-US">

另一种方法是手工在文档中指定lang属性，并设置对应的语言值：

<body lang="fr">

在Twitter上有对不同语言的处理，一下代码片段是来自https://twitter.com/的一段对于不同语言处理的代码:

<ul id="supported_languages">            <li><a href="?lang=zh-tw" data-lang-code="zh-tw" title="繁体中文" class="js-language-link js-tooltip">繁體中文</a></li>            <li><a href="?lang=ja" data-lang-code="ja" title="日文" class="js-language-link js-tooltip">日本語</a></li>            <li><a href="?lang=id" data-lang-code="id" title="印度尼西亚文" class="js-language-link js-tooltip">Bahasa Indonesia</a></li>            <li><a href="?lang=msa" data-lang-code="msa" title="马来文" class="js-language-link js-tooltip">Bahasa Melayu</a></li>            <li><a href="?lang=cs" data-lang-code="cs" title="捷克文" class="js-language-link js-tooltip">Čeština</a></li>            <li><a href="?lang=da" data-lang-code="da" title="丹麦文" class="js-language-link js-tooltip">Dansk</a></li>            <li><a href="?lang=de" data-lang-code="de" title="德文" class="js-language-link js-tooltip">Deutsch</a></li>            <li><a href="?lang=en" data-lang-code="en" title="英文" class="js-language-link js-tooltip">English</a></li>            <li><a href="?lang=en-gb" data-lang-code="en-gb" title="英式英文" class="js-language-link js-tooltip">English UK</a></li>            <li><a href="?lang=es" data-lang-code="es" title="西班牙文" class="js-language-link js-tooltip">Español</a></li>            <li><a href="?lang=fil" data-lang-code="fil" title="菲律宾文" class="js-language-link js-tooltip">Filipino</a></li>            <li><a href="?lang=fr" data-lang-code="fr" title="法文" class="js-language-link js-tooltip">Français</a></li>            <li><a href="?lang=it" data-lang-code="it" title="意大利文" class="js-language-link js-tooltip">Italiano</a></li>            <li><a href="?lang=hu" data-lang-code="hu" title="匈牙利文" class="js-language-link js-tooltip">Magyar</a></li>            <li><a href="?lang=nl" data-lang-code="nl" title="荷兰文" class="js-language-link js-tooltip">Nederlands</a></li>            <li><a href="?lang=no" data-lang-code="no" title="挪威文" class="js-language-link js-tooltip">Norsk</a></li>            <li><a href="?lang=pl" data-lang-code="pl" title="波兰文" class="js-language-link js-tooltip">Polski</a></li>            <li><a href="?lang=pt" data-lang-code="pt" title="葡萄牙文" class="js-language-link js-tooltip">Português</a></li>            <li><a href="?lang=ro" data-lang-code="ro" title="罗马尼亚文" class="js-language-link js-tooltip">Română</a></li>            <li><a href="?lang=fi" data-lang-code="fi" title="芬兰文" class="js-language-link js-tooltip">Suomi</a></li>            <li><a href="?lang=sv" data-lang-code="sv" title="瑞典文" class="js-language-link js-tooltip">Svenska</a></li>            <li><a href="?lang=vi" data-lang-code="vi" title="越南文" class="js-language-link js-tooltip">Tiếng Việt</a></li>            <li><a href="?lang=tr" data-lang-code="tr" title="土耳其文" class="js-language-link js-tooltip">Türkçe</a></li>            <li><a href="?lang=el" data-lang-code="el" title="希腊文" class="js-language-link js-tooltip">Ελληνικά</a></li>            <li><a href="?lang=ru" data-lang-code="ru" title="俄文" class="js-language-link js-tooltip">Русский</a></li>            <li><a href="?lang=uk" data-lang-code="uk" title="乌克兰文" class="js-language-link js-tooltip">Українська мова</a></li>            <li><a href="?lang=he" data-lang-code="he" title="希伯来文" class="js-language-link js-tooltip">עִבְרִית</a></li>            <li><a href="?lang=ar" data-lang-code="ar" title="阿拉伯文" class="js-language-link js-tooltip">العربية</a></li>            <li><a href="?lang=fa" data-lang-code="fa" title="波斯文" class="js-language-link js-tooltip">فارسی</a></li>            <li><a href="?lang=mr" data-lang-code="mr" title="马拉地文" class="js-language-link js-tooltip">मराठी</a></li>            <li><a href="?lang=hi" data-lang-code="hi" title="印地文" class="js-language-link js-tooltip">हिन्दी</a></li>            <li><a href="?lang=bn" data-lang-code="bn" title="孟加拉文" class="js-language-link js-tooltip">বাংলা</a></li>            <li><a href="?lang=gu" data-lang-code="gu" title="古吉拉特文" class="js-language-link js-tooltip">ગુજરાતી</a></li>            <li><a href="?lang=ta" data-lang-code="ta" title="泰米尔文" class="js-language-link js-tooltip">தமிழ்</a></li>            <li><a href="?lang=kn" data-lang-code="kn" title="卡纳达文" class="js-language-link js-tooltip">ಕನ್ನಡ</a></li>            <li><a href="?lang=th" data-lang-code="th" title="泰文" class="js-language-link js-tooltip">ภาษาไทย</a></li>            <li><a href="?lang=ko" data-lang-code="ko" title="韩文" class="js-language-link js-tooltip">한국어</a></li>        </ul>

4.UI元素状态伪类选择器
主要用于form表单元素上，以提高网页人机交互，操作逻辑以及页面整体美观
UI元素状态一般包括：启用、禁用、选中、未选中、获得焦点、失去焦点、锁定和待机等。如表单中文本输入框，html元素选中和未选中状态，这几种状态是CSS3种常用状态伪类选择器；详细语法如下：
这里写图片描述
对于IE6~8使用UI元素伪类选择器需要使用特别的方法处理。
使用js库，选用内置已兼容UI元素伪类选择器的js库或框架，任何在代码中引入它们并完成想要的效果，由Keith Clark 编写的Selectivizr脚本是一个不错的选择。先将该脚本引入页面中，再从7个js库选择一个引入，UI状态伪类选择器就能工作在IE上了。
除使用js库外，还可用用原始的做法，使用类名处理，即给元素设置class属性处理，例如禁用按钮效果，可用在HTML元素添加class=“disable”,然后为此添加样式。

<style type=text/css>.btn.disabled, /*等效于.btn:disabled，用于兼容IE低版本浏览器*/.btn:disabled{        ...    }</style>

5.结构伪类选择器
有4个伪类选择器接受参数n

:nth-child(n)
:nth-last-child(n)
:nth-of-type(n)
:nth-last-of-type(n)
参数n可用是正数（1、2、3、4）、关键字（odd、even）,还可以是公式（2n+1、-n+5）,参数n起始值始终是1，而不是0。当参数n 为0时，选择器将匹配不到任何元素。

4.1 :first-child
4.2 :last-child
4.3.1 :nth-child()
如：ul>li:nth-child(3) 如果第三个子院不是li,则没有任何元素被选中；
4.3.2 :nth-child(n) 参数n是一个简单的表达式，取值从0开始计算的，到什么时候结束不知道，如果在实际应用中直接这样使用，将会选中父元素中所有子元素。
ul>li:nth-child(3){ background-color：orange；}
4.4 ：nth-last-child
从父元素最后一个子元素开始计算选择特定元素
4.5 ：nth-of-type
只计算父元素中指定某类型子元素。

在web应用中”:nth-of-type”在以下场景中可以使用。
- 营造一种有随意感的界面，如改变每张图片的旋转角度；
- 使文章中的图片交替向左向右浮动；
- 为一篇文章的头一段设置不同的样式，如首字下沉；
- 为一个定义列表的条上使用交替样式；
- 制作图表。
4.6 ：only-child的使用
表示一个元素是它父元素的唯一子元素
4.7 ：only-of-type的使用
选择一个元素是它父元素唯一一个相同类型的子元素。
4.8 ：empty的使用
选择没有任何内容的元素，哪怕是一个空格。这个选择器用例处理动态输出内容非常方便。例如想高粱提示出用户搜索出来的结果为空时：

#results:empty{background-color:#fcc;}

实战代码如下：

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>无标题文档</title><style type="text/css"> *{    margin:0;    padding:0;}ul{margin:50px auto;width:400px;list-style:none outside none;}li{    display:inline-block;    margin:5px;    padding:5px;    width:50px;    height:50px;    font:bold 30px/50px arial;    background:#000;    color:#fff;    border-radius:50px;    text-align:center;}ul>li:first-child{    background-color: green;}ul>li:nth-child(3){    background-color:yellowgreen;}/*ul>li:nth-child(n){    background-color:orange;}*//*ul>li:nth-child(2n){ //选中偶数    background-color:orange;}*//*ul>li:nth-child(even){    background-color:orange;}*//*ul>li:nth-child(n+5){    background-color:blue;}*/ul>li:nth-last-child(4){/*从后数第四个*/    background-color:blue;}ul>li:nth-child(odd){    /*选中的是奇数项*/}ul>li:nth-last-child(even){    /*选中的也是偶数*/}</style></head><body><ul>    <li>1</li>    <li>2</li>    <li>3</li>    <li>4</li>    <li>5</li>    <li>6</li>    <li>7</li>    <li>8</li>    <li>9</li>    <li>10</li>    <li>11</li>    <li>12</li>    <li>13</li>    <li>14</li>    <li>15</li>    <li>16</li>    <li>17</li>    <li>18</li>    <li>19</li>    <li>20</li></ul></body></html>

6.否定伪类选择器
主要用来定位不匹配该选择器的元素。
实例效果如图：

代码：

<!DOCTYPE HTML><html lang="en-US"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>无标题文档</title><style type="text/css"> *{    margin:0;    padding:0;}ul{    width:690px;    margin:20px auto;    letter-spacing:-4px;/*letter-spacing 属性增加或减少字符间的空白（字符间距）*/    word-spacing:-4px;/*word-spacing 属性增加或减少单词间的空白（即字间隔）*/    font-size:0;}li{    font-size:16px;    letter-spacing:normal;    word-spacing:normal;    display:inline-block;    *display:inline;    zoom: 1;     list-style:none outside none;/*http://www.w3school.com.cn/cssref/pr_list-style.asp*/    margin:5px;}img{    width:128px;    height:128px;}.gallery li:nth-child(2){    -webkit-filter: grayscale(1);}.gallery li:nth-child(3){    -webkit-filter:sepia(1) ;}.gallery li:nth-child(4){    -webkit-filter:saturate(0.5) ;}.gallery li:nth-child(5){    -webkit-filter:hue-rotate(90deg);}.gallery li:nth-child(6){    -webkit-filter: invert(1);}.gallery li:nth-child(7){    -webkit-filter: opacity(0.2);}.gallery li:nth-child(8){    -webkit-filter: blur(3px);}.gallery li:nth-child(9){    -webkit-filter: drop-shadow(5px 5px 5px  #ccc);}.gallery li:nth-child(10){    -webkit-filter: saturate(6) hue-rotate(361deg) brightness(.09);}.gallery:hover li:not(:hover){    -webkit-filter: blur(20px) grayscale(1);    opacity:.7;}</style></head><body><ul class="gallery">    <li><img src="http://www.w3cplus.com/sites/default/files/filter.jpg" alt=""></li>    <li><img src="http://www.w3cplus.com/sites/default/files/filter.jpg" alt=""></li>    <li><img src="http://www.w3cplus.com/sites/default/files/filter.jpg" alt=""></li>    <li><img src="http://www.w3cplus.com/sites/default/files/filter.jpg" alt=""></li>    <li><img src="http://www.w3cplus.com/sites/default/files/filter.jpg" alt=""></li>    <li><img src="http://www.w3cplus.com/sites/default/files/filter.jpg" alt=""></li>    <li><img src="http://www.w3cplus.com/sites/default/files/filter.jpg" alt=""></li>    <li><img src="http://www.w3cplus.com/sites/default/files/filter.jpg" alt=""></li>    <li><img src="http://www.w3cplus.com/sites/default/files/filter.jpg" alt=""></li>    <li><img src="http://www.w3cplus.com/sites/default/files/filter.jpg" alt=""></li></ul></body></html>

四、伪元素
除了伪类，CSS3还支持访问伪元素。
伪元素可用于定位文档中包含的文本，但无法在文档树种定位。伪类一般反映无法在CSS中轻松或可靠的检测到某个元素属性或状态；伪元素表示DOM外部的某种文档结构。
伪元素在CSS一直存在，如:first-line、:first-letter、:before、:after。CSS3对伪元素做了调整——多加了一个冒号，即变为::first-line、::first-letter、::before、::after,增加了一个::selection。
对于IE6~8仅支持单冒号，现代浏览器同时支持这两种表示法。另外一个区别是，双冒号和单冒号在CSS3中用来区分伪类与伪元素。

1.::first-letter
用来选择文本块的第一个字母，通常用于给文本元素添加排版细节，如下沉字母或首字母。
实例：

效果如图：
这里写图片描述
代码：

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title></title><style type="text/css"> p:first-child::first-letter{    float:left;    color:#903;    padding:4px 8px 0 3px;    font:75px/60px Georgia;}</style></head><body><p> Pellentesque habitant morbi tristique senectus et netus malesuada fames acturpisegestas. Vestibulum tortor quam, feugiat vitae,ultricies eget,tempor sitamet,ante.Donec eulibero sit amet quam egestasseper.Aenean ultricies mi vitac est.Mauris placerat elsifend leo. </p></body></html>

2.伪元素::first-line
用于匹配元素第一行文本，可应用一些特殊样式，给文本添加一些细微区别。匹配block、inline-block、table-caption、table-cell等级别元素第一行。
实例：效果如图：
这里写图片描述
代码：

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title></title><style type="text/css"> p:first-child::first-line{    font:italic 16px/18px Georgia;    color:#903;}</style></head><body><p> Pellentesque habitant morbi tristique senectus et netus malesuada fames acturpisegestas. Vestibulum tortor quam, feugiat vitae,ultricies eget,tempor sitamet,ante.Donec eulibero sit amet quam egestasseper.Aenean ultricies mi vitac est.Mauris placerat elsifend leo. </p></body></html>

3.伪元素::before和::after
不是指存在于标记中的内容，而是可以插入额外内容的位置，尽管生成的内容不会成为DOM的一部分，但同样可以设置样式。
要为伪元素生成内容，需要配合content属性。例如，假设在页面上所有外部链接之后的括号中附加它们指向的URL，无需将URL硬编码到标记中，可结合使用一个属性选择器和::after伪元素。

a[herf^=http]::after{    content:"("attr(herf)")";}

如今在CSS3 中使用这两个伪元素越来越多见，例如给链接添加ICON的效果。
4.伪元素::selection
用来匹配突出显示的文本，默认网站文本是深蓝的背景，白色的字体。
有的设计需要一个与众不同的效果，此时这个伪元素就非常实用，不过IE系列仅IE-9支持，Firefox需要加上私有属性-moz。webkit内核浏览器都支持。
伪元素::selection仅接受两个属性，一个是blackground,另一个是color。
默认样式：
这里写图片描述
修改的样式：

代码：

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title></title><style type="text/css"> ::selection{    background:red;    color:#fff;}::-moz-selection{    background:red;    color:#fff;}</style></head><body><p> Pellentesque habitant morbi tristique senectus et netus malesuada fames acturpisegestas. Vestibulum tortor quam, feugiat vitae,ultricies eget,tempor sitamet,ante.Donec eulibero sit amet quam egestasseper.Aenean ultricies mi vitac est.Mauris placerat elsifend leo. </p></body></html>

五、属性选择器
CSS3新增了3个属性选择器，可以对标签进行过滤，更容易定位HTML标签。
下面是CSS3的属性列表。
这里写图片描述

CSS3遵循了惯用的编码规则，通配符的使用提高样式表的书写效率
常见通配符如下：
这里写图片描述

属性选择器方法详解

创建简单的HTML结构，设置默认样式：

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title></title><style type="text/css"> .demo{    width:300px;    border:1px solid #ccc;    padding:10px;    overflow:hidden;    margin:20px auto;}.demo a{    float:left;    display:block;    height:50px;    width:50px;    border-radius:10px;    text-align:center;    background:#aac;    color:blue;    font:bold 20px/50px Arial;    margin-right:5px;    text-decoration:none;    margin:5px;}</style></head><body><div class="demo">    <a href="http://www.w3cplus.com" target="_blank" class="links item first" id="first" title="w3cplus">1</a>    <a href="" class="links active item" title="test website" target="_blank" lang="zh" >2</a>    <a href="sites/file/test.html" class="links item" title="this is a link" lang="zh-cn">3</a>    <a href="sites/file/test.png" class="links item" target="_blank" lang="zh-tw">4</a>    <a href="sites/file/image.jpg" class="links item" title="zh-cn">5</a>    <a href="mailto:w3cplus@hotmail" class="links item" title="website link" lang="zh">6</a>    <a href="/a.pdf" class="links item" title="open the website" lang="cn">7</a>    <a href="/abc.pdf" class="links item" title="close the website" lang="en-zh">8</a>    <a href="abcdef.doc" class="links item" title="http://www.sina.com">9</a>    <a href="abd.doc" class="linksitem last" id="last">10</a></div></body></html>

默认样式如图：
这里写图片描述

1.E[attr]
选择有某个属性的元素，而不管这个属性的值是什么。
效果如图：

也可以使用多属性进行选择元素：

a[id][title]{ background-color:red; }

这里写图片描述

2.E[attr=val]
选择元素E设置了属性attr,并且属性值为val,进一步精确需要选择的元素。
效果如图：

这里写图片描述

注意：此选择器中，属性和属性值必须完全匹配，特别对于属性值是词列表的形式，例如：

<a href="#" class="links item"></a>

其中a[class=”links”]{….}是找不到匹配元素，a[class=”links item”]{….}才匹配。

3.E[attr|=val]
选择attr属性值等于val或以val-开头的所有字符串属性元素。
效果如图：

这里写图片描述
代码：

a[lang|=zh]{background-color:hotpink;}

4.E[attr~=val]
匹配元素某个属性有一个或多个属性值。
效果如图：

这里写图片描述

代码：

a[title~=website]{background-color:goldenrod;}

5.E[attr*=val]
只要所选择的属性中有val字符，都将被匹配。与E[attr~=val]不同之处是：如
a[title~=links]属性值中links是一个单词，而a[title*=links]中links不一定是一个单词，如上面实例可以是“linksitem”。

效果如图：

这里写图片描述

代码：

a[class*=links]{background-color:greenyellow;}

6.E[attr^=val]
匹配以”val”开头的所有元素

效果如图：

这里写图片描述

代码：

a[href^=http]{background-color:yellowgreen;}

7.E[attr$=val]
匹配以”val”结尾的所有元素。
效果如图：

这里写图片描述

代码：

a[href$=png]{background-color:lavender;}

2 0