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;}
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章