《网页设计与制作（HTML5+CSS3）立体化项目教程》 课件 11.复合选择器_第1页
《网页设计与制作（HTML5+CSS3）立体化项目教程》 课件 11.复合选择器_第2页
《网页设计与制作（HTML5+CSS3）立体化项目教程》 课件 11.复合选择器_第3页
《网页设计与制作（HTML5+CSS3）立体化项目教程》 课件 11.复合选择器_第4页
《网页设计与制作（HTML5+CSS3）立体化项目教程》 课件 11.复合选择器_第5页
已阅读5页，还剩36页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

网页设计与制作（HTML5+CSS3）主讲教师：周礼萍0

1关系选择器02属性选择器03结构化选择器目录contents04状态化伪类选择器05伪元素选择器问题1：除了基础选择器，你还知道哪些选择器？问题2：为什么需要那么多选择器呢？PART1关系选择器交集选择器由两个基础选择器构成，其中第一个为标签选择器，第二个为class选择器，两个选择器之间不空格。交集选择器是并且的意思。即…又…的意思。交集选择器交集选择器是并且的意思。即...又...的意思比如：p.one选择的是：类名为.one的段落标签。在编辑器中，用户可以通过输入p.one生成一个类名为one的p标签如果只输入.one，默认标签是div，也就是会生成一个类名为one的div标签名类名交集选择器HTML代码CSS代码显示效果<div>内容1</div><divclass="red">内容2</div><span>内容3</span><pclass="red">内容4</p><p>内容5</p>p.red{ background-color:#ccc;}并集选择器（CSS选择器分组）是各个选择器通过逗号连接而成的，通常用于集体声明。任何形式的选择器（包括标签选择器、class类选择器id选择器等），都可以作为并集选择器的一部分。并集选择器并集选择器的意思，就是说只要逗号隔开的，所有选择器都会被选中，执行后面样式。并集选择器HTML代码CSS代码显示效果<div>内容1</div><divclass="red">内容2</div><span>内容3</span><pclass="red">内容4</p><p>内容5</p>p,·red{ background-color:#ccc;}后代选择器又称为包含选择器，用来选择元素或元素组的后代其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔当标签发生嵌套时，内层标签就成为外层标签的后代后代选择器后代选择器HTML代码CSS代码显示效果<div>

<p>div的儿子p</p>

<p>div的儿子p</p>

<ahref="#">

<p>div的孙子p</p>

<p>div的孙子p</p>

</a><h2>div的儿子h2</h2>

</div>divp{ background-color:#ccc;}

子代选择器只能选择作为某元素的子元素其写法就是把父级标签写在前面，子级标签写在后面，中间跟一个">"大于符号进行连接注意符号左右两侧各保留一个空格子代选择器子代选择器HTML代码CSS代码显示效果<div>

<p>div的儿子p</p>

<p>div的儿子p</p>

<ahref="#">

<p>div的孙子p</p>

<p>div的孙子p</p>

</a><h2>div的儿子h2</h2></div>div>p{ background-color:#ccc;}

兄弟选择器用“+”号来连接前后两个选择器如:A+B选择器的AB两个元素是并列（即兄弟关系）选择的B一定是紧挨A第一个B元素临近兄弟选择器使用“~”号来连接前后两个元素如:A~B只要是同级A后面的B都会被选中普通兄弟选择器兄弟选择器HTML代码CSS代码显示效果<div><div>div内部div元素</div><h2>div内部h2元素</h2><p>div内部p元素</p><p>div内部p元素</p></div><p>div之后的第1个P元素</p><p>div之后的第2个P元素</p>div+p{background-color:#ccc;}

div~p{background-color:#ccc;}关系选择器小结选择器含义A·B交集选择器一个类名为B的A标签，两者同时满足A,B并集选择器一个A标签和一个id名为B的同时选中AB后代选择器A标签包含的B标签全部选中A>B子代选择器直属A标签下的子元素B才被中A+B临近兄弟选择器紧跟A标签的同级B标签被选中A～B普通兄弟选择器同级A标签后面的B标签被全部选中任务实践在不修改提供素材代码的前提下，完成以下任务：1）“登录”的颜色为红色,同时主导航栏里面的所有的链接改为橙色2）主导航栏和侧导航栏里面文字都是14像素并且是微软雅黑3）主导航栏里面的一级菜单链接文字颜色为绿色<nav><ul><li><ahref="#">公司首页</a></li><li><ahref="#">公司简介</a></li><li><ahref="#">公司产品</a></li><li><ahref="#">联系我们</a><ul><li><ahref="#">公司邮箱</a></li>

<li><ahref="#">公司电话</a></li></ul></li></ul></nav><divclass="subnav"><divclass="aside-l">左侧侧导航栏</div><ahref="#"class="asid-r">登录</a></div>PART2属性选择器属性选择器属性选择器可以根据元素的属性及属性值来选择元素，属性选择器必须使用[]中括号属性选择器的用法描述如下：attr表示属性名，val表示属性值属性名描述[attr]匹配指定的属性名的所有元素[attr=val]匹配属性等于指定的值所有元素[attr^=val]匹配属性以指定的属性值开头的所有元素[attr$=val]匹配属性以指定属性值结尾的所有元素[attr*=val]匹配属性值中包含指定属性值的所有元素HTML代码CSS代码显示效果<h2align="right">路在脚下</h2><h3align="center">勇往直前</h3><h4align="left">追求卓越</h4><h2>成就梦想</h2>[align]{ background-color:#ccc;}

[align="center"]{ background-color:#ccc;}

HTML代码CSS代码显示效果<pclass="jinli">尽力就好，只求无愧于心</p><pclass="nuli">努力就好，只求无怨无悔</p><pclass="zixin">自信就好，无需迷茫</p><pclass="jianchi">坚持就好，无需退缩</p>[class^="j"]{background-color:#ccc;}

[class$="i"]{ background-color:#ccc;}

[class*="n"]{background-color:#ccc;}PART3结构化选择器:root选择器:root选择器用于匹配文件的根标签在HTML中根标签指的是<html>标签因此使用:root的选择器定义的样式，对所有页面标签都生效HTML代码CSS代码显示效果<h3>《劝学诗》</h3><h4>唐·颜真卿</h4><p>三更灯火五更鸡，正是男儿读书时。</p><p>黑发不知勤学早，白首方悔读书迟。</p>:root{background-color:#ccc;}:not选择器:not选择器用于匹配除设置标签或属性之外的标签如:not([class=”one”])选择类名不等于one的所有元素HTML代码CSS代码显示效果<h3>《劝学诗》</h3><h4>唐·颜真卿</h4><p>三更灯火五更鸡，正是男儿读书时。</p><p>黑发不知勤学早，白首方悔读书迟。</p>p{background-color:#fff;}:not(p){background-color:#ccc;}:only-child选择器:only-child选择器用于匹配父标签中唯一的子元素即父元素只有一个子元素，且必须是指定元素HTML代码CSS代码显示效果<div>

<p>DIV的独子p</p></div><div>

<span>DIV的大儿子span</span>

<p>DIV的二儿子p</p></div><ahref="#">

<p>a的独子p</p></a>p:only-child{background-color:#ccc;}:empty选择器:empty选择器用于选择没有子标签或内容为空的所有标签HTML代码CSS代码显示效果<p>用心去感受生活中的每一份美好</p><p>让自己充满力量</p><p></p>p:empty{width:200px;height:10px;background-color:#f00;}:nth-child(n)和:nth-of-type(n)选择器选择器示例示例说明:first-of-typep:first-of-type选择每个

p元素是其父元素的第一个p元素:last-of-typep:last-of-type选择每个p元素是其母元素的最后一个p元素:nth-last-of-type(n)p:nth-last-of-type(2)选择所有p元素倒数的第二个为p的子元素:nth-of-type(n)p:nth-of-type(2)选择所有p元素第二个为p的子元素:first-childp:first-child选择父元素中的第一个子元素p:last-childp:last-child选择父元素中的最后一个子元素p:nth-last-child(n)p:nth-last-child(2)选择父元素中的倒数第二个子元素p:nth-child(n)p:nth-child(2)选择所有

p元素的父元素的第二个子元素:first-letterp:first-letter选择每个<p>元素的第一个字母:first-linep:first-line选择每个<p>元素的第一行nth-child（n）

n可以是数字，关键字和公式n如果是数字，就是选择第n个常见的关键词even偶数odd奇数常见的公式如下(如果n是公式，则从0开始计算）公式取值2n偶数2n+1奇数5n51015...n+5从第5个开始（包含第五个）到最后-n+5前5个（包含第5个）...:nth-child(n)和:nth-of-type(n)的区别nth-child(n)是匹配父元素第n个子元素，与元素类型无关，一般用于子元素完全相同的列表。nth-of-type(n)匹配父元素特定类型的第n个元素，推荐使用:nth-child(n)和:nth-of-type(n)的区别HTML代码CSS代码代码分析<section><p>你好</p><div>hello</div> <div>hello2</div> <div>hello3</div></section>sectiondiv:nth-child(1){color：tomato；

}选择section的第1个孩子，且名字是div/*选不出来*/

因为section的第一个孩子是psectiondiv:nth-of-type(1){color:blue;}选择section的第1个叫div的孩子/*选出hello*/:has(

)选择器:has()选择器，用于检查给定元素中是否包含某些子元素，如果符合匹配条件则将其选定，之后对样式做相应设置。HTML代码CSS代码显示效果<div>1

<span></span></div><div>2</div>div{width:100px;height:100px;border:1pxsolid#333;}div:has(span){background-color:red;}:has(

)选择器:has()选择器还能选择给定元素的上一个同级元素CSS中的兄弟选择器只允许选择下一个同级元素，但无法选择上一个同级元素但是:has()结合兄弟选择器就可以选中上一个元素HTML代码CSS代码显示效果<div>1</div><div>2</div><div>3</div><p>段落1</p><div>4</div><hr><p>段落2</p>div:has(+p){background-color:#ccc;}:target目标选择器：target选择器可用于当前活动的target元素的样式，配合锚点链接一起使用。HTML代码CSS代码显示效果<ahref="#news1">标签1</a><ahref="#news2">标签2</a><ahref="#news3">标签3</a><div>点击标签，展开对应内容</div><sectionid="news1">内容1

<p>...</p></section><sectionid="news2">内容2

<p>...</p></section>...section{height:20px;overflow:hidden;}:target{height:100px;background-color:#ccc;}（点击前效果）（点击后效果）任务实践.bigbox宽度300px.smallboxa.box1：300px*35px;圆角：10px;字号：16px，颜色#555；背景：#ddd-#666;p:300*0;字体：14px;margin:5px0;左内边距10px;PART4状态化伪类选择器状态化伪类选择器状态化伪类选择器主要用于超链接和鼠标操作配合的场景使链接在单击前、单击后、鼠标点击时、悬停时,显示不同的样式。常用的状态化伪类选择器有四种,分别为:link、:visited、:hover、:active选择器描述:link选择所有未访问链接:visited选择所有访问过的链接:active选择正在活动链接:hover把鼠标放在链接上的状态:focus选择元素输入后具有焦点书写时其顺序尽量不要颠倒，按照lvha顺序，可用如下方式快速记忆：lovehate爱恨记忆法。在实际开发中，一般常用鼠标经过时状态，如：a:hover{/*:hover是链接伪类选择器鼠标经过*/color:red;/*鼠标经过的时候，由原来的灰色变成了红色*/}状态化伪类选择器PART5伪元素选择器之所以被称为伪元素，是因为它们不是真正的页面元素html没有对应的元素，但是其所有用法和表现行为与真正的页面元素一样可以对其使用诸如页面元素一样的css样式伪元素选择器伪元素示例示例说明::b

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论