网页设计与制作教程Web前端开发（第7版）课件：CSS3基础-CSS的选择器

上传人：熊*** IP属地：山东上传时间：2025-02-16 格式：PPTX 页数：88 大小：3.36MB 积分：25 举报 版权申诉

网页设计与制作教程Web前端开发（第7版）课件：CSS3基础-CSS的选择器_第2页

网页设计与制作教程Web前端开发（第7版）课件：CSS3基础-CSS的选择器_第3页

网页设计与制作教程Web前端开发（第7版）课件：CSS3基础-CSS的选择器_第4页

网页设计与制作教程Web前端开发（第7版）课件：CSS3基础-CSS的选择器_第5页

已阅读5页，还剩83页未读，继续免费阅读

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

文档简介

本节介绍CSS的选择器。选择器（selector）也被称为选择符，CSS选择器用于指明样式对哪些元素生效。

CSS3基础CSS的选择器目录

CSS3基础4.1CSS设计与编写原则4.2在HTML中使用CSS的方法4.3CSS的两个主要特性4.4CSS的基本语法4.5CSS的选择器4.6属性值的写法和单位4.7HTML文档结构与元素类型4.8实训——制作内容详情页习题44.5CSS的选择器4.5.1元素选择器元素选择器的格式如下：E{property1:value1;property2:value2;...}例如，下面定义为网页设置默认字体。body,p,div,blockquote,td,th,dl,ul,ol{font-family:Verdana,Arial,Helvetica;font-size:1em;color:black;}4.5CSS的选择器4.5.2通配符选择器在编写代码时，用“*”表示通配符选择符。其格式为：*{property1:value1;property2:value2;...}例如，代码如下：*

{margin:0px;/*外边距设置为0*/padding:0px;/*内边距设置为0*/}4.5CSS的选择器【例4-7】通配符选择器示例。本例文件4-7.html在浏览器中显示的效果如图4-10所示。4.5CSS的选择器<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>通配符选择器</title><styletype="text/css">*{color:#000;}/*所有文字的颜色为黑色*/p{color:#00f;}/*段落文字的颜色为蓝色*/p*{color:#f00;}/*段落子元素文字的颜色为红色*/</style></head><body><div><h3>通配符选择器</h3><div>默认的文字颜色为黑色</div><p>段落文字颜色为蓝色</p><p>段落<span>段落子元素的文字颜色为红色</span>段落</p></div></body></html>4.5CSS的选择器4.5.3属性选择器属性选择器的格式如下：E[attribute]{property1:value1;property2:value2;...}4.5CSS的选择器4.5CSS的选择器【例4-8】属性选择器示例，本例文件4-8.html在浏览器中显示的效果如图4-11所示。4.5CSS的选择器<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>属性选择器示例</title><styletype="text/css">img[alt]{border:3pxsolid#00F;}/*作用任何带alt属性的img元素*/a[href][title]{font-weight:bold;}/*作用同时带href和title属性的a元素*/a[href=""][title="淘宝"]{font-size:18px;}/*作用地址指向并且title为"淘宝"的a元素*/a[title~="baidu"]{color:red;}*[lang\|="en"]{color:blue;}p[title^="my"]{color:yellow;}p[title$="Test"]{color:green;}p[title\*="est"]{background-color:aqua;}</style></head>4.5CSS的选择器<body><p><imgsrc="images/tulip.jpg"alt="郁金香"width="200"height="120"><imgsrc="images/tulip.jpg"width="200"height="120"></p><ahref=""title="淘宝">淘宝网</a><ahref="/"title="wwwbaiducom">红色</a><plang="en">E[attribute\|=value]属性值选择器</p><plang="en-US">E[attribute\|=value]属性值选择器</p><ptitle="myTest">E[attribute^=value]属性值子串选择器</p><ptitle="myTest">E[attribute$=value]属性值子串选择器</p><ptitle="myTest">E[attribute\*=value]属性值子串选择器</p></body></html>4.5CSS的选择器4.5.4派生选择器1.后代选择器后代选择器（DescendantSelector）又称为包含选择器，后代选择器可以选择某元素后代的元素，两个元素之间的层次间隔可以是无限的。其格式如下：父元素子元素{

property1:valuel1;property2:value2;...}4.5CSS的选择器【例4-9】后代选择器示例，希望只对h3元素中的em元素应用样式，本例文件4-9.html在浏览器中显示的效果如图4-12所示。4.5CSS的选择器<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>后代选择器示例</title><styletype="text/css">h3em{color:red;}</style></head><body><h3>HTML5语言<em>基础</em>知识</h3><h3>HTML5语言基础知识</h3><p>HTML5的标签按功能类别分为<em>基础</em>标签、格式标签、链接标签等。</p></body></html>4.5CSS的选择器2.子元素选择器其格式如下：父元素>

