CSS选择器:
id 类 组合
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>列表</title>
<style>
/*
id选择器
*/
#div2{
color: red;
}
/*
组选择器/并集选择器
*/
.box1,.box2{
width: 200px;
height: 200px;
border: 2px solid red;
}
.box1{
background-color: gold;
}
.box2{
background-color: green;
}
/* hover伪类 当鼠标悬浮在元素上时的样式 */
.box:hover{
color: red;
background-color: green;
}
.link01:hover{
color: orange;
text-decoration: none;
}
.box{
background-color: gold;
/* text-align: 文本水平对齐方式 此属性一般用在块元素上
left 默认值/缺省值
center
right
*/
/* text-align: right; */
}
</style>
</head>
<body>
<ul>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
<li>列表5</li>
<li>列表6</li>
<li>列表7</li>
</ul>
<ul>
<li><a href="" herf="#">news标题</a></li>
<li><a href="" herf="#">news标题</a></li>
<li><a href="" herf="#">news标题</a></li>
<li><a href="" herf="#">news标题</a></li>
<li><a href="" herf="#">news标题</a></li>
<li><a href="" herf="#">news标题</a></li>
</ul>
<div id="div2">
第一个盒子
</div>
<div class="div1">
第一个盒子
</div>
<div class="box1"></div>
<div class="box2"></div>
<div class="box">这是一个div</div>
<a href="#" class="link01">这是一个链接标签</a>
</body>
</html>