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。