1.本章面试题
1.1 在网页中如何使用CSS
1.2 CSS的常用选择器有哪些
2.知识点
2.1 上一章内容回顾
上一章讲了表格和表单的基本使用
2.2 本章主要讲解CSS的基本用法
3.具体内容
3.1 CSS 介绍
我们使用HTML可以构建稳定的结构基础，而页面的风格样式控制则交给CSS来完成。网页的样式包括各种元素的颜色、大小、线形、间距等等，这对于设计或维护一个数据较多的网站来说，工作量是巨大的。好在可以使用CSS来控制这些样式，这将大大提高网页设计和维护的效率，并且使网页的整体风格很容易做到统一。
CSS是英文Cascading Style Sheet的缩写，中文译为层叠样式表，也有人翻译为级联样式表，简称样式表。它是一种用来定义网页外观样式的技术，在网页中引入CSS规则，可以快捷高效地对页面进行布局设计，可以精确的控制HTML标记对象的宽度、高度、位置、字体、背景等外观效果。CSS是一种标识性语言，不仅可以有效的控制网页的样式，更重要的是实现了网页内容与样式的分离，并允许将CSS规则单独存放于一个文档中， CSS文件的扩展名为“css”。
3.2 CSS基本语法
CSS规则由两部分组成：选择器和一条或多条声明。
基本语法：
选择器{
属性1: 值;
属性2: 值;
…
属性n: 值;
}
CSS的属性按照相关功能进行了分组，包含了字体、文本、背景、列表、动画等多个分组，这些属性的具体使用方法和示例见后续章节。
3.3 CSS用法
根据CSS在HTML文档中的使用方法和作用范围不同，CSS样式表的使用方法分为三大类：行内样式、内部样式表和外部样式表，而外部样式表又可分为链入外部样式表和导入外部样式表。本节我们从四个分类来认识在HTML中使用CSS的方法。
-
行内样式表
-
内部样式表
-
外部样式表
a.链入外部样式表
b.导入外部样式表
3.3.1 行内样式表
行内样式（inline style），也叫内联样式，它是CSS四种使用方法中最为直接的一种，它的实现借用HTML元素的全局属性style，把CSS代码直接写入其中即可。 严格意义上行内样式是一种不严谨的使用方式，它不需要选择器，这种方式下CSS代码和HTML代码混合在一起，因此不推荐使用行内样式。
基本语法：
<标记 style="属性:值; 属性:值; …">
<!DOCTYPE html> <html> <head> <title>行内样式</title> </head> <body style="background-color:#081f02;color:white;"> <h1 style="text-align:center;">诗经·桃夭</h1> <p style="text-indent:2em;"> "桃之夭夭，灼灼其华。之子于归，宜其室家。桃之夭夭，有蕡其实。之子于归，宜其家室。桃之夭夭，其叶蓁蓁。之子于归，宜其家人。"《桃夭》,《诗经·周南》第六篇,为先秦时代华夏族民歌。全诗三章，每章四句,是一首祝贺年轻姑娘出嫁的诗。此诗以桃花起兴，为新娘唱了一首赞歌。全诗语言优美精炼,不仅巧妙地将“室家”变化为各种倒文和同义词，而且反覆用一“宜”字，揭示了新嫁娘与家人和睦相处的美好品德，也写出了她的美好品德给新建的家庭注入新鲜的血液，带来和谐欢乐的气氛。 </p> <p> 全诗分为三章。第一章以鲜艳的桃花比喻新娘的年青娇媚。人们常说：第一个用花比美人的是天才，第二个用花比美人的是庸才，第三个用花比美人的是蠢才。《诗经》是中国第一部诗歌总集，所以说这里是第一个用花来比美人，并不为过。姚际恒 《诗经通论》：“桃花色最艳，故以取喻女子，开千古词赋咏美人之祖。”自此以后用花、特别是用桃花来比美人的层出不穷，如魏·阮籍《咏怀·昔日繁华子》：“天天桃李花，灼灼有辉光。”唐·崔护《题都城南庄》：“去年今日此门中，人面桃花相映红。”宋·陈师道《菩萨蛮》词：“玉腕枕香腮，桃花脸上开。”他们皆各有特色，自然不能贬之为庸才、蠢才，但他们无不受到《诗经》这首诗的影响，只不过影响有大小，运用有巧妙而已。这里所写的是鲜嫩的桃花，纷纷绽蕊，而经过打扮的新嫁娘此刻既兴奋又羞涩，两颊飞红，真有人面桃花，两相辉映的韵味。诗中既写景又写人，情景交融，烘托了一股欢乐热烈的气氛。这种场面，即使在今天还能在农村的婚礼上看到。第二章则是表示对婚后的祝愿。桃花开后，自然结果。诗人说它的果子结得又肥又大，此乃象征着新娘早生贵子，养个白白胖胖的娃娃。第三章以桃叶的茂盛祝愿新娘家庭的兴旺发达。以桃树枝头的累累硕果和桃树枝叶的茂密成荫，来象征新嫁娘婚后生活的美满幸福，真是最美的比喻，最好的颂辞。朱熹《诗集传》认为每一章都是用的“兴”，固然有理，然细玩诗意，确是兴中有比，比兴兼用。全诗三章，每章都先以桃起兴，继以花、果、叶兼作比喻，极有层次：由花开到结果，再由果落到叶盛；所喻诗意也渐次变化，与桃花的生长相适应，自然浑成，融为一体。 </p> </body> </html>
3.3.2 内部样式表
当单个文档需要特殊的样式时，应该使用内部样式表。
内部样式表是将样式放在页面的<head>区里，这样定义的样式就应用到本页面中了，内部样式表使用<style></style>标记进行声明，是较为常用的一种使用方法。
基本语法：
<head>
……
<style type="text/css">
<!--
选择器1｛属性:值;…｝
选择器2｛属性:值;…｝
……
选择器n｛属性:值;…｝
-->
</style>
……
</head>
语法说明：
-
<style>标记定义HTML文档的样式信息，规定的是 HTML 元素如何在浏览器中呈现，type用来指定元素中的内容类型。 -
有些低版本的浏览器不能识别
<style>标记，这意味着低版本的浏览器会忽略<style>元素的内容，并把这些内容以文本形式直接显示到页面上。为了避免这种情况发生，可以使用添加HTML注释的方式（<!-- 注释 -->），当浏览器不支持<style>元素时隐藏内容而不让它显示。当然，目前主流浏览器都支持<style>标记，一般情况下，可以不采用注释方式。
<!DOCTYPE html>
<html>
<head>
<title>内部样式表</title>
<style type="text/css">
body{
color:#1c3b02; /* 设置前景色 */
}
h1{
text-align:center; /* 设置对齐方式居中 */
}
p{
line-height:1.5; /* 设置行高 */
font-size:14px; /* 设置字体大小 */
}
img{
width:300px; /* 设置宽度 */
float:left; /* 设置浮动在左侧 */
}
</style>
</head>
<body>
<h1>诗经·桃夭</h1>
<p>
"桃之夭夭，灼灼其华。之子于归，宜其室家。桃之夭夭，有蕡其实。之子于归，宜其家室。桃之夭夭，其叶蓁蓁。之子于归，宜其家人。"<br />
<img src="images/flower.jpg" />
《桃夭》,《诗经·周南》第六篇,为先秦时代华夏民歌。全诗三章，每章四句,是一首祝贺年轻姑娘出嫁的诗。此诗以桃花起兴，为新娘唱了一首赞歌。全诗语言优美精炼,不仅巧妙地将“室家”变化为各种倒文和同义词，而且反覆用一“宜”字，揭示了新嫁娘与家人和睦相处的美好品德，也写出了她的美好品德给新建的家庭注入新鲜的血液，带来和谐欢乐的气氛。
</p>
<p>
全诗分为三章。第一章以鲜艳的桃花比喻新娘的年青娇媚。人们常说：第一个用花比美人的是天才，第二个用花比美人的是庸才，第三个用花比美人的是蠢才。《诗经》是中国第一部诗歌总集，所以说这里是第一个用花来比美人，并不为过。姚际恒 《诗经通论》：“桃花色最艳，故以取喻女子，开千古词赋咏美人之祖。”自此以后用花、特别是用桃花来比美人的层出不穷，如魏·阮籍《咏怀·昔日繁华子》：“天天桃李花，灼灼有辉光。”唐·崔护《题都城南庄》：“去年今日此门中，人面桃花相映红。”宋·陈师道《菩萨蛮》词：“玉腕枕香腮，桃花脸上开。”他们皆各有特色，自然不能贬之为庸才、蠢才，但他们无不受到《诗经》这首诗的影响，只不过影响有大小，运用有巧妙而已。这里所写的是鲜嫩的桃花，纷纷绽蕊，而经过打扮的新嫁娘此刻既兴奋又羞涩，两颊飞红，真有人面桃花，两相辉映的韵味。诗中既写景又写人，情景交融，烘托了一股欢乐热烈的气氛。这种场面，即使在今天还能在农村的婚礼上看到。第二章则是表示对婚后的祝愿。桃花开后，自然结果。诗人说它的果子结得又肥又大，此乃象征着新娘早生贵子，养个白白胖胖的娃娃。第三章以桃叶的茂盛祝愿新娘家庭的兴旺发达。以桃树枝头的累累硕果和桃树枝叶的茂密成荫，来象征新嫁娘婚后生活的美满幸福，真是最美的比喻，最好的颂辞。朱熹《诗集传》认为每一章都是用的“兴”，固然有理，然细玩诗意，确是兴中有比，比兴兼用。全诗三章，每章都先以桃起兴，继以花、果、叶兼作比喻，极有层次：由花开到结果，再由果落到叶盛；所喻诗意也渐次变化，与桃花的生长相适应，自然浑成，融为一体。
</p>
</body>
</html>
3.3.3 链接外部样式表
当为了保证站点的风格统一，或当定义样式内容较多，且需要多个页面共享样式时，可使用外部样式表。链入外部样式表是把样式表保存为一个外部样式表文件，然后在页面中用<link>标记链接到这个样式表文件，<link>标记放在页面的<head>区内。
基本语法：
<head> <link href="样式表路径" rel="stylesheet" type="text/css" /> …… </head>
语法说明：
-
href：指出样式表存放路径。
-
rel：用来定义链接的文件与HTML之间的关系， rel="stylesheet"是指在页面中使用这个外部的样式表。
-
type属性用于指定文件类型，“text/css”指文件的类型是样式表文本。
/*css文件（style.css）内容*/
h1{
text-align:center; /* 设置对齐方式居中 */
}
p{
line-height:1.5; /* 设置行高 */
font-size:14px; /* 设置字体大小 */
}
img{
width:120px; /* 设置宽度 */
}
<!--在html文件中引入style.css文件--> <!DOCTYPE html> <html> <head> <title>链入样式表</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <h1>题都城南庄</h1> <p> "去年今日此门中，人面桃花相映红。人面不知何处去，桃花依旧笑春风。"<br /> 此诗的创作时间，史籍没有明确记载。而唐人孟棨《本事诗》和宋代《太平广记》则记载了此诗“本事”：崔护到长安参加进士考试落第后，在长安南郊偶遇一美丽少女，次年清明节重访此女不遇，于是题写此诗。这段记载颇具传奇小说色彩，其真实性难以得到其他史料的印证。 </p> <p> 全诗四句，这四句诗包含着一前一后两个场景相同、相互映照的场面。第一个场面：寻春遇艳——“去年今日此门中，人面桃花相映红。”诗人抓住了“寻春遇艳”整个过程中最美丽动人的一幕。“人面桃花相映红”，不仅为艳若桃花的“人面”设置了美好的背景，衬出了少女光彩照人的面影，而且含蓄地表现出诗人目注神驰、情摇意夺的情状，和双方脉脉含情、未通言语的情景。第二个场面：重寻不遇。还是春光烂漫、百花吐艳的季节，还是花木扶疏、桃树掩映的门户，然而，使这一切都增光添彩的“人面”却不知何处去，只剩下门前一树桃花仍旧在春风中凝情含笑。 </p> <img src="images/blossom1.jpg" /> <img src="images/blossom2.jpg" /> <img src="images/blossom3.jpg" /> <img src="images/blossom4.jpg" /> <img src="images/blossom5.jpg" /> <img src="images/blossom6.jpg" /> </body> </html>
3.3.4 导入外部样式表
导入外部样式表是指在HTML文件头部的<style>元素里导入一个外部样式表，导入外部样式表采用import方式。导入外部样式表和链入样式表的方法很相似，但导入外部样式表的样式实质上相当于存在网页内部。
基本语法：
@import url("样式表路径");
<!--使用上个示例的css文件(style.css)进行导入-->
<!DOCTYPE html>
<html>
<head>
<title>导入样式表</title>
<style type="text/css">
@import url("style.css");
</style>
</head>
<body>
<h1>惠崇春江晚景</h1>
<p>
"竹外桃花三两枝，春江水暖鸭先知。蒌蒿满地芦芽短，正是河豚欲上时。"<br />
惠崇春江晚景是元丰八年（1085）苏轼在逗留江阴期间，为惠崇所绘的鸭戏图而作的题画诗。苏轼的题画诗内容丰富，取材广泛，遍及人物、山水、鸟兽、花卉、木石及宗教故事等众多方面。这些作品鲜明地体现了苏轼雄健豪放、清新明快的艺术风格，显示了苏轼灵活自如地驾驭诗画艺术规律的高超才能。而这首《惠崇<春江晚景>》历来被看作苏轼题画诗的代表作。
</p>
<img src="images/blossom2.jpg" />
<img src="images/blossom3.jpg" />
<img src="images/blossom4.jpg" />
<img src="images/blossom6.jpg" />
<img src="images/blossom7.jpg" />
<img src="images/blossom8.jpg" />
</body>
</html>
3.4 CSS基本选择器
选择器是CSS中很重要的概念，它可以大幅度提高开发人员编写或修改样式表的工作效率。CSS提供了大量的选择器，大体上可以分为基本选择器、组合选择器、属性选择器、伪类选择器和伪对象选择器等。
由于浏览器支持情况，很多选择器在实际开发中很少用到，本节主要讲解最基本又常用的选择器。
基本选择器包括标记选择器、类选择器、id选择器和通用选择器。
3.4.1 标记选择器
HTML文档中最基本的构成是HTML标记，如果要对文档中的所有同类标记都使用同一个CSS样式，就应使用标记选择器。
基本语法：
标记名{ 属性1:值1; 属性2:值2;…}
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<title> new document </title>
<style type="text/css">
p /*html标记选择器*/
{
color:red; /*颜色*/
font-size:30px;/*字体大小*/
font-family:幼圆; /*字体类型*/
font-style:italic;/*字体风格:斜体*/
font-weight:bold;/*字体粗细:bold 粗体*/
}
h1
{
color:#00ff00;
font-size:40px;
}
</style>
</head>
<body>
<h1>静夜思</h1>
<p>窗前明月光</p>
<p>疑是地上霜</p>
<p>举头望明月</p>
<p>低头思故乡</p>
</body>
</html>
3.4.2 类选择器
基本语法：
标记名.类名{属性1:值1;属性2:值2;…}
css选择器针对标记的全局属性class，引用方式为:
.类名{属性1:值1;属性2:值2;…}
类选择器针对标记的全局属性class，引用方式为:
<标记名 class="类名">
语法说明：
这里，类名可以是任何合法的字符，由设计者定义。如果对所有的标记均可使用，则采用“.类名”的形式，这里“”表示全部，也可以省略。
下面给出类选择器常用形式的示例：
1.形式1
p.text1{color:brown;font-size:14px;}
该形式下只允许<p>标记引用该样式，引用方法示例如下：
<p class="text1">
2.形式2
*.text1{ color:brown;font-size:14px; }
或
.text1{ color:brown;font-size:14px; }
所有标记都可引用该样式，引用方法示例
<p class="text1">
<h4 class="text1">
<!DOCTYPE html>
<html>
<head>
<title>类选择器示例</title>
<style type="text/css">
p{
font-size:14px;
line-height:1.5;
}
*.text1{
color:#eddbd9;
background-color:#5f443b;
}
.text2{
color:#fe1c5e;
background-color:#737369;
}
p.text3{
color:#264905;
background-color:#b3ffa5;
}
</style>
</head>
<body>
<h1 class="text1">晚桃花</h1>
<p class="text1">一树红桃亚拂池，竹遮松荫晚开时。</p>
<p class="text2">非因斜日无由见，不是闲人岂得知。</p>
<p class="text3">寒地生材遗校易，贫家养女嫁常迟。</p>
<p>春深欲落谁怜惜，白侍郎来折一枝。</p>
</body>
</html>
3.4.3 id选择器
id选择器和类选择器基本相同，不同的是定义时不使用“.”而使用“#”，作用于HTML标记的全局属性“id”而不是“class”。
基本语法：
标记名#id名{ 属性1: 值1;属性2: 值2;…}
id选择器针对标记的全局属性id，引用方式为:
<标记名 id="id名">
语法说明：
如果对所有的标记均可使用，则采用“#id名”的形式，这里“”表示全部，也可以省略。
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p{
font-size:14px;
line-height:1.5;
}
*#text1{
color:#eddbd9;
background-color:#5f443b;
}
#text2{
color:#fe1c5e;
background-color:#737369;
}
p#text3{
color:#264905;
background-color:#b3ffa5;
}
</style>
<title>类选择器示例</title>
</head>
<body>
<h1 id="text2">晚桃花</h1>
<p id="text1">一树红桃亚拂池，竹遮松荫晚开时。</p>
<p id="text2">非因斜日无由见，不是闲人岂得知。</p>
<p id="text3">寒地生材遗校易，贫家养女嫁常迟。</p>
<p>春深欲落谁怜惜，白侍郎来折一枝。</p>
</body>
</html>
3.4.4 通用选择器
通用选择器是一种特殊的选择器，用*表示，匹配网页中的所有元素，除非使用更为具体的选择器指定某一元素中对应的相同属性应使用其它值。通用选择器和对<body>元素设定样式稍有不同，因为通用选择器应用于每一个元素，而不依赖从应用于<body>元素的规则中继承的属性。
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
*{
font-size:14px;
line-height:1.5;
text-align:center;
background-color:#5f443b;
color:#eddbd9;
}
.text{
color:#fe1c5e;
}
</style>
<title>类选择器示例</title>
</head>
<body>
<h1>晚桃花</h1>
<p>一树红桃亚拂池，竹遮松荫晚开时。</p>
<p>非因斜日无由见，不是闲人岂得知。</p>
<p>寒地生材遗校易，贫家养女嫁常迟。</p>
<p class="text">春深欲落谁怜惜，白侍郎来折一枝。</p>
</body>
</html>
3.4.5 其他选择器
上一节我们主要学习了CSS基本选择器，本节对CSS的其它选择器做一个了解。
3.4.5.1 组合选择器
CSS中组合选择器，可以算作是基础选择器的升级版，也就是组合去使用基础选择器的意思。组合选择器主要有五个类别：多元素选择器、后代选择器、子选择器、相邻选择器和兄弟选择器。
-
多元素选择器
基本语法：
E, F {属性1:值1;属性2:值2;… }本例中1级标题和段落颜色相同，可以使用多元素选择器实现。部分代码如下：
<!DOCTYPE html> <html> <head> <style type="text/css"> body{ text-align:center; } h1,p{ color:#dd0932; } </style> <title>多元素选择器示例</title> </head> <body> <h1>桃花庵歌</h1> <h5>弘治乙丑三月桃花庵主人唐寅</h5> <p> 桃花坞里桃花庵，桃花庵下桃花仙。 <br /> 桃花仙人种桃树，又折花枝当酒钱。 <br /> 酒醒只在花前坐，酒醉还须花下眠。 <br /> 花前花后日复日，酒醉酒醒年复年。 <br /> 不愿鞠躬车马前，但愿老死花酒间。 <br /> 车尘马足贵者趣，酒盏花枝贫者缘。 <br /> 若将富贵比贫贱，一在平地一在天。 <br /> 若将贫贱比车马，他得驱驰我得闲。 <br /> 世人笑我忒疯癫，我笑世人看不穿。 <br /> 记得五陵豪杰墓，无酒无花锄作田。 <br /> </p> </body> </html>
-
后代元素选择器
基本语法：
E F {属性1:值1;属性2:值2;… }后代元素选择器匹配所有属于E元素后代的F元素，例如：
table b{color:red; }表示将表格中的所有
<b>元素文字设置为红色。<!DOCTYPE html> <html> <head> <style type="text/css"> .test li a{ color:#ffffff; background-color:#5e374a; } </style> <title>后代元素选择器示例</title> </head> <body> <h1>便利生活网站</h1> <ul class="test"> <li>购物网站：</li> <li>车票预定：<a href="http://www.12306.cn/mormhweb">12306</a></li> <ul> <li><a href="http://www.taobao.com">淘宝网</a></li> <li><a href="http://http://www.jd.com">京东商城</a></li> <li><a href="http://www.dangdang.com">当当网</a></li> </ul> <li>旅行网站：</li> <ul> <li><a href="http://www.ctrip.com">携程旅行网</a></li> <li><a href="http://www.tuniu.com">途牛</a></li> </ul> <li>地图路线：<a href="http://map.baidu.com">百度地图</a></li> </ul> <p> <a href="http://www.baidu.com">更多内容，查找百度</a> </p> </body> </html>
3.子元素选择器
基本语法：
E>F{属性1:值1;属性2:值2;…}语法说明：
子元素选择器只能选择某元素的子元素，其中E为父元素，F为直接子元素，E>F所表示的是选择了E元素下的所有子元素F。这和后代元素选择器不一样，在后代元素选择器中F是E的后代元素，而子元素选择器中F是E的子元素。
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.test>li>a{
color:#ffffff;
background-color:#5e374a;
}
</style>
<title>子元素选择器示例</title>
</head>
<body>
<h1>便利生活网站</h1>
<ul class="test">
<li>购物网站：</li>
<li>车票预定：<a href="http://www.12306.cn/mormhweb">12306</a></li>
<ul>
<li><a href="http://www.taobao.com">淘宝网</a></li>
<li><a href="http://http://www.jd.com">京东商城</a></li>
<li><a href="http://www.dangdang.com">当当网</a></li>
</ul>
<li>旅行网站：</li>
<ul>
<li><a href="http://www.ctrip.com">携程旅行网</a></li>
<li><a href="http://www.tuniu.com">途牛</a></li>
</ul>
<li>地图路线：<a href="http://map.baidu.com">百度地图</a></li>
</ul>
<p>
<a href="http://www.baidu.com/">更多内容，查找百度</a>
</p>
</body>
</html>
-
相邻兄弟选择器
基本语法：
E+F{属性1:值1;属性2:值2;…}
语法说明：
相邻兄弟选择器可以选择紧接在另一元素后的元素，而且它们具有相同的父元素，换句话说，E和F具有同一个父元素，而且F元素在E元素后面并且紧紧相邻。
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p+p{
color:#fbf95e;
background-color:#0763c2;
}
</style>
<title>相邻兄弟选择器示例</title>
</head>
<body>
<h2>大林寺桃花</h2>
<p>人间四月芳菲尽，山寺桃花始盛开。</p>
<p>长恨春归无觅处，不知转入此中来。</p>
<h2>桃花</h2>
<p>千株含露态，何处照人红。</p>
<p>风暖仙源里，春和水国中。</p>
<p>流莺应见落，舞蝶未知空。</p>
<p>拟欲求图画，枝枝带竹丛。</p>
</body>
</html>
-
一般兄弟选择器
基本语法：
E~F{属性1:值1;属性2: 值2;…}
语法说明：
一般兄弟选择器将选择某元素后面的所有兄弟元素，它和相邻兄弟选择器类似，需要在同一个父元素之中，并且F元素在E元素之后。区别在于E ~ F 选择器匹配所有E元素后面的F元素，E+F仅匹配紧跟在E元素后边的F元素。
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p~p{
color:#fbf95e;
background-color:#0763c2;
}
</style>
<title>一般兄弟选择器示例</title>
</head>
<body>
<h2>大林寺桃花</h2>
<p>人间四月芳菲尽，山寺桃花始盛开。</p>
<p>长恨春归无觅处，不知转入此中来。</p>
<h2>桃花</h2>
<p>千株含露态，何处照人红。</p>
<p>风暖仙源里，春和水国中。</p>
<p>流莺应见落，舞蝶未知空。</p>
<p>拟欲求图画，枝枝带竹丛。</p>
</body>
</html>
3.4.5.2 伪类选择器
伪类可以看做是一种特殊的类选择器，是能被支持CSS的浏览器自动所识别的特殊选择器。
基本语法：
E:伪类 {属性1:值1; 属性2:值2;…}
伪类和类不同，是CSS已经定义好的，不能像类选择器一样随意用别的名字，常用的伪类选择器如下表所示。
3.4.5.3 伪对象选择器
伪对象选择器，并不是针对真正的对象使用选择器，而是针对CSS中已经定义好的伪对象使用的选择器。
基本语法：
E:伪对象{属性1:属性值1;属性2:属性2;…}
上表中除E::selection外均为css3之前选择器，CSS3将伪对象选择器前面的单个冒号(:)修改为双冒号(::)用以区别伪类选择器，但以前的写法仍然有效，建议使用新写法。例如实现杂志排版中常用的首字母突出（粗体打字）下沉效果：
div::first-letter {
float:left;
font-size:40px;
font-weight:900;
}
例如实现段落第一行文本为红色。
p::first-line{color:red;}
例如设置段落文字被选中时字体呈现为黑底白色。
p::selection{
background-color:black;
color:white;
}
3.4.5.4 属性选择器
属性选择器是在标记后面加一个中括号，中括号中列出各种属性或者表达式。属性选择器的形式很多，我们这里通过示例简单介绍几个。
1.存在属性匹配
通过匹配存在的属性来控制元素的样式，一般要把匹配的属性包含在中括号中。
例如将任何带有href属性的a标记设置为综色：
a[href]{color:brown;}
-
精确属性匹配
只有当属性值完全匹配指定的属性值时才会应用样式，id选择器和类选择器本质上就是精确属性匹配选择器。
例如将指向网址“http://www.taobao.com”的链接a标记设置为棕色：
a[href="http://www.taobao.com"]{color:brown;}
3.前缀匹配
只要属性值的开始字符串匹配指定字符串，即可对元素应用样式。
前缀匹配使用[^=]形式实现：
例如：
[id^="user"]{color:brown;}
则：
<p id="userName">李政</p> <p id="userWeight">体重</p>
等都可以被设置为棕色。
4.后缀匹配
与前缀匹配相反，只要属性值的结尾字符匹串配指定字符串，即可对元素应用样式。后缀匹配使用[$=]形式实现：
例如：
[id$="Name"]{color:brown;}
则：
<p id="JackName">杰克</p> <p id="RoseName">萝丝</p>
等都可以被设置为棕色。
5.子字符串匹配
只要属性中存在指定字符串即应用样式，使用[*=]形式实现：
例如：
[id*="test"]{color:brown;}
则：
<p id="Rosetest">段落1</p> <p id="testY">段落2</p> <p id="xtesty">段落3</p>
等都可以被设置为棕色。
4.本章总结
4.1 总结本章知识点
本章学习了CSS使用的基本方式，选择器的使用方法，以及常用的选择器。
4.2 面试题答案
4.2.1 网页中如何使用CSS样式
网页中使用CSS有四种方式：行内样式表，内部样式表，链接外部样式表，导入外部样式表。
4.2.2 CSS的常用选择器有哪些
选择器大体上可以分为基本选择器、组合选择器、属性选择器、伪类选择器和伪对象选择器。
基本选择器包括标记选择器、类选择器、id选择器和通用选择器。
4.3 预习下一章内容
下一章我们继续深入学习CSS样式。
5. 练习题
5.1 练习一
5.2 练习二
5.3 练习三
5.4 练习四
扫一扫
7135
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
