CSS样式选择器的总结

         所有HTML语言中的标记都是通过不同的CSS选择器进行控制的。用户只需要通过选择器对不同的HTML标签进行控制，并赋予各种样式声明，以实现各种效果。

一、常见的几种选择器

1、标记选择器

         一个HTML页面有很多不同的标记组成，声明哪些标记采用哪种CSS样式，即标记选择器。一旦声明那么页面中所有的该标记都会相应产生变化。例：

<html>

<head>

<title>标记选择器</title>

<style type="text/css">

<!--

     h2{     /* 带h2标记的颜色为红色 */

         color:red;

         font-size:20px;

     }

}

-->

</style>

</head>

<body>

     <h2>格言</h2>

     <p>好好学习，天天向上</p>

     <h3>春晓</h3>

     <p>春眠不觉晓，处处蚊子咬</p>

</body>

</html>

 

运行结果：

 

2、类别选择器

        类别选择器的类别名称由用户自定义，属性和值跟标记选择器一样，类别名称前面有一个点符号如下例中的.first，或者在标记后接类别名称，如下例中的p.second，使用时需要在标签里添加class属性，指定类别选择器名称。

例：

<html>

<head>

<title>类别选择器</title>

<style type="text/css">

<!--

.first{

     color:red;             /* 红色 */

     font-size:20px;        /* 文字大小 */

}

p.second{

     color:blue;            /* 蓝色 */

     font-size:17px;        /* 文字大小 */

}

-->

</style>

</head>

 

<body>

     <h2 class="first">格言</h2>

     <p class="second">好好学习，天天向上</p>

     <h2 class="first">春晓</h2>

     <p class="second">春眠不觉晓，处处蚊子咬</p>

</body>

</html>

 

运行结果：

3、ID选择器

        在HTML标签里声明ID名称，然后在CSS样式里声明一个与此标签ID名称一样的选择器，选择器名称前有一个#号。如下例中的#one。ID选择器可以用于多个标记，但不推荐，因为JavaScript等脚本语言也要调用html中设置的id，可能引起混乱。

例：

<html>

<head>

<title>ID选择器</title>

<style type="text/css">

<!--

#one{

     color:#F00;            /* 红色 */

     font-size:20px;        /* 文字大小 */

}

#two{

     color:blue;            /* 蓝色 */

     font-size:17px;        /* 文字大小 */

}

-->

</style>

</head>

 

<body>

     <p id="one">格言</p>

     <p id="two">好好学习，天天向上</p>

     <p>春晓</p>

     <p>春眠不觉晓，处处蚊子咬</p>

</body>

</html>

 

运行结果：

二、这几种选择器的混合应用

1、选择器集体声明

        如果某些选择器样式风格完全相同，或者部分相同，可以使用集体声明。各选择器间用逗号分隔。

例：

 

<html>

<head>

<title>选择器集体声明</title>

<style type="text/css">

<!--

 

h1,h2,h3,p{               /*标记选择器集体声明*/

     color:green;      

     font-size:15px;      /* 文字大小 */

}

h2.one,.two,#three{       /*类选择器，ID选择器的集体声明*/

    

    text-decoration:none;

     border-bottom: 1px solid red;

}

-->

</style>

</head>

<body>

     <h1>格言</h1>

     <h2 class="one">好好学习，天天向上</h2>

    <h3 class="two">现在不受苦，将来必受罪</h3>

     <p>春晓</p>

     <p id="three">春眠不觉晓，处处蚊子咬</p>

</body>

</html>

运行结果：

 

2、选择器的嵌套

        两个选择器之间用空格分开，前面的选择器嵌套后面的选择器，可以对特殊位置的HTML标记进行声明。如下例中的p b和.one b,p.one del，多个嵌套之间用逗号分隔

例：

 

<html>

<head>

<title>选择器的嵌套</title>

<style type="text/css">

<!--

     p b{                   /* 标记选择器的嵌套 */

         color:Red;

         font-size:20px;

     }

     .one b,p.one del{      /* 类别选择器(.one或p.one来表示)的嵌套 */

         color:green;

         font-size:20px;

     }

     #two b{               /* ID选择器的嵌套 */

         color:blue;

         font-size:20px;

     }

-->

</style>

</head>

<body>

     <p>格言</p>

     <p >好好学习，<b>天天</b>向上</p>

    <p class="one">现在不受苦，<b>将来</b>必<del>受罪</del></p>

     <p>春晓</p>

     <p id="two">春眠不觉晓，<b>处处</b>蚊子咬</p>

</body>

</html>

运行结果：

3、子选择器

        选择一个父元素直接的子元素，不包括子元素的子元素，之间用大于号>分隔。如下例中的ul.myList>li>a，IE7不认这种选择器，firefox可以

例：

<html>

<head>

<title>子选择器</title>

<style type="text/css">

<!--

     ul.myList>li>a{

         color:red;

         text-decoration:none;

     }

-->

</style>

</head>

 

<body>

     <ul class="myList">

    <li><a href="#">春晓</a></li>

        <ul>

        <li><a href="#">春眠不觉晓</a></li>

            <li><a href="#">处处蚊子咬</a></li>

            <li><a href="#">夜来一翻身</a></li>

            <li><a href="#">压死不老少</a></li>

         </ul>

     </ul>

</body>

</html>

运行结果：IE7不认这种选择器，firefox可以。如果要所有的都去掉下划线只需要把ul.myList>li>a改为ul.myList li a就可以了

 

 

4、属性选择器

        针对HTML标记中的属性进行选择的。如下例的针对a标签的title属性进行设置 a[title]和a[title=c3]

例：

 

<html>

<head>

<title>属性选择器</title>

<style type="text/css">

<!--

     a[title]{

         color:green;

         text-decoration:none;

     }

     a[title=c3]{

         color:red;

         text-decoration:none;

     }

-->

</style>

</head>

 

<body>

     <ul class="myList">

    <li><a href="#">春晓</a></li>

        <ul>

        <li><a href="#" title="c1">春眠不觉晓</a></li>

            <li><a href="#" title="c2">处处蚊子咬</a></li>

            <li><a href="#" title="c3">夜来一翻身</a></li>

            <li><a href="#" title="c4">压死不老少</a></li>

         </ul>

     </ul>

</body>

</html>

运行结果：IE7不认这种选择器，firefox可以。