一、选择器
(一)类选择器:一次可以控制多个标签 将多个标签的共性属性,抽取到类选择器中将个性属性,放到id选择器中。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.hehe{
width: 200px;
height: 200px;
border: 1px black solid;
margin-top: 20px;
}
#div1{
background: red;
}
</style>
</head>
<body>
<div id="div1" class="hehe">
</div>
<h1 class="hehe">asdfsadf </h1>
<div id="div2" class="hehe">
</div>
<div id="div3" class="hehe">
</div>
<div id="div4" class="hehe">
</div>
</body>
</html>
(二)标签名选择器:可以根据标签名称,选择多个标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
width: 100px;
height: 200px;
background: #FF0000;
margin-top:20px ;
}
#div1{
background: yellow;
}
h1{
color: #0000FF;
}
ul{
color: aqua;
}
</style>
</head>
<body>
<div id="div1">
divddfd
</div>
<div id="div2">
divddfd
</div>
<h1>asdfsadf</h1>
<h1>asdfsadf</h1>
<ul>
<li>asdfsadf</li>
<li>asdfsadf</li>
<li>asdfsadf</li>
</ul>
<ul>
<li>asdfsadf</li>
<li>asdfsadf</li>
<li>asdfsadf</li>
</ul>
</body>
</html>
(三)选择器优先级:
当多个选择器在控制同一个标签时,如果属性不冲突,多个属性叠加在一起生效
如果多个选择器,控制的属性有冲突那么就根据选择器的优先级来区分
内联样式>id选择器>class选择器>标签名选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div {
width: 200px;
height: 200px;
background: red;
}
.hehe {
border: 1px black solid;
margin-top: 10px;
background: #00FFFF;
}
#div1 {
background: blue;
}
#div2 {}
#div3 {}
</style>
</head>
<body>
<div id="div1" class="hehe" style="background: #FFFF00;">
</div>
<div id="div2" class="hehe">
</div>
<div id="div3" class="hehe">
</div>
</body>
</html>
(四)包含选择器
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* li{
color: #00FFFF;
} */
/* ul #last{
color: red;
} */
/* body ul li {
color: #9ACD32;
} */
body #aa li{
color: yellow;
}
</style>
</head>
<body>
<ul>
<li>asdfasfd</li>
<li>asdfasfd</li>
<li id="last">asdfasfd</li>
</ul>
<ul>
<li>asdfasfd</li>
<li>asdfasfd</li>
<li id="last">asdfasfd</li>
</ul>
<ul id="aa">
<li>asdfasfd</li>
<li>asdfasfd</li>
<li id="last">asdfasfd</li>
</ul>
</body>
</html>
(五)并列选择器
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
ol,#one,h1,b{
color: red;
}
</style>
</head>
<body>
<ol>
<li>abc</li>
<li>abc</li>
</ol>
<ul id="one">
<li>asdfsadf</li>
</ul>
<ul>
<li>asdfsadf</li>
</ul>
<h1>asdfdsaf</h1>
<b>asdfasfadfa</b>
</body>
</html>
(六)通配符选择器
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* *{
color: #00FFFF;
font-size: 100px;
margin-top: 20px;
} */
#div1 *{
color: #9ACD32;
}
</style>
</head>
<body>
<div id="div1">
<ul>
<li>asdfasf</li>
</ul>
<h1>abc</h1>
<span id="">
asdfdsaf
</span>
</div>
<div id="div2">
<h1>第二个</h1>
</div>
</body>
</html>
(七)伪类选择器
1.未连接 a:link
2.已经访问链接 a:visited
3.进入链接 a:hover
4.激活(按下)状态 a:active
其中 hover active 这两种状态对其他标签也生效
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
a:link {
color: red;
/* 去掉超链接的下划线 */
text-decoration: none;
}
a:hover {
color: #FFFF00;
text-decoration: none;
}
a:active {
color: brown;
text-decoration: none;
}
a:visited {
color: burlywood;
text-decoration: none;
}
</style>
</head>
<body>
<a href="http://www.163.com" style="font-size: 50px;">百度一下</a>
<a href="http://www.baidu.com" style="font-size: 50px;">百度一下</a>
<a href="http://www.baidu.com" style="font-size: 50px;">百度一下</a>
<a href="http://www.baidu.com" style="font-size: 50px;">百度一下</a>
<a href="http://www.baidu.com" style="font-size: 50px;">百度一下</a>
<a href="http://www.baidu.com" style="font-size: 50px;">百度一下</a>
</body>
</html>