子元素{property:valuel;property2:value2;...}子选择器使用了大于号（子结合符）。子结合符两边可以有空白符，这是可选的。4.5CSS的选择器例如，如果希望选择只作为h3元素子元素的strong元素，可以这样写：h3>strong{color:red;}如果从右向左读，选择器h3>strong可以解释为“选择作为h3元素子元素的所有strong元素”。这个规则会把第一个h3下面的两个strong元素变为红色，但是第二个h3中的strong不受影响：<h3>这是<strong>非常</strong><strong>非常</strong>重要</h3><h3>这是<em>真的<strong>非常</strong></em>重要</h3>4.5CSS的选择器3.相邻兄弟选择器其格式如下：兄弟1+

兄弟2{property:valuel;property2:value2;...}4.5CSS的选择器例如，如果要把紧接在h3元素后出现的元素段落p改成红色，可以这样写：h3+p{color:red;}这个选择器读作：“选择紧接在h3元素后出现的p段落，h3和p元素拥有共同的父元素”。【例4-10】相邻兄弟选择器示例，本例文件4-10.html在浏览器中显示的效果如图4-13所示。4.5CSS的选择器<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>相邻兄弟选择器示例</title><styletype="text/css">h3+p{color:red;}p+p+p{color:blue;}li+li{background-color:aqua;}</style></head><body><p>第零个段落</p><p>第一个段落</p><h3>标题3</h3><p>第二个段落</p><p>第三个段落</p><p>第四个段落</p><p>第五个段落</p>4.5CSS的选择器<div><ul><li>咖啡</li><li>茶</li><li>可口可乐</li></ul><ol><li>面包</li><li>馍</li><LI>汉堡</LI></ol></div></body></html>4.5CSS的选择器4.5.5兄弟选择器其格式如下：元素1~

元素2{

property1:value1;property2:value2;...}4.5CSS的选择器【例4-11】兄弟选择器示例，本例文件4-11.html在浏览器中显示的效果如图4-14所示。4.5CSS的选择器<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>兄弟选择器示例</title><styletype="text/css">h3~p{background-color:aqua;}</style></head><body><h3>标题3</h3><h2>标题2</h2><p>段落一，父元素是body</p><p>段落二，父元素是body</p><div><p>div元素中的段落一，这里p的父元素是div，与h3不是同一个父元素，不受影响</p><p>div元素中的段落二，这里p的父元素是div，与h3不是同一个父元素，不受影响</p></div><h2>标题2</h2><p>段落三，父元素是body</p></body></html>4.5CSS的选择器4.5.6id选择器定义id选择器时要在id名称前加上一个“#”号。其格式为：E#idValue{propertyl:valuel;property2:value2;...}4.5CSS的选择器【例4-12】id选择器示例，本例文件4-12.html在浏览器中显示的效果如图4-15所示。4.5CSS的选择器<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>id选择器示例</title><styletype="text/css">#title{color:red;}#sub_title{background-color:aqua;}#p_content,#p_titlestrong{color:blue;}p{text-indent:2em;}</style></head>4.5CSS的选择器<body><h2id="title">CSS3简介</h2><pid="p_content">CSS（CascadingStyleSheet，也叫层叠样式表），简称为样式表，CSS是用于定义如何显示HTML元素，控制网页样式并将样式与网页内容分离的一种标记性语言。</p><h2id="sub_title">CSS3语法基础</h2><p>CSS的基本语法由两部分组成，其格式为：</p><pid="p_title"><strong>selector{property1:value1;property2:value2;...}</strong></p><p>selector被称为选择器，选择器决定了样式定义需要改变的HTML元素。property:value被称为样式声明，有一条或多条样式时，用冒号隔开，以分号结束，包含在一对大括号“{}”内。</p></body></html>4.5CSS的选择器4.5.7类选择器类选择器可以为指定class的HTML元素指定样式。其格式如下：E.classValue{

