CSS 选择器

一、 CSS的基本语法
1、 基本构成：选择符（selector）、属性（properties）、属性取值（value）

Selector{properties：value；}

二、 CSS 选择器

1、 标签选择器

Html中有不同的标签，这些标签可直接作为选择符

p {font-size：14px；} p 标签中字体大小设置

<p>一段字</p>

2、 类选择器

点+类名称

.wang {font-size：13px；} p标签中字体大小设置

<p class=“wang”>一段字</p>

3、 ID选择器**

#+id名称

#wang {font-size：13px；} p标签中字体大小设置

<p id=“wang”>一段字</p>    

4、 选择器组

多个选择符用逗号隔开可共同添加相同CSS样式

h1,h2,h3,h4 { font-size：13px；} 四个标签中的字体大小同时设置

<h1>一段字</h1>

<h2>一段字</h2>

<h3>一段字</h3>

<h4>一段字</h4>

5、 后代选择器

选取所有后代级的某类元素，父级与后代级用空格隔开

div p { font-size：13px；} 只有div中p的两段字被设置

<div>

        <h1>标题</h1>

<p>一段字</p>

<p>一段字</p>

</div>

<p>一段字</p>

6、 子代选择器

选取第一代子级的某类元素，父级与子级用>隔开

#wang > p { font-size：13px；} 只有div中p的两段字被设置

<div id=”wang”>

        <h1>标题</h1>

<p>一段字</p>

<p>一段字</p>

<div>

<p>一段字</p>

<p>一段字</p>

</div>

</div>

<p>一段字</p>

7、 交集选择器

拥有相同类时在前面加上特定元素标签可单独选取

p.wang{color:red;} 都拥有.wang但是只有外面p标签中的字体大小被设置

 

<divclass="wang">

        <h1>标题</h1>

        <p>一段字</p>

        <p>一段字</p>

       

</div>

        <pclass="wang">一段字</p>

8、 伪类选择器

:link :visited :hover :active 等 用于a标签的不同状态

三、 CSS优先级

原则：继承不如指定
ID选择器优先级大于类选择器，类选择器大于标签选择器
越具体级别越高
标签#id大于#id，标签.class大于.class