选择器总结 - Serena-zlh

1.标签选择器

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>认识html标签</title>
 6 <style type="text/css">
 7 p{
 8 color:red;
 9 }
10 </style>
11 </head>
12 <body>
13     <h1>勇气</h1>
14     <p>三年级时，我还是一个<span class="stress">胆小如鼠</span>的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个<span class="stress">勇气</span>来回答老师提出的问题。学校举办的活动我也没勇气参加。</p>
15 </body>
16 </html>

2.类选择器

.类名称{样式}

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>自定义类名</title>
 6 <style type="text/css">
 7 .stress{
 8     color:red;
 9 }
10 </style>
11 </head>
12 <body>
13     <span class="stress">胆小如鼠</span>
14 </body>
15 </html>

3.ID选择器

<style type="text/css">
.classname{
    color:red;
}
#idname{
    color:green;
}
</style>

<span id="idname">ID选择器</span>

4.类选择器和ID选择器区别

<span class="true">类选择器可以使用多次</span><span class="true">同个类名可用于多个标签</span>


<span id="false">ID选择器只能在文档中使用一次</span>&nbsp;&nbsp;<span id="false">虽然能显示样式，但js调用会出错</span>

 1 <style type="text/css">
 2 .true-class{
 3     color:red;
 4 }
 5 .ture2{
 6     font-size:25px;
 7 }
 8 #false-id{
 9     color:red;
10 }
11 #false-2{
12     font-size:25px;
13 }
14 </style>
15 
16 <span class="true-class">红色字</span>
17 <span class="true-class  ture2">红色字并且大小为25px</span>
18 <span id="false-id">红字</span>
19 <span id="false-2 false-id">无效</span>
20 
21 <p>可以使用类选择器的词列表方法为同一个元素设置多个样式。不能使用id词列表</p>

5.子选择器

大于符号(>),用于选择指定标签元素的第一代子元素。

.food>li{border:1px solid red;}/*添加边框样式（粗细为1px， 颜色为红色的实线）*/

<ul class="food">
    <li>水果(第一代-儿子标签)
        <ul>
            <li>香蕉孙子标签无效</li>
            <ul>
                <li>标签无效曾孙子</li>
            </ul>
            <li>苹果</li>
            <li>梨</li>
        </ul>
    </li>
</ul>

posted on 2015-10-06 19:06 Serena-zlh 阅读(145) 评论(0) 编辑收藏举报