HTML选择器
直接使用标签
<style>
img{
width: 400px;
border: 1px dotted blue;
}
</style>
属性选择器(id,class) *全局选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
/*margin: 0;*/
}
#p1{
width: 400px;
text-align: center;
font-style: inherit;
color: red;
border: 1px solid #000000;
padding: 30px;
}
.item{
margin-top: 20px;
width: 400px;
height:300px;
color: slateblue;
border: 1px dotted #4cae4c;
font-size: 50px;
}
</style>
</head>
<body>
<p id="p1">我是测试代码 </p>
<div class="item">
我是div标签
</div>
<div class="item">
我也是div标签
</div>
</body>
</html>
关联选择器 和 组合选择器
#box div{} : id=box标签下的所有div 但不包括自身
#box > div{} :id=box标签下的子代div 但不包括自身
.content li{} :class=content标签下的所有li
p,li,div{} : 逗号代表同级别
p.item{}: 带class=item的p标签
实例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#box div{
color: red;
}
#box>div{
color: #01AAED;
}
.content li{
border: 1px solid #2b669a;
}
p.item{
border: 2px solid yellow;
}
p,li,div{
font-style: oblique;
}
</style>
</head>
<body>
<div id="box"> div
<div class="div01">div01
<div class="div02">
div02
</div>
</div>
</div>
<ul class="content">
<li>hahahahah</li>
<li>hahahahah</li>
<li>hahahahah</li>
<li>hahahahah
<ul>
<li>0000000000000</li>
<li>0000000000000</li>
<li>0000000000000</li>
<li>0000000000000</li>
</ul>
</li>
<li>hahahahah</li>
</ul>
<p>我是p1</p>
<p class="item">我是p2</p>
</body>
</html>
伪类选择器
大部分用于a标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#con{
font-style: oblique;
}
.nav li {
border: 1px solid black;
list-style: none;
width: 100px;
font-size: 20px;
font-style: inherit;
cursor: url("/images/1.jpeg"),pointer;
}
li:hover{
background-color: #01AAED;
}
a.a1:hover{
color: yellow;
}
a.a2:active{
color: orange;
}
a.a3:visited{
font-style: oblique;
}
a.a4:link{
color: #4cae4c;
}
</style>
</head>
<body>
<div id="con" style="font-size: 40px">
我是字体测试
<ul class="nav">
<li>首页</li>
<li>数码</li>
<li>家电</li>
<li>五金</li>
<li>服装</li>
</ul>
</div>
<a href="#" class="a1">手指放到变色hover</a>
<a href="#" class="a2">按下变色active</a>
<a href="#" class="a3">激活后变色visited</a>
<a href="#" class="a4">直接显示link</a>
</body>
</html>
网友评论