property1:value1;property2:value2;...}4.5CSS的选择器【例4-13】class选择器示例，本例文件4-13.html在浏览器中显示的效果如图4-16所示。4.5CSS的选择器<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>class选择器示例</title><styletype="text/css">.keynote{background:beige;font-weight:bold;color:blue;}p.important{color:red;}</style></head>4.5CSS的选择器<body><h2class="keynote">CSS3简介</h2><p>CSS（CascadingStyleSheets，也叫层叠样式单），简称为样式表，CSS是用于定义如何显示HTML元素，控制网页样式并将样式与网页内容分离的一种标记性语言。</p><h2>CSS3语法基础</h2><pclass="keynote">CSS的基本语法由两部分组成，其格式为：</p><pclass="important"><strong>selector{property1:value1;property2:value2;...}</strong></p><p>selector被称为选择器，选择器决定了样式定义需要改变的HTML元素。property:value被称为样式声明，有一条或多条样式时，用冒号隔开，以分号结束，包含在一对大括号“{}”内。</p></body></html>4.5CSS的选择器4.5.8伪类选择器伪类选择器的语法格式如下：selector:pseudo-class{

property1:value1;property2:value2;...}selector表示一个选择器。pseudo-class表示伪类名。4.5CSS的选择器CSS类也可与伪类搭配使用。伪类选择器的语法格式如下：selector.class

:pseudo-class{property:value}4.5CSS的选择器【例4-14】伪类的应用。当鼠标悬停在超链接的时候背景色变为其他颜色，并且添加了边框线，待鼠标离开超链接时又恢复到默认状态，这种效果就可以通过伪类实现。本例文件4-14.html在浏览器中的显示效果如图4-17所示。

