<style>
/* 全选选择器 */
*{
/* background-color: rgb(81, 171, 81); */
}
/* id选择器 */
#one{
width: 50%;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdan
font-size: 40px;
color: rgb(24, 185, 185);
}
/* class选择器 */
.two{
width: 50%;
background-color: black;
color: aliceblue;
font-family: 宋体;
font-weight: 900;
}
/* 元素选择器 选择所有的p标签*/
p{
width: 50%;
height: 300px;
width: 300px;
border: 3px solid red;
font-size: medium;
font-size:18px;
color: green;
line-height: 300px;
text-align: center;
}
/* 选择两者都有的选择器 */
div, p{
width: 50%;
background-color: rgb(23, 155, 111);
border: 2px dotted rgb(35, 36, 35);
}
/* 选择p元素内的元素span */
p span{
width: 200px;
height: 200px;
border:2px solid lightblue;
background-color: black;
color: rgb(15, 197, 197);
}
/* 选择所有父级是 <div> 元素的 <p> 元素 */
div>p{
height: 400px;
width: 400px;
border: 10px solid palevioletred;
}
/* a标签的特有的属性 */
a{
border: 4px dotted rgb(2, 5, 168);
font-size: 30px;
background-color: rgb(243, 236, 234);
display: block;
}
/* 选择所有未访问链接 */
a:link{
background-color: green;
}
/* 选择每个<P>元素的第一行 */
p:first-line{
background-color: aqua;
}
/* 选择第一个孩子 */
p:first-child{
background-color: darkcyan;
color: white;
font-size: 40px;
}
</style>
<div id="one">
<h1><i>我是id选择器字体大小为40px</i></h1>
</div>
<hr color="red">
<div id="two">
<h2><i>我是Class选择器</i></h2>
</div>
<body>
<div>
<span>我是在div元素后的元素信息</span>
<p>我是p中编号为1
<span>我是p元素的第一个汉子</span>
</p>
<p>我是p中编号为2</p>
<p>我是p中编号为3
<span>选择p元素内的元素a</span>
<span>选择p元素内的元素b</span>
</p>
</div>
<h1>我是元素</h1>
<div>
<h2>My name is Donald</h2>
<p>I live in Duckburg.</p>
</div>
<hr color="green">
<div>
<i><b><a href="#">2111111111111111111111111111</a></b></i>
<i><b><a href="#">3111111111111111111111111111</a></b></i>
<i><b><a href="#">4111111111111111111111111111</a></b></i>
<i><b><a href="#">5111111111111111111111111111</a></b></i>
<i><b><a href="#">6111111111111111111111111111</a></b></i>
<i><b><a href="#">7111111111111111111111111111</a></b></i>
<i><b><a href="#">8111111111111111111111111111</a></b></i>
<i><b><a href="#">9111111111111111111111111111</a></b></i>
<i><b><a href="#">20111111111111111111111111111</a></b></i>
<i><b><a href="#">1111111111111111111111111111</a></b></i>
</div>
<!-- 1）.使用id选择器设置div(宽高自定义)内文字的颜色为蓝色，字体为25px，垂直居中，文字加粗(不能使用语义标签)
2）.使用类选择器设置5个div的背景颜色为红色，文字颜色为白色(宽高自定义，文字自定义)
3）.使用标签选择+并集选择器设置一个a标签，一个p标签，一个span标签，一个div标签，的字体大小为18px，
颜色为橙色，字体加粗900 -->
<hr>
<style>
#div1{
color: blue;
font-size: 25px;
line-height: auto;
font-weight: bolder;
}
.sd{
background-color: red;
color: aliceblue;
}
a ,p ,span, div{
background-color: azure;
font-size: 18px;
color: orange;
font-weight: 900;
}
</style>
