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> <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>