CSS选择器
1.页面中有如下部分:
<div> <a> sdfsd1</a> <a> sdfsd2</a> <a> sdfsd3</a> </div> <div> <a> sdfsd4</a> <a> sdfsd5</a> </div>
如果要为每个div的第一个子元素添加一个样式,如字体颜色为蓝色,可以每个标签上添加class,如下:
CSS:
div .first-child{color:blue;}
页面:
<div> <a class="first-child"> sdfsd1</a> <a> sdfsd2</a> <a> sdfsd3</a> </div> <div> <a class="first-child"> sdfsd4</a> <a> sdfsd5</a> </div>
若div元素很多,需要重复写很多class,可以使用伪类,如下:
样式:
div :first-child{color:blue;}
页面:
<div> <a> sdfsd1</a> <a> sdfsd2</a> <a> sdfsd3</a> </div> <div> <a> sdfsd4</a> <a> sdfsd5</a> </div>
效果和2的方式一样
显示效果:
属性选择器
一、简单的属性选择
基本思路:通过已有元素属性,或基于元素属性的某个方面进行选择。
假如页面有以下元素
<a href="http://www.baidu.com"> 1</a> <a name="top"> 2</a> <a href="http://www.163.com"> 3</a>
1.a[href]
如:a[href] { color:red;}
解释:将所有含有href属性的a标签设置为红色(只要含有href属性即可匹配,而不看href的值)
结果:1、3链接变为红色
2.a[href="http://www.163.com"] {color:blue;}
解释:匹配指定属性值的元素,这里是精确匹配。(注意文档语言是否区分大小写,为了避免出错可以假定是区分大小写的)
二、类的属性选择
标签名[class~="类名"] 等同于 标签名.类名
解释:匹配以空格分隔的类名列表中包含某词的元素
如:div[class~="panel"](等同于div.panel),匹配组合类中含有panel名称的div标签。
假如页面有以下元素:
<div class="panel divWidth"> <a href="http://www.baidu.com"> 1</a> <a name="top"> 2</a> <a href="http://www.163.com"> 3</a> </div> <br /> <div class="divWidth panel"> <a href="http://www.baidu.com"> 4</a> </div> <br /> <div class="panel"> <a href="http://www.baidu.com"> 5</a> </div>
样式:
.divWidth{width:200px;} div[class~="panel"]{border:1px dashed black;}
等同于:
.divWidth{width:200px;} div.panel{border:1px dashed black;}
结果:
注意:如果去掉波浪线~,只有最后一个div加上了边框,前两个div不会被匹配中。
三、ID、类、属性选择器
使用ID还是类?
假如在网站全局样式中有如下定义:
#header {background:black;} #header a{color:white;}
某天如客户想要将某一页面做的与其他页面不同,我们又在某一页面中加入以下样式:
#header {background:white;} .mylink a{color:blue;}
这个时候a标签的颜色是没有被覆盖的,因为#header a 比.mylink a具有更高的特殊性。
解决方法,页面样式修改如下:
#header a,.mylink a{color:blue;} 或 #header .mylink a,.mylink a{color:blue;}
看上去是不是很繁琐,如果将全局样式中的ID改为类就很容易,将原来的全局样式改为如下(记得把html中的ID修改为类):
.header {background:black;} .header a{color:white;}
如果要在某个页面中覆盖样式,在页面中可以这样写:
.header {background:white;} .mylink a{color:blue;}
结论:在选择使用ID或类的时候,尽量选择使用类,减少其特殊性带来的不能重写覆盖问题。如果必须使用ID,还可以使用属性选择器解决(注意不同浏览器对属性选择器的支持问题)
下面看下属性选择器,假如页面有如下内容:
<div id="myID1"> 123 </div>
样式如下:
div#myID1{color:red;font-weight:bold;} div[id="myID1"]{color:green;font-style:italic;}
div内的内容颜色并没有变为green,因为ID具有更高的特殊性,所有在需要使用ID的地方,可以使用属性选择器去匹配,避免了以后重写样式带来的覆盖问题。
四、部分属性值选择
如:a[href*="http://www.XX.com"]
*= 是包含的意思,只要值中包含指定的内容值就匹配(相当于子串匹配)。
如:a[href^="http"]
^= 是以...开头
如:a[href$="http"]
$= 是以...结尾
五、选择后代元素
1.选择所有后代
页面:
<ol> <li>1</li> <li>2 <ul> <li>21</li> <li>22</li> <li>23</li> </ul> </li> <li>3</li> <li>4</li> </ol>
样式:
ol li{list-style:upper-alpha;}
ul也会被匹配中。
2.选择子代
只需将样式修改为:
ol>li {list-style:upper-alpha;}
只匹配ol的子代元素,不包括后代元素ul。