HTML练习题2
2018-06-03 本文已影响0人
精彩i人生
作业答案：
1.plate 元素选择器
2.bento 元素选择器
3.#fancy id选择器
4.plate apple 后代选择器
5.#fancy pickle 交集选择器
6..small 类选择器
7.bento .small,plate .small 并集选择器
8.bento orange.small 交集选择器
9.bento,plate 并集选择器
10.* 通配选择器
11.plate * 交集通配选择器
12.plate+apple 兄弟选择器（后边一个元素）
13.bento ~ pickle 兄弟选择器（后边所有元素）
14.plate > apple 子元素选择器
15.plate :first-child 子元素选择器（为第一个子元素）
16.apple,plate pickle 并集选择器
only-child 选择父元素只包含一个同类型子元素
17.apple,pickle 并集选择器
18.plate:nth-child(3) 子元素选择器（为指定位置的子元素）
19.bento:first-of-type 子元素选择器（为bento标签第一个子元素）
20.apple:first-of-type 子元素选择器（为apple标签第一个子元素）
21.plate:nth-of-type 子元素选择器 （为plate标签偶数子元素）
22.plate:nth-child(2n+3) 子元素选择器（选择第2n+3个plate元素）【公式2n+3中n是计数器（从0开始）3是偏移值】
apple:only-of-type 选择父元素只包含一个同类型子元素，且包含apple元素
24.orange:last-of-type,apple:last-of-type 子元素选择器（选择最后一个标签）| 并集选择器
25.bento:empty 选择bento标签没有子元素的元素
26.apple:not(.small) 子元素选择器 （否定伪类）
1
<!DOCTYPE html>
<html>
<head>
<title>CSS</title>
<link rel="stylesheet" type="text/css" href="../1-day/相对路径.html"/>
*/
<meta charset="utf-8" />
<!--
style标签 内部样式表
<style type="text/css">p{
color: red;
font-size: 40px
}</style>
-->
</head>
<body>
<!--
style 内联样式
-->
<p style="color:red;font-size:40px;">xxxxxxxxxxxx</p>
<p>xxxxxxxx</p>
</body>
</htmml>
2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>否定伪类</title>
<style type="text/css">
p:not(.www):not(#p1) {
background-color: red
}
</style>
</head>
<body>
<span>cccccc</span>
<p>cccccc</p>
<p class="www">cccccc</p>
<p id="p1">cccccc</p>
<p>cccccc</p>
<div>
<p>cccccc</p>
</div>
</body>
</htmml>
3
<!DOCTYPE html>
<html>
<head>
<title>开发工具</title>
<style type="text/css">/*h1{color: purple;}</style>
<meta charset="utf-8" />
</head>
<body>
<!--块元素
独占一行
div 跑
内联元素-->
<div style="background-color: red;width: 200px">wwww</div>
<div style="background-color: yellow;width: 200px">wwww</div>
<hr>
<span>一个span</span>
<span>一个span</span>
<span>一个span</span>
<span>一个span</span>
<span>一个span</span>
<span>一个span</span>
<span>一个span</span>
<span>一个span</span>
<span>一个span</span>
<span>一个span</span>
</body>
</htmml>
4
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>属性选择器</title>
<style type="text/css">
/*[属性名]选取含有指定属性的元素*/
/*p[title]{
background-color: red
}*/
/*选取含有指定属性的元素进行设置*/
/*p[title="wwwww"]{
background-color: blue
}*/
/*给属性值以开头为er开头的元素进行设置
[属性名^="属性值"] 选取属性值以指定内容开头*/
/*p[title^="er"]{
background-color: yellow
}*/
/*以某某结尾*/
/*p[title$="c"]{
background-color: green
}*/
/*包含*/
/*p[title*="c"]{
background-color: red
}*/
</style>
</head>
<body>
<p title="erwwwww">cccccccc</p>
<p title="mmmmmc">fffffff</p>
<p title="ernnnnn">aaaaaaa</p>
<p title="xxxxxc">vvvvvvvv</p>
</body>
</htmml>
5
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>a的伪类</title>
<style type="text/css">
a:link{
color: red
}
a:visited{
color: blue
}
a:hover{
color: green
}
a:active{
color: yellow
}
</style>
</head>
<body>
<span>cccccc</span>
<p>cccccc</p>
<p>cccccc</p>
<p>cccccc</p>
<p>cccccc</p>
<div>
<p>cccccc</p>
</div>
</body>
</htmml>
6
<!DOCTYPE html>
<html>
<head>
<title>伪类选择器</title>
<style type="text/css">
a:link{
color: red;
}
a:visited{
color: green;
}
a:hover{
color: yellow
}
a:active{
color: blue
}
/* 设为焦点时背景颜色设置 */
input:focus{
background-color: blue
}
/*选中的内容变色*/
/*适合大部分浏览器*/
p::selection{
background-color: orange
}
/*兼容火狐浏览器的*/
p::-moz-selection{
background-color: orange
}
</style>
<meta charset="utf-8" />
<!--
:link 表示没访问过的链接
:visited 表示访问过的链接
:hover 表示鼠标移入状态
:active 表示点击状态
-->
</head>
<body>
<a class="www" href="http://www.baidu.com">访问过的链接</a>
<br><br>
<a class="aaa" href="http://www.baidu11111.com">未访问过的链接</a>
<br><br>
<!-- 创建一个文本输入框 -->
<input type="text" name="">
</body>
</htmml>
7
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>伪元素</title>
<style type="text/css">
/*首字母设置特殊模式*/
/*p:first-letter{
color: red
}*/
/*第一行的语句设置特殊模式*/
/*p:first-line{
background-color: green
}*/
/*表示元素最前面的部分*/
p:before{
content:"vvvvvvvv";
color: blue;
}
/*表示元素最后面的部分*/
p:after{
content: "wwwww";
color: orange
}
</style>
</head>
<body>
<p>hello,nice to meet you!</p>
</body>
</htmml>
8
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>兄弟元素选择器</title>
<style type="text/css">
/*选择span下一行的元素设置背景*/
/*span + p{
background-color: red
}*/
/*从span开始后面的所有p元素都算在内*/
/*span ~ p{
background-color: red
}*/
</style>
</head>
<body>
<span>cccccc</span>
<p>cccccc</p>
<p>cccccc</p>
<p>cccccc</p>
<p>cccccc</p>
<div>
<p>cccccc</p>
</div>
</body>
</htmml>
9
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>选择器的优先级</title>
<style type="text/css">
/*内联样式 1000
id选择器 100
类和伪类 10
元素选择器 1
通配 0
继承 没有优先*/
.p1{
background-color: yellow
}
p{
background-color: red
}
#p2{
background-color: green
}
</style>
</head>
<body>
<p class="p1" id="p2" style="background-color: blue">cccccc</p>
</body>
</htmml>
10
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>样式的继承</title>
<style type="text/css">
body{
font-size: 30px
}
</style>
</head>
<body>
<div>
<p>
cccccc
<span>wwwwww</span>
</p>
<span>rrrrrrrr</span>
</div>
</body>
</htmml>
11
<!DOCTYPE html>
<html>
<head>
<title>元素选择器</title>
<style type="text/css">
p{color: red;}
h1{color: blue}
</style>
<meta charset="utf-8" />
</head>
<body>
<h1>ssssss</h1>
<p>ccccccc</p>
<p>ddddddd</p>
<p>aaaaaaa</p>
</body>
</htmml>
12
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>子元素选择器</title>
<style type="text/css">
/*为第一个标签设置设置背景*/
/*p:first-child{
background-color: red
}*/
/*最后一个*/
/*p:last-child{
background-color: green
}*/
/*指定位置*/
/*p:nth-child(3){
background-color: blue
}*/
/*p:first-of-type{
background-color: gold
}*/
</style>
</head>
<body>
<span>cccccc</span>
<p>cccccc</p>
<p>cccccc</p>
<p>cccccc</p>
<p>cccccc</p>
<div>
<p>cccccc</p>
</div>
</body>
</htmml>
