css 选择器 介绍

当前位置 : 首页 > 网页制作 > CSS > css 选择器 介绍

css 选择器 介绍

来源: 作者: 时间:2015-12-07 14:03
选择器是什么? 每一条css样式定义由两部分组成,形式如下: [code] 选择器{样式} [/code] 在{}之前的部分就是选择器。 选择器指明了{}中的样式的作用对象,也就是样式作用于网页中的哪
“选择器”是什么? 每一条css样式定义由两部分组成,形式如下: [code] 选择器{样式} [/code] 在{}之前的部分就是“选择器”。 “选择器”指明了{}中的“样式”的作用对象,也就是“样式”作用于网页中的哪些元素

“选择器”是什么?
每一条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”属性值是"高亮显示"

Tag:
网友评论

<