任务5.3 CSS复合选择器

模块5美化网页——使用CSS技术任务5.3CSS复合选择器网页设计项目教程（HTML5+CSS3+JavaScript）任务描述组合基本选择器，快速定位页面元素CSS复合选择器通过组合不同类型的选择器，如元素、类、ID选择器等，能快速定位特定元素。后代、子、相邻兄弟及通用兄弟选择器各具特色，熟练运用可让页面样式设置更高效。5.3.1认识复合选择器复合选择器由基本选择器组合而成，功能更强大概念复合选择器是指由两个或多个基本选择器，通过不同方式进行组合而成的选择器。它能更精准、更灵活地对页面元素进行样式设置。主要类型①交集选择器②并集选择器③后代选择器④子选择器⑤相邻选择器⑥属性选择器⑦伪类选择器⑧伪对象选择器等5.3.2交集选择器由两个选择器直接连接，取二者交集构成规则第一个必须是标记选择器；第二个必须是类选择器或ID选择器；二者之间不能有空格，必须连续书写。作用选中二者各自元素范围的交集。例如h2.special的样式，只会作用于同时是h2且带special类的元素。案例演示：交集选择器标记选择器与类选择器交集，作用于特定元素//css部分

<style>

h2.special{//交集选择器

color:blue;

font-size:30px;

}

</style>

//html部分

<body>

<h1>示例文字000</h1>

<h2class="special">示例文字001</h2>

</body>运行观察选择器h2.special作用于<h2class="special">，而<h1>及其他h2不受影响。5.3.3并集选择器多个选择器用逗号连接，同时选中各自范围语法格式选择器1,选择器2,...{属性:值}要点各并列选择器之间使用逗号分隔；并列的选择器可以是标签名，也可以是id、class名称；任何形式的选择器都可以参与。案例演示：并集选择器多个选择器用逗号连接，批量设置样式//css部分

<style>

h1,h2,p{//并集选择器

font-size:12px;

color:green;

}

</style>

//html部分

<body>

<h1>示例文字000</h1>

<h2class="special">示例文字001</h2>

<pclass="special">示例文字002</p>

</body>运行观察选择器h1,h2,p的样式，会同时作用于这三类元素。5.3.4后代选择器又称包含选择器，可选择某元素的后代元素特点后代选择器（descendantselector）可选择作为某元素后代的元素，功能极其强大；根据祖先与后代之间的分隔符不同，有三种写法。三种写法①祖先后代（空格）：选择所有后代②父>子（>）：只选直接子元素③祖先*子子（*）：跳过直接子元素案例：按祖先元素选择后代祖先与后代之间用空格分隔//css部分

<style>

.aboutp{

color:green;

}

</style>

//html部分

<body>

<p>一段话</p>

<divclass="about">

<p>这是一句话</p>

<span>这是一个提示</span>

</div>

</body>运行观察样式作用于class为about的<div>的后代<p>，而<div>外的<p>保持不变。案例：按父元素选择直接子元素父元素>子元素，只选儿子辈//css部分

<style>

.fruits>span{

color:red;

}

</style>

//html部分

<body>

<divclass="fruits">

<span>苹果</span>

<span>香蕉</span>

<p>

<span>西瓜</span>

</p>

</div>

</body>运行观察样式仅作用于.fruits的直接子<span>；<p>内的<span>不是直接子元素，不受影响。案例：按隔代关系选择祖先*子子，跳过直接子元素//css部分

<style>

.invent*span{

color:blue;

}

</style>

//html部分

<body>

<divclass="invent">

<span>火药</span>

<span>指南针</span>

<p>

<span>造纸术</span>

<span>印刷术</span>

</p>

</div>

</body>运行观察样式只作用于第三个、第四个<span>（孙子辈），直接子元素<span>不受影响。5.3.5子选择器只选择某元素的直接子元素语法父元素>子元素“>”表示直接后继子元素；“>”符号两边可以有空格，这是可选的。与后代选择器的区别子选择器只选“儿子辈”元素；后代选择器可跨多层级选择所有后代。案例演示：子选择器父元素>子元素，选择直接子元素//css部分

<style>

.words>span{

color:red;

}

</style>

//html部分

<body>

<pclass="words">

我国的<span>四大名著</span>是非常经典的

</p>

