CSS选择器

标签选择器

以html标签作为选择器：

p{  color:blue;
     font-family:"隶书";
  }
h1{ background-color:yellow;}

通过标签选择器设置样式，所有使用该标签的内容都应用该样式。

类选择器

为html标签添加class属性：

<h1 class="class1">内容1</h1>
<p class="special">内容2</p>
<p class="class1">内容3</p>

通过类选择器来为具有此class属性的元素设置CSS样式（. class值）：

.class1{ color:red;}
.special{ color:blue;}

只要通过class属性引用类选择器设置的样式，那该标签引用相应样式。


可对不同类型元素的同一个名称的类选择器设置不同的样式规则：

h1.class1{ color:red; font-size:50px;}
p.class1{ color:red; font-size:30px;}

设置了class为class1的<h1>标签引用h1.class1{ color:red; font-size:50px;}
设置了class为class1的<p>标签引用p.class1{ color:red; font-size:50px;}
同一个元素可以设置多个类，之间有空格隔开：

<h1 class="class1">内容1</h1>
<p class="special class2">内容2</p>
<p class="class1">内容3</p>

id选择器

为html标签添id属性：

<h1>内容1</h1>
<p id="p1">内容2</p>
<p id="p2">内容3</p>

通过id选择器来为具有此id的元素设置CSS规则（#id值）：

#p1{color:red;}
#p2{color:blue;}

一个标签只能有一个id，一个id也只能被一个标签使用

全局选择器

为所有标签设置样式：

*{ font-size:30px; color:red;}

基本选择器的组合

标签、class、id都可以组合使用来设置样式。

• 包含选择器

<em>CSS层叠样式</em>
<p><em>CSS</em>层叠样式</p>
<p><em>CSS</em>层叠样式</p>

为父标签下的子标签设置样式；
使用包含选择器设置，之间用空格隔开：

p em{ font-size:40px;}

• 群组选择器
  集体统一的设置样式；
  选择器之间用，（逗号）隔开；

p,.class值,#id值,h1{ font-size:30px;}
p{ 
    color:red;
    font-family:"隶书";
}
h1{ color:red;}