第2章CSS选择器

CSS选择器包括标签选择器、类选择器、ID选择器、通配符选择器。

2.1 标签选择器

         标签选择器中的标签是指HTML页面中的某个标签。

                   p { color:red; }

        上面这段CSS代码表示HTML页面中的所有p标签，文字的颜色为红色。

2.2 类选择器

    类别选择器表示一类选择器，格式化为.类名{[属性：值;]^0-n}。如

                   .red{color:red;}

   <p class=”red”>类选择器</p>

   如有这样一个需求：有3行文字，其中要求第2行文字为红色，其它的为黑色，则CSS代码如下：

                   .red {color:red;}

                   p {color:black;}

   <p>类选择器</p>

   <p class=”red”>类选择器</p>

   <p>类选择器</p>

   p.red{ color:red;}

   .red{color:red;}

   注意以上两种选择器，p.red选择器只能应用于p标签中，而.red选择器可应用于所有标签中。

   一个标签内可应用多个类选择器，如<pclass=”red font16”>xxx</p>，其中red和font16都是类选择器

2.3 ID选择器

         ID选择器表示一个选择器，格式化为#id选择器名{[属性：值;]^0-n}。如

                   #red {color:red;}

        <p id=”red”>ID选择器</p>

         在一个HTML页面中，ID选择器只能使用一次，否则JS在查找时就会选择错误。

2.4 通配符选择器

         通配符选择器表示适合于所有标签的选择器，如

         *{

                   padding: 0px;

                   margin:0px;

           }

2.5 联合声明

    如果选择器的部分属性相同，为了避免重复声明，可以联合声明，格式如下：

    p, .one, #two {color:red;}

2.6 选择器嵌套

         选择器嵌套的目的是为了更精准的定位标签，减少选择器声明的数量。

         .special p{color:red} 属性为special标记里面包含的p标记

         如：<spanclass=”special”><p>xxx</p></span>

         #one li{color:red}ID为one的标记里面包含的li

         如：<span id=”one”><li>xxx</li></span>

2.7 选择器继承

         选择器继承的概念：子选择器能够继承父选择器的属性，并可以有自己独立的属性，也可以重新声明父选择器中相同的属性。如：

         p{color: red; font-size:10px;}

         p .special{color:green; }

         则p .special选择器中颜色为绿色，字体大小为10px