作業(yè)答案：
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 兄弟選擇器（后邊一個(gè)元素）
13.bento ~ pickle 兄弟選擇器（后邊所有元素）
14.plate > apple 子元素選擇器
15.plate :first-child 子元素選擇器（為第一個(gè)子元素）
16.apple,plate pickle 并集選擇器
only-child 選擇父元素只包含一個(gè)同類型子元素
17.apple,pickle 并集選擇器
18.plate:nth-child(3) 子元素選擇器（為指定位置的子元素）
19.bento:first-of-type 子元素選擇器（為bento標(biāo)簽第一個(gè)子元素）
20.apple:first-of-type 子元素選擇器（為apple標(biāo)簽第一個(gè)子元素）
21.plate:nth-of-type 子元素選擇器 （為plate標(biāo)簽偶數(shù)子元素）
22.plate:nth-child(2n+3) 子元素選擇器（選擇第2n+3個(gè)plate元素）【公式2n+3中n是計(jì)數(shù)器（從0開始）3是偏移值】
apple:only-of-type 選擇父元素只包含一個(gè)同類型子元素吼和，且包含apple元素
24.orange:last-of-type,apple:last-of-type 子元素選擇器（選擇最后一個(gè)標(biāo)簽）| 并集選擇器
25.bento:empty 選擇bento標(biāo)簽沒有子元素的元素
26.apple:not(.small) 子元素選擇器 （否定偽類）
1
<!DOCTYPE html>
<html>
<head>
<title>CSS</title>
<link rel="stylesheet" type="text/css" href="../1-day/相對(duì)路徑.html"/>
*/
<meta charset="utf-8" />
<!--
style標(biāo)簽 內(nèi)部樣式表
<style type="text/css">p{
color: red;
font-size: 40px
}</style>
-->
</head>
<body>
<!--
style 內(nèi)聯(lián)樣式
-->
<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>開發(fā)工具</title>
<style type="text/css">/*h1{color: purple;}</style>
<meta charset="utf-8" />
</head>
<body>
<!--塊元素
獨(dú)占一行
div 跑
內(nèi)聯(lián)元素-->
<div style="background-color: red;width: 200px">wwww</div>
<div style="background-color: yellow;width: 200px">wwww</div>
<hr>
<span>一個(gè)span</span>
<span>一個(gè)span</span>
<span>一個(gè)span</span>
<span>一個(gè)span</span>
<span>一個(gè)span</span>
<span>一個(gè)span</span>
<span>一個(gè)span</span>
<span>一個(gè)span</span>
<span>一個(gè)span</span>
<span>一個(gè)span</span>
</body>
</htmml>
4
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>屬性選擇器</title>
<style type="text/css">
/*[屬性名]選取含有指定屬性的元素*/
/*p[title]{
background-color: red
}*/
/*選取含有指定屬性的元素進(jìn)行設(shè)置*/
/*p[title="wwwww"]{
background-color: blue
}*/
/*給屬性值以開頭為er開頭的元素進(jìn)行設(shè)置
[屬性名^="屬性值"] 選取屬性值以指定內(nèi)容開頭*/
/*p[title^="er"]{
background-color: yellow
}*/
/*以某某結(jié)尾*/
/*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
}
/* 設(shè)為焦點(diǎn)時(shí)背景顏色設(shè)置 */
input:focus{
background-color: blue
}
/*選中的內(nèi)容變色*/
/*適合大部分瀏覽器*/
p::selection{
background-color: orange
}
/*兼容火狐瀏覽器的*/
p::-moz-selection{
background-color: orange
}
</style>
<meta charset="utf-8" />
<!--
:link 表示沒訪問過的鏈接
:visited 表示訪問過的鏈接
:hover 表示鼠標(biāo)移入狀態(tài)
:active 表示點(diǎn)擊狀態(tài)
-->
</head>
<body>
<a class="www" >訪問過的鏈接</a>
<br><br>
<a class="aaa" >未訪問過的鏈接</a>
<br><br>
<!-- 創(chuàng)建一個(gè)文本輸入框 -->
<input type="text" name="">
</body>
</htmml>
7
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>偽元素</title>
<style type="text/css">
/*首字母設(shè)置特殊模式*/
/*p:first-letter{
color: red
}*/
/*第一行的語(yǔ)句設(shè)置特殊模式*/
/*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下一行的元素設(shè)置背景*/
/*span + p{
background-color: red
}*/
/*從span開始后面的所有p元素都算在內(nèi)*/
/*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>選擇器的優(yōu)先級(jí)</title>
<style type="text/css">
/*內(nèi)聯(lián)樣式 1000
id選擇器 100
類和偽類 10
元素選擇器 1
通配 0
繼承 沒有優(yōu)先*/
.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">
/*為第一個(gè)標(biāo)簽設(shè)置設(shè)置背景*/
/*p:first-child{
background-color: red
}*/
/*最后一個(gè)*/
/*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>