站长网_站长创业_站长主页_站长之家_易采站长站

会员投稿 投稿指南 站长资讯通告: css 选择器 介绍
搜索:
您的位置: 主页 > 教程 > 网页设计 > CSS > » 正文

css 选择器 介绍

来源: 易采站长站

“选择器”是什么?
每一条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>
Tags: css 选择器
最新图文资讯
1 2 3 4 5 6
相关文章列表:
易采站长站 - 联系我们 - 广告服务 - 友情链接 - 网站地图 - 版权声明 - 人才招聘 - 帮助 -