web前端基础：CSS选择器

• 标签选择器
• 类选择器
• 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;}