</body>运行观察样式仅作用于.words的直接子<span>。5.3.6相邻选择器选择紧接在另一元素之后的兄弟元素语法选择器1+选择器2使用加号（+）相邻兄弟结合符。作用选中紧接在前一个元素之后的兄弟元素，二者必须具有相同的父元素。案例演示：相邻选择器用+选择相邻兄弟元素//css部分

<style>

.words+p{

color:blue;

}

</style>

//html部分

<body>

<pclass="words">

我国的<span>四大名著</span>是非常经典的

</p>

<p>

中国是一个历史悠久的国家

</p>

</body>运行观察样式作用于第二个<p>，因为它紧接在.words元素之后。5.3.7伪类选择器基于元素当前状态选择，名称前加冒号，不能随便取名5种链接状态a:link——未被访问的链接a:visited——已访问的链接a:focus——键盘选中、待激活a:hover——正被指向的链接a:active——激活时的链接书写顺序规则a:hover必须在a:link、a:visited之后；a:active必须在a:hover之后；伪类名称大小写不敏感；状态须按以上顺序书写。5.3.8伪对象选择器选择已有对象划分出的“伪”部分常用伪对象:first-letter——首字添加样式:first-line——首行文字样式:before/:after——前后添加内容:first-child/:last-child——首/末子元素:nth-child/:nth-last-child——第n个子元素注意CSS3用双冒号::区分伪对象与伪类；旧的单冒号写法仍然有效，如::first-letter、::before。案例演示：伪对象选择器为段落首字添加放大、加粗、左浮动效果//css部分

<style>

.objDesc{

width:300px;

border:1pxsolid#000;

background-color:#eeff66;

}

.objDesc::first-letter{

font-size:40px;

font-weight:bold;

float:left;

}

</style>

//html部分

<body>

<pclass="objDesc">

伪对象可以理解为本身并不是网页中一个可以单独存在的（全新的）对象，而是将已有的某些对象划分出来一些，所以是"伪"对象，

</p>

</body>运行观察::first-letter作用于p.objDesc的首字，呈现放大、加粗并左浮动的效果。任务实施用3种复合选择器完成水果分类页面的样式设置01新建项目文件创建index.html与styles.css02编写代码在index.html编写结构，在styles.css编写样式03运行预览在浏览器中打开index.html查看效果任务实施：index.html页面结构：三组水果分类+绿色组<!DOCTYPEhtml>

<htmllang="zh-CN">

<head>

<metacharset="UTF-8">

<metaname="viewport"content="width=device-width,initial-scale=1.0">

<title>CSS选择器任务示例</title>

<linkrel="stylesheet"href="styles.css">

</head>

<body>

<h1>水果分类</h1>

<divclass="red-group">

<h2>红色水果组</h2>

<pclass="fruit">苹果</p>

<pclass="fruitfavorite">草莓</p>

<pclass="fruit">樱桃</p>

<pclass="vegetable">红辣椒</p>

</div>

<divclass="yellow-group">

<h2>黄色水果组</h2>

<pclass="fruitfavorite">香蕉</p>

<pclass="fruit">柠檬</p>

<pclass="fruit">芒果</p>

<pclass="vegetable">南瓜</p>

</div>

<divclass="green-group">

<h2>绿色水果组</h2>

<pclass="fruit">西瓜</p>

<pclass="vegetablefavorite">西兰花</p>

<pclass="fruit">猕猴桃</p>

</div>

</body>

</html>任务实施：styles.css用后代、交集、并集三种选择器完成设置/*任务1：后代选择器-让red-group里的fruit文字变成红色*/

.red-group.fruit{

color:red;

}

/*任务2：交集选择器-让既是fruit又是favorite的p标签字体加粗*/

p.fruit.favorite{

font-weight:bold;

}

/*任务3：并集选择器-让red-group和yellow-group的背景都变成浅灰色*/

.red-group,.yellow-group{

background-color:#f5f5f5;

padding:15px;

margin:10px0;

border-radius:5px;

}

/*辅助样式：增加整体页面美观度*/

body{

font-family:"MicrosoftYaHei",sans-serif;

max-width:800px;

margin:0auto;

padding:20px;

}

h2{

color:#333;

margin-top:0;

}

p{

margin:8px0;

}任务实施：运行效果三种复合选择器协同，呈现清晰的分类效果颜色变化red-group内的.fruit文字变为红色；同时具有fruit与favorite类的<p>