• 标签选择器
• 类选择器
• ID选择器
• 全局选择器
• 群组选择器
• 后代选择器
类选择器
为HTML标签添加class属性:
<h1 class="red">内容1</h1>
<p>内容2</p>
<p class="red">内容3</p>
通过类选择器来为具有此class属性的元素设置CSS样式:
.red{color:red;}
可对不同类型元素的同一个名称的类选择器设置不同的
样式规则:
p.red{font-size:50px;}
h1.red{font-size:30px;}
同一个元素可以设置多个类,之间有空格隔开:
<h1 class="red">内容1</h1>
<p class="red blue">内容2</p>
<p class="red">内容3</p>
标签选择器
以HTML标签作为选择器:
h1{color:red:}
p{color:blue;}
ID选择器
为HTML标签添加ID属性:
<h1 >内容1</h1>
<p id="p1">内容2</p>
<p id="p2">内容3</p>
通过ID选择器来为具有此ID的元素设置CSS规则:
#p1{color:red:}
#p2{color:blue;}
群组选择器
集体统一设置样式:
h1,h2,p{font-size:30px;}
全局选择器
所有标签设置样式:
*{color:red;
font-size:10px;
......
}
后代选择器
<em>css层叠样式</em>
<p><em>css</em>层叠样式</p>
<p><em>css</em>层叠样式</p>
使用后代选择器设置,之间用空格隔开:
p em{font-size:50px;}
后代选择器可以多层:
h1 p em{font-size:50px;}