选择器——CSS基础

最新推荐文章于 2022-05-17 10:57:56 发布

Reage_Yao

最新推荐文章于 2022-05-17 10:57:56 发布

阅读量698

点赞数

分类专栏： CSS方法论

本文链接：https://blog.csdn.net/daruisoft/article/details/24601429

版权

CSS方法论专栏收录该内容

1 篇文章 0 订阅

订阅专栏

每一个CSS样式规则都由选择器（selector）和声明块（declaration）组成。选择器告诉浏览器在HTML文件中有哪些元素受影响，而声明块则说明元素受怎样的影响。声明块由一条或多条声明组成，期间用“;”分号隔开，外层用“{}”花括号包裹。单条声明由属性（property name）和值（property value）组成。

选择器

从之前的分析，我们不难看出，要学习CSS，选择器是第一道门槛。本书将采用表格与图片示例相结合的方式来讲述这一部分的知识。

常见的选择器

下面的表格中列出了常见的8种选择器，大多数的CSS选择器都有着和下表中示例类似的“长相”。

选择器	选择对象	示例
通配选择器(Universal selector)	任何类型的元素	* {margin:0;}
类型选择器(Type selectors)	HTML元素，如a、p、div	h2 {color:#36C;}
包含选择器(Descendant selectors)	所有被外层元素包含的内层元素	table td {font-size:14px;}
子选择器(Child selectors) IE 6及以下版本不支持	父元素的子元素，而不是所有的后代	body>p {background-color:#36C;}
类选择器(Class selectors)	指定的类(Class)	.header {background-color:#36C;}
Id选择器(ID selectors)	指定的Id	#header {background-color:#36C;}
属性选择器(Attribute selectors) IE 6及以下版本不支持	只论属性，不管值	a[rel]
	x的属性值等于y	a[rel="abc"]
	x的属性中有y	e[foo~="warning"]
	x的属性以y开头，连字符为分割	e[lang\|="en"]
伪选择器(Pseudo selectors)	伪类(Pseudo-classes)、伪元素(Pseudo-elements)	a:visited {}

选择器释疑

包含选择器和子代选择器有什么不同？

答：两者的影响能力不同。包含选择器作用于父元素的所有后代（子、孙、曾孙），而子代选择器仅作用于子代。不能理解父、子代关系？以下面的代码为例，可做出如所示的树状图。

DOM tree

上图中第二层的两个p元素和div元素都是body元素的子代，第三层的p元素是第二次div的子代，第二层的p、div和第三层的p都是body的后代；同理有第三层的p也是第二层div的后代。

<body>
<p>abc</p>
<div class="test">
<p>def</p>
</div>
<p>ghi</p>
</body>

选择器

CSS代码

效果

包含选择器

body p {

font-weight: bold;

}

abc

def

ghi

子代选择器

body>p {

font-weight: bold;

}

abc

def

ghi

在讲解了文档的树状图之后，我们再来接触一个新的概念——继承（inheritance）。继承是指CSS允许样式在应用于某一元素的同时，作用于该元素的后代元素。我们形象的说这些子元素继承了父元素的这些属性。下面我们举一个简单的例子：

HTML代码：<h1>这是一个<em>继承</em>示例</h1>

CSS代码：h1 {

color:#00F;

}

显示效果：

不难发现，em元素继承了h1元素的蓝色字体这一属性。值得注意的是：并非所有属性都能继承！一般地，边框类属性（边界、补白、边框、背景）都不能被继承。当然，继承还受优先级规则等的约束（下一节会讲述此内容）。

属性选择器的使用示例

属性选择器是在CSS2.1中出现的，它允许设计者选择带有某些属性的元素，从而更加准确的对页面呈现进行控制。下面的表格中列出了4种类型的属性选择器的使用示例：

类型	代码	选择内容	效果
只论属性，不管值	h1[title] { color: blue; }	带有title属性的h1元素。
x的属性值等于y	h1[title=abc] { color: blue; }	title属性值为abc的h1元素。
x的属性以y开头，连字符为分割	a[rel~="copyright"] { color: red; }	rel值中有copyright，且与其他值用空格隔开的a元素。
x的属性以y开头，连字符为分割	[lang\|="cn"] { color : red* }	lang属性的值以cn开头，属性之间以“-”为分割。	所有lang属性为"cn"、 "cn-zh"一类的元素其颜色均变红。

表：属性选择器的使用示例

伪选择器都有哪些？

伪选择器在一定程度上把人们从一些js脚本中解放了出来，我们可以使用伪选择器来添加一些特殊的效果。正如在前面所说的那样，伪选择器分为了伪类选择器和伪元素选择器两种。下面列出了在CSS 1和CSS 2中定义的一些伪选择器：

选择器	选择对象	特殊
*:first-child*	父元素的第一个子元素
*:link*	未被访问过的链接	1. 这两个选择器专门用于a元素 2. 有时客户端程序会将访问过的链接按:link呈现
*:visited*	已被访问过的链接	1. 这两个选择器专门用于a元素 2. 有时客户端程序会将访问过的链接按:link呈现
*:hover*	用户指向该元素，但为点击	这三个选择器是通用的用于a元素时，:hover必须置于:link和:visited之后；:active必须放在:hover之后
*:active*	被激活的元素，如用户点击该元素
*:focus*	拥有键盘输入焦点的元素
*:lang*	有lang属性的元素	html:lang(fr-ca) { quotes: ‘« ‘ ‘ »’ }

伪类选择器

使用伪类选择器可以DIY超链接的样式，也可以制作自己的图片按钮。

a:link{color:#FF0000} /* 未访问的链接 */
a:visited{color:#00FF00}  /* 已访问的链接 */
a:hover{color:#FF00FF}    /* 鼠标移动到链接上 */
a:active{color:#0000FF}   /* 选定的链接 */

自定义链接样式

#btn {
        display:block;
        width:82px;
        height:30px;
        background:url(images/submit.png);
}
#btn:hover {background-position:-91px 0;}
#btn:active {background-position:-182px 0;}

DIY图片按钮的CSS代码

在需要图片按钮的地方插入“<span id="btn" onclick=" "></span>”即可。

选择器	选择对象	说明
*:first-line*	p元素（段落）的第一行	可以使用<P:first-line></P:first-line>来标明希望应用:first-line规则的内容，不添加则会根据字数多少来确定第一行。通过:first-line和:first-letter的组合可实现如下的效果：
*:first-letter*	块级元素第一行的第一个字
*:before*	在元素的内容前面插入新内容
*:after*	在元素的内容之后插入新内容

伪元素选择器

一位卓越的小伙伴——CSS 3中的伪选择器

在CSS 3中定义了一些新的、方便的伪选择器，让我们能够更加方便的控制页面的性状。这些新的伪选择器包括:target、:enabled、:disabled、:checked、:root、:nth-child、:nth-last-child、:nth-of-type、:nth-last-of-type、:last-child、:first-of-type、:last-of-type、:only-child、:only-of-type、:empty、:not。鉴于当前支持CSS 3的浏览器并不多，本书将不会讲解全部的新伪选择器。

优先级

不同的选择器的优先级是不同的，处于高优先级的选择器相比低优先级的选择器而言，能够产生更大的影响。

优先级计算

在CSS中，优先级由A、B、C、D四个独立因子加权组成。根据A、B、C、D的数量，我们不难计算出选择器的优先级特性。

影响因子名称	计算方法
A	在HTML元素中使用style属性定义样式则记A为1，其余记为0。
B	等于ID属性的个数。例如#main #container{}的B为2。
C	等于类属性与伪类属性之和。例如ul ol li.red {}的C为1。
D	等于元素名称个数与伪元素属性之和。例如p:first-line{}的D为2。

表：优先级的计算方法

优先级法则

1. 选择器都有一个权值，权值越大越优先；

2. 当权值相等时，后出现的样式表设置要优于先出现的样式表设置；

3. “!important”声明的访客规则>“!important”声明的开发者规则(!important)>普通的开发者规则>普通的访客规则>浏览器预置规则；

4. 继承的CSS 样式不如后来指定的CSS 样式（例如#main {background-color:#CCC;}#main p {background:#00F}最终p元素的背景色为蓝色）；

5. 在同一组属性设置中标有“!important”规则的优先级最大（但IE6不支持!important声明）；

继承法则和优先级法则构成了CSS的层叠(cascading)规则。

简洁之美——分组选择器

“学术之美在于简洁”，简洁的代码不仅易于维护，也能减少在内容传输过程当中的流量消耗。在CSS中，我们也应该将追求代码的简洁作为一项奋斗的目标。试着构想一个情境：h2元素和p元素都要被设置为灰色的文本，一般情况下，我们可以写如下的代码：

h2 {
            color:#CCC;
}
p {
            color:#CCC;
}

毫无疑问，这段代码能够实现我们的目标，但是这种含有明显重复片段的代码是不够简洁的。若要在CSS中实现这种简洁之美，分组选择器(grouping)是一个不错的选择。我们可以将多个元素共同享有的属性使用以逗号“,”隔开的分组选择器来定义，我们可以将上面的代码改写为：

h2, p {
            color:#CCC;
}

两种写法的作用效果完全相同。

重要补充：元素分类

在开启下一章之前，我们有必要讲述关于元素的一种重要分类方法。这种分类方法，将元素分为了块级元素(block-level elements)和内联元素(inline-level elements)两类。

块级元素大体上包括了段落p、标题h1～h6、列表ol/ul、表格table、层div和body。从显示效果上看，块级元素会从新的一行开始，并且其后的元素也会从新的一行开始。

内联元素比较典型的是链接a、强调em、span。我们可以将不是块级元素的元素称为内联元素。

练习题

1.计算优先级，填写下面的表格

规则	A	B	C	D	权值
* {}	0	0	0	0	0,0,0,0
li {}	0	0	0	1	0,0,0,1
li:first-line {}	0	0	0	2	0,0,0,2
ulli {}	0	0	0	2	0,0,0,2
ulol+li {}	0	0	0	3	0,0,0,3
h1 + *[rel=up]{}	0	0	1	1	0,0,1,1
ulolli.red {}	0	0	1	3	0,0,1,3
li.red.level {}	0	0	2	1	0,0,2,1
#x34y {}	0	1	0	0	0,1,0,0
<pID=x97zstyle="color:green">	1	0	0	0	1,0,0,0

以选择器为主题的内容就介绍到这，如果您希望了解更多的内容，我建议您访问以下的网页：

W3.org关于选择器部分的定义：http://www.w3.org/TR/CSS21/selector.html

W3.org关于优先级的计算：http://www.w3.org/TR/CSS21/cascade.html

Reage_Yao

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
选择器——CSS基础

每一个CSS样式规则都由选择器（selector）和声明块（declaration）组成。选择器告诉浏览器在HTML文件中有哪些元素受影响，而声明块则说明元素受怎样的影响。声明块由一条或多条声明组成，期间用“;”分号隔开，外层用“{}”花括号包裹。单条声明由属性（property name）和值（property value）组成。从之前的分析，我们不难看出，要学
复制链接

扫一扫

专栏目录