css 选择器 介绍

前端  /  管理员 发布于 7年前   264

“选择器”是什么？
每一条css样式定义由两部分组成，形式如下：

复制代码代码如下:
选择器{样式}

在{}之前的部分就是“选择器”。
“选择器”指明了{}中的“样式”的作用对象，也就是“样式”作用于网页中的哪些元素。
由此可见，“选择器”的功能是从“网页所有的元素”当中选择“部分元素”，因此我们把它称为“选择器”。
“选择器”的种类
前面讲了，“选择器”的功能是指明“样式”作用的“目标元素”。
那如何才能指明这些“目标元素”呢。
我们知道,一个“元素”有“标签名”,“class”,“id”这几个常见属性,那么就可以从这几个属性出发来确定“目标元素”.由此也就诞生了几个最常用的“选择器”--标签选择器,类选择器,id选择器
常用的“选择器”
标签选择器
使用“元素”的“标签名”作为“选择器”
书写形式：

复制代码代码如下:
标签名{}

例如:p{},表示{}中的“样式”的将会作用于“标签名”为"p"的元素
类选择器
依据“元素”的“class”属性来编写“选择器”
书写形式：

复制代码代码如下:
.class值{}

解释：点号.后面跟着某些元素的“class”值
例如:.高亮显示{},表示{}中的“样式”的将会作用于“class”取值为"高亮显示"的元素
举例：

复制代码代码如下:
<style>
.高亮显示{color:red;}
</style>
<a class="高亮显示">a1</a>
<a>a2</a>
<p>p1</p>
<p class="高亮显示">p2</p>

解释:“样式”会作用于第一个"a"元素和第二个"p"元素.因为它们的“class”属性值都是"高亮显示"
id选择器
依据“元素”的“id”属性来编写“选择器”
书写形式：
#id值{}
解释：井号#后面跟着某个元素的“id”值
例如:#文章标题{},表示{}中的“样式”的将会作用于“id”取值为"文章标题"的元素
举例：

复制代码代码如下:
<style>
#文章标题{color:red;}
</style>
<p>p1</p>
<p id="文章标题">p2</p>
<p>p3</p>

解释:“样式”会作用于第二个"p"元素.因为它的“id”属性值是"文章标题"
“标签选择器”和“类选择器”可以结合使用,形式如下：
标签名.class值{}
例如:p.高亮显示{},表示{}中的“样式”的将会作用于“标签名”为"p"并且“class”属性值为"高亮显示"的元素
举例：

复制代码代码如下:
<style>
p.高亮显示{color:red;}
</style>
<a class="高亮显示">a1</a>
<a>a2</a>
<p>p1</p>
<p class="高亮显示">p2</p>

解释:“样式”只会作用于第二个"p"元素.因为它的“标签名”为"p"并且“class”属性值为"高亮显示"
组合选择器
前面列出的“标签选择器”,“类选择器”,“id选择器”在书写时,只涉及到一个元素,也就是“目标元素”,这几个“选择器”可以被称为"基本选择器".
而“组合选择器”在书写时,涉及到多个"基本选择器"
并列选择器
书写形式：
a,b{}
a和b都是"基本选择器",两者用逗号,分开,表明两者是并列关系，它们使用同一个样式
例如:a,.高亮显示{},表示{}中的“样式”的将会作用于“标签名”为"a"或者“class”属性值为"高亮显示"的元素
举例：

复制代码代码如下:
<style>
a,.高亮显示{color:red;}
</style>
<a>a1</a>
<a>a2</a>
<p>p1</p>
<p class="高亮显示">p2</p>

后代选择器
书写形式：
a b{}
a和b之间用至少一个空格分开，a选择器代表“目标元素”的“祖先元素”,b选择器指的是“目标元素”本身.
对于这种选择器，可以粗略的理解为：{}中的“样式”的将会作用于a元素中的b元素
例如:p .高亮显示{},表示{}中的“样式”的将会作用于“祖先元素”为"p元素",而自身的“class”属性值为"高亮显示"的元素.也可以说,{}中的“样式”的将会作用于“class”属性值为"高亮显示",并且祖先元素为"p元素"的那些元素
举例：

复制代码代码如下:
<style>
p .高亮显示{color:red;}
</style>
<p>
<a class="高亮显示">a1</a>
<a>a2</a>
<span>
<a class="高亮显示">a3</a>
</span>
</p>
<div>
<a class="高亮显示">a1</a>
<a>a2</a>
</div>

解释:“样式”会作用于"p"元素中的第一个"a"元素,也会作用于"span"元素中的"a"元素.因为这两个元素的“祖先元素”为"p元素",并且它们自身的“class”属性值是"高亮显示"