CSS3 选择器

元素选择器

通过标签名获取 HTML 对象。

<style type="text/css">

p { ... } <!-- 选择所有 p 标签 -->
div p { ... } <!-- 范围限定 | 选择 div 里面的 p 标签  -->

</style>

<p> p1 ~ </p>

<div>
 <p> p2 ~ </p>
 <p> p3 ~ </p>
</div>

class 选择器

通过 class属性 获取 HTML 对象。

<style type="text/css">

.jmjc { .. } <!-- 选择所有 class="jmjc" 的元素 -->
div .jmjc { ... } <!-- 范围限定 -->

</style>

<p class="jmjc"> p1~ </p>
<div>
 <p class="jmjc"> p2~ </p>
 <p class="jmjc"> p3~ </p>
</div>

id 选择器

通过 id属性 获取 HTML 对象。

<style type="text/css"> 

#jmjc { ... } <!-- 选择 id="jmjc" 的元素 -->

</style>

<p id="jmjc"> p1 ~ </p>
<p id="jmjc"> 错误 </p> <!-- 不同于 class 的性质,id 是唯一的,值不可以重复  -->

属性选择器

通过属性值获取 HTML 对象。

<style type="text/css"> 

[type="text"] { ... }
input[type="text"] { ... } <!-- 同上 -->

</style>

<input type="text"> <!-- 被选中 -->
<input type="password">

合并选择

通过 , 合并不同的选择器。

<style type="text/css"> 

p, div { ... }  <!-- 如果 p & div 设置的样式相同,可以合并在一起设置 -->

</style>

<p> p ~ <p>
<div> div ~ </div>

子类选择器

两种常见的子元素选择器。

<style type="text/css"> 

div strong { ... } <!-- 所有级选择 | 两个 strong 都被选择 -->
div > strong { ... } <!-- 二级选择 | 只能选择到 strong 1 ~ -->

</style>

<div>
 <strong> 1 ~ </strong>
 <p><strong> 2 ~ </strong></p>
</div>

子类过滤器

三种常见的子元素过滤器。

<style type="text/css"> 

p:first-child { ... } <!-- 选择第一个 p -->
p:nth-child(2) { ... } <!-- 指定选择第几个 p -->
p:last-child { ... } <!-- 选择最后一个 p -->

</style>

<p> p1 ~ </p>
<p> p2 ~ </p>
<p> p3 ~ </p>

星号选择器

一般网页的默认字体大小是 14px、默认的背景颜色是 白色、默认的链接有 下划线,这些值我们称为初始化样式。

* { ... } <!-- * 号选择器可以重新声明初始化样式 -->
CSS3 教程 CSS3 入门 CSS3 选择器 CSS3 颜色 CSS3 单位 CSS3 字体 CSS3 文本 CSS3 光标 CSS3 盒子模型 CSS3 边框 CSS3 边距 CSS3 列表 CSS3 表格 CSS3 背景 CSS3 效果 CSS3 浮动 CSS3 定位 CSS3 响应式 CSS3 Columns CSS3 Flex