4.5CSS的选择器<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>伪类示例</title><styletype="text/css">a:link{color:blue;}/*超链接单击之前是蓝色*/a:visited{color:red;}/*超链接单击之后是红色*//*鼠标悬停是绿色，较大的字体，背景是湖绿色*/a:hover{color:green;font-size:large;background-color:aqua;}/*鼠标单击链接，但是不松手的时候，字体是黑色，背景是蓝紫色*/a:active{color:black;background-color:blueviolet;}input:focus{background-color:yellow;}/*输入框获得焦点时，背景色是黄色*//*列表的第一项元素字体是22px，背景色是浅蓝色*/li:first-child{font-size:22px;background-color:#00FFFF;}</style></head>4.5CSS的选择器

<body><p>应用最为广泛锚点元素a的几种状态（未访问链接状态、已访问链接状态、鼠标指针悬停在链接上的状态和被激活的链接状态）:<br> <ahref="/"target="_blank">淘宝</a><br/> <ahref="/"target="_top">哔哩哔哩</a></p><formaction="login"method="post">

用户名：<inputtype="text"name="username"id="username"value=""><br>

密码：<inputtype="password"name="password"id="password"value=""></form><divid=""><ul><li>咖啡</li><li>茶</li><li>可口可乐</li></ul><ol><li>面包</li><li>馍</li><li>汉堡</li></ol></div></body></html>4.5CSS的选择器【例4-15】:first-child伪类示例，使用:first-child伪类选择元素的第一个子元素。本例文件4-15.html在浏览器中显示如图4-18所示。<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>:first-child伪类示例</title><styletype="text/css">/*把作为某元素的第一个子元素的所有p元素设置为粗体、红色*/p:first-child{font-weight:bold;color:red;}/*把作为某个元素（在HTML中肯定是ol或ul元素）第一个子元素的所有li元素变成大字体、黄色背景*/li:first-child{font-size:large;background-color:yellow;}/*把作为某个元素第一个元素的所有b、strong元素变成蓝色*/b:first-child,strong:first-child{color:blue;}</style></head>

4.5CSS的选择器<body><div><p>世界三大饮料</p><ul><li>刺激兴奋的可可</li><li>浪漫<strong>浓郁</strong>的<strong>咖啡</strong></li><li>自然清新的<strong>茶</strong>香</li></ul><p><b>可可、咖啡、茶</b>并称当今世界的<b>三大</b>无酒精饮料，不同文化背景的国家在<b>饮品</b>选择方面有着各具特色的偏好。</p></div><p><b>注释：</b>必须声明DOCTYPE，这样:first-child才能在IE中生效。</p></body></html> 4.5CSS的选择器【例4-16】:lang伪类示例。本例文件4-16.html在浏览器中显示如图4-19所示。<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>:lang伪类示例</title><styletype="text/css">/*定义对语言为zh的元素起作用*/:lang(zh){border:1pxsolidred;height:30px;}q:lang(no){quotes:"【""】";}</style></head><body><divlang="zh">定义对语言为zh的元素起作用</div><div>没有指定lang，对元素不起作用</div><plang="zh">定义对语言为zh的元素起作用</p><p>文字<qlang="no">段落中的引用的文字</q>文字</p></body></html>

4.5CSS的选择器4.5.9UI元素状态伪类选择器UI元素状态伪类选择器的语法格式如下：E[type="元素类型属性值"]:pseudo-class{

property1:value1;property2:value2;...}4.5CSS的选择器4.5CSS的选择器1.E:hover、E:active和E:focus伪类选择器例如，关键代码为：<styletype="text/css">input:focus{outline:1pxsolidred;/*对所有input元素设置获取焦点时的样式*/}</style><p><labelfor="name">姓名:</label><inputtype="text"name="name"/></p><p><labelfor="email">邮箱:</label><inputtype="text"name="email"/></p>4.5CSS的选择器【例4-17】E:hover、E:active和E:focus伪类选择器的应用，本实例文件4-17.html在浏览器中运行时，鼠标指针经过、鼠标单击（但未松开）、鼠标获得焦点（单击松开）在浏览器中的显示效果如图4-20所示。4.5CSS的选择器<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>选择器E:hover、E:active和E:focus应用</title><styletype="text/css">input[type="text"]:hover{/*姓名框，鼠标经过（悬停）*/background-color:pink;}input[type="text"]:focus{/*鼠标获得焦点（点击）并进行文字输入时*/background-color:#ccc;}input[type="text"]:active{/*鼠标按下（按下还未松开）*/background-color:yellow;}input[type="password"]:hover{/*密码框，鼠标经过（悬停）*/background-color:red;}</style></head>4.5CSS的选择器<body><h3>选择器E:hover、E:active和E:focus</h3><form>

姓名:<inputtype="text"placeholder="请输入姓名"><br><br>

密码:<inputtype="password"placeholder="请输入密码"></form></body></html>4.5CSS的选择器2.E:enabled与E:disabled伪类选择器【例4-18】E:enabled与E:disabled伪类选择器的应用，本实例文件4-18.html“可用”和“不可用”在浏览器中的显示效果如图4-21所示。4.5CSS的选择器<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>E:enabled与E:disabled伪类选择器</title><styletype="text/css">input[type="text"]:enabled{/*可用状态*/outline:1pxsolid#63E3FF;}input[type="text"]:disabled{/*不可用状态*/background-color:#FFD572;}</style></head><body><form><p><labelfor="enabled">姓名:</label><inputtype="text"name="en"></p><p><labelfor="disabled">学校:</label><inputtype="text"name="dis"disabled="disabled"></p></form></body></html>4.5CSS的选择器3.E:read-only与E:read-write伪类选择器【例4-19】E:read-only与E:read-write伪类选择器的应用，本实例文件4-19.html“可读写”和“只读”在浏览器中的显示效果如图4-22所示。4.5CSS的选择器<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>read-only与E:read-write伪类选择器</title><styletype="text/css">input[type="text"]:read-write{/*读写*/outline:1pxsolid#63E3FF;}input[type="text"]:read-only{/*只读*/background-color:#EEEEEE;}</style></head><body><form><p><labelfor="text1">读写:</label><inputtype="text"name="text1"></p><p><labelfor="text2">只读:</label><inputtype="text"name="text2"readonly="readonly"></p></form></body></html>4.5CSS的选择器4.E:checked、E:default和indeterminate伪类选择器【例4-20】E:checked和E:indeterminate伪类选择器的应用，本实例文件4-20.html在浏览器中的显示效果如图4-23所示。4.5CSS的选择器<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>E:checked和E:indeterminate伪类选择器</title><styletype="text/css">input[type="checkbox"]:checked{outline:2pxsolidgreen;}input[type="radio"]:indeterminate{outline:2pxsolidred;}</style></head><body><h3>E:checked和E:indeterminate伪类选择器</h3><form><p>您的爱好:<inputtype="checkbox">美食<inputtype="checkbox">健身<inputtype="checkbox">影视<inputtype="checkbox">旅游</p><p>您的性别:<inputtype="radio"name="gender">男<inputtype="radio"name="gender">女</p></form></body></html>4.5CSS的选择器5.E::selection伪类选择器【例4-21】E::selection伪类选择器的应用，本实例文件4-21.html在浏览器中的显示效果如图4-24所示。4.5CSS的选择器<!DOCTYPEhtml><html><head><metacharset="utf-8"><title></title><styletype="text/css">div::selection{background-color:red;/*选中div元素的背景色：红色*/color:white;/*白色字体*/}p::selection{background-color:orange;/*选中p元素的背景色：橘色*/color:white;/*白色字体*/}</style><body><div>在浏览器中选中本行文本，背景色为红色</div><p>在浏览器中选中本行文本，背景色为橘色</p></body></html>4.5CSS的选择器6.E:invalid和E:valid伪类选择器【例4-22】E:invalid与E:valid伪类选择器的应用。本实例文件4-22.html在浏览器中的显示效果如图4-25所示。4.5CSS的选择器<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>E:invalid与E:valid伪类选择器</title><styletype="text/css">input[type="email"]:invalid{color:red;}input[type="email"]:valid{color:green;}</style></head><body><h3>E:invalid和E:valid伪类选择器</h3><form><inputtype="email"placeholder="请输入邮箱"></form></body></html>4.5CSS的选择器7.E:required与E:optional伪类选择器【例4-23】E:required与E:optional伪类选择器的应用，本实例文件4-23.html在浏览器中的显示效果如图4-26所示。4.5CSS的选择器<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>E:required与E:optional伪类选择器</title><styletype="text/css">input[type="text"]:required{background:yellow;}input[type="text"]:optional{background:pink;}</style></head><body><h3>E:required与E:optional伪类选择器</h3><form>

姓名:<inputtype="text"placeholder="请输入姓名"required><br><br>

学校:<inputtype="text"placeholder="请输入学校"></form></body></html>4.5CSS的选择器8.E:in-range与E:out-of-range伪类选择器【例4-24】E:in-range指定输入值在该范围之内显示绿色背景，E:out-of-range指定输入值超过限定的范围显示红色背景，本实例文件4-24.html在浏览器中的显示效果如图4-27所示。4.5CSS的选择器<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>E:in-range与E:out-of-range伪类选择器</title><styletype="text/css">input[type="number"]:in-range{color:#ffffff;background:green;}input[type="number"]:out-of-range{background:red;color:#ffffff;}</style></head><body><h3>E:in-range与E:out-of-range伪类选择器</h3><inputtype="number"min="0"max="100"value="0"></body></html>4.5CSS的选择器4.5.10结构伪类选择器伪类选择器的语法格式如下：selector:pseudo-class{

property1:value1;property2:value2;...}4.5CSS的选择器4.5CSS的选择器1.:root伪类选择器【例4-25】:root伪类选择器示例。在样式表中分别定义了:root的背景色和body的背景色。本例文件4-25.html在浏览器中的显示效果如图4-28所示。4.5CSS的选择器<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>:root伪选择器示例</title><styletype="text/css">:root{background-color:gainsboro;}body{background-color:darkgrey;}</style></head><body><h3>2020年编程语言排行</h3><ol><li>Java语言</li><li>C语言</li><li>Python语言</li><li>C++语言</li><li>C#语言</li><li>VisualBasic.NET语言</li><li>JavaScript语言</li></ol></body></html>4.5CSS的选择器2.:first-child、:last-child、:nth-child、:nth-last-child和:only-child【例4-26】子节点伪类选择器示例，本例文件4-26.html在浏览器中的显示效果如图4-29所示。4.5CSS的选择器<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>:child</title><styletype="text/css">/*定义对作为其父元素的第一个子节点的li元素起作用的CSS样式*/li:first-child{border:1pxsolidblack;}/*定义对作为其父元素的最后一个子节点的li元素起作用的CSS样式*/li:last-child{background-color:#aaa;}/*定义对作为其父元素的第2个子节点的li元素起作用的CSS样式*/li:nth-child(2){color:#888;}/*定义对作为其父元素的倒数第2个子节点的li元素起作用的CSS样式*/li:nth-last-child(2){font-weight:bold;}/*定义对作为其父元素的唯一的子节点的span元素起作用的CSS样式*/span:only-child{font-size:30pt;font-family:"隶书";}</style></head>4.5CSS的选择器<body><ol><li>Java语言</li><li>C语言</li><li>Python语言</li><li>C++语言</li><li>C#语言</li><li>VisualBasic.NET语言</li><li>JavaScript语言</li></ol><ul><liid="java">Java语言</li><liid="c">C语言</li><liid="python">Python语言</li><liid="cplus">C++语言</li><liid="vb">VisualBasic.NET语言</li><li><spanid="js">JavaScript语言</span></li></ul><span>2023年编程语言排行</span></body></html>4.5CSS的选择器【例4-27】nth-child和nth-last-child伪类选择器示例。本例文件4-27.html在浏览器中显示如图4-30所示。<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>:nth-child</title><styletype="text/css">/*定义对作为其父元素的奇数个子节点的li元素起作用的CSS样式*/li:nth-child(odd){margin:10px;border:2pxdottedblack;}/*定义对作为其父元素的偶数个子节点的li元素起作用的CSS样式*/li:nth-child(even){padding:4px;border:1pxsolidblack;}/*定义对作为其父元素的倒数第3n+1个（1、4、7）子节点的li元素起作用的CSS样式*/li:nth-last-child(3n+1){border:2pxsolidblack;}</style></head>4.5CSS的选择器<body><ul><liid="java">Java语言</li><liid="c">C语言</li><liid="python">Python语言</li><liid="cplus">C++语言</li><liid="vb">VisualBasic.NET语言</li><liid="js">JavaScript语言</li></ul></body></html>4.5CSS的选择器3.:first-of-type、:flast-of-type、:nth-of-type、:nth-last-of-type和:only-of-type【例4-28】伪类选择器示例，本例文件4-28.html在浏览器中的显示效果如图4-31所示。4.5CSS的选择器<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>:type</title><styletype="text/css">p{padding:5px;}/*匹配p选择器，且是与它同类型、同级的兄弟元素中的第一个的CSS样式*/p:first-of-type{border:1pxsolidblack;}/*匹配p选择器，且是与它同类型、同级的兄弟元素中的最后一个的CSS样式*/p:last-of-type{background-color:#aaa;}/*匹配p选择器，且是与它同类型、同级的兄弟元素中的第2个的CSS样式*/p:nth-of-type(2){color:#888;}/*匹配p选择器，且是与它同类型、同级的兄弟元素中的倒数第2个的CSS样式*/p:nth-last-of-type(2){font-weight:bold;}</style></head>4.5CSS的选择器<body><div>2020年编程语言排行</div><p>No.1</p><p>No.2</p><p>No.3</p><p>No.4</p><hr><div><divid="java">Java语言</div><divid="c">C语言</div><pid="python">Python语言</p><pid="cplus">C++语言</p><pid="vb">VisualBasic.NET语言</p><pid="js">JavaScript语言</p><divid="php">PHP语言</div></body></html>4.5CSS的选择器4.:empty伪类选择器【例4-29】:empty伪类选择器示例，本例文件4-29.html在浏览器中的显示效果如图4-32所示。4.5CSS的选择器<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>:empty</title><styletype="text/css">/*定义对空元素起作用的CSS样式*/:empty{border:1pxsolidbrown;height:60px;}</style></head><body><imgsrc="baidu.jpg"alt=""><div></div><div></div></body></html>4.5CSS的选择器4.5.11其他伪类选择器1.:target伪类选择器【例4-30】:target伪类选择器示例。单击导航栏中的菜单，目标区域显示为黄色背景，本例文件4-30.html在浏览器中的显示效果如图4-33所示。4.5CSS的选择器<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>:target</title><styletype="text/css">/*目标区域为黄色背景*/:target{background-color:#ff0;}</style></head>

4.5CSS的选择器<body><pid="menu"><ahref="#groupbuy">团购</a>|<ahref="#brandmake">品牌</a>|<ahref="#coupon">优惠卷</a>|<ahref="#integrationcenter">积分中心</a></p><divid="groupbuy"><h3>团购</h3><p>今天团购...</p></div><divid="brandmake"><h3>品牌</h3><p>今日大牌...</p></div><divid="coupon"><h3>优惠券</h3><p>100-10元优惠券</p></div><divid="integrationcenter"><h3>积分中心</h3><p>您的积分...</p></div></body></html>4.5CSS的选择器2.:not伪类选择器【例4-31】:not伪类选择器示例，本例文件4-31.html在浏览器中的显示效果如图4-34所示。4.5CSS的选择器<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>:not</title><styletype="text/css">/*将id不是python的列表项显示为棕色加粗*/li:not(#python){color:brown;font-weight:bold;}</style></head><body><ul><liid="java">Java语言</li><liid="c">C语言</li><liid="python">Python语言</li><liid="cplus">C++语言</li><liid="vb">VisualBasic.NET语言</li><liid="js">JavaScript语言</li></ul></body></html>4.5CSS的选择器4.5.12伪元素选择器CSS3为了区分伪类和伪元素，规定伪类用一个冒号(:)来表示，伪元素用两个冒号(::)来表示。伪元素由双冒号和伪元素名称组成。伪元素的语法格式如下：selector::pseudo-element{

property1:value1;property2:value2;...}4.5CSS的选择器CSS类也可以与伪元素配合使用：selector.class::pseudo-element{

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

温馨提示

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

网页设计与制作教程Web前端开发（第7版）课件：CSS3基础-CSS的选择器

文档简介

温馨提示

最新文档

评论

网页设计与制作教程Web前端开发（第7版）课件：CSS3基础-CSS的选择器

文档简介

温馨提示

最新文档

评论

相关文档