1,调用class选择器(允许重复class选择器名称):
定义:
<p class="imooc">慕课网</p>
调用:
.imooc{
color: red;
}
2,调用id选择器(唯一)
定义:
<p id="name1">慕课网</p>
调用:
#name1{
color: blue;
}
3,调用选择器:*
*{
background-color: yellow;
}
4,调用,选择器(联合选择器,用逗号隔开):
#name1,#name2{
color: blue;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Demo</title>
<style type="text/css">
#div1 p{
background-color: blue;
}
</style>
</head>
<body>
<div id=div1>
<div id=div2>
<h1>欢迎来到慕课网</h1>
<p class="imooc" id="name1">慕课网</p>
<p class="imooc" id="name2">www.imooc.com</p>
</div>
<div id=div3>
<p class="baidu" id="bd1">百度</p>
<p class="baidu" id="bd2">www.baidu.com</p>
</div>
<p class="google" id="google">www.google.com</p>
</div>
<p>我是div外面的p标签</p>
</body>
3,空格选择器:子孙(后代选择器)
#div1 p{
background-color: blue;
}
这里把div2和div3的全部p标签都选中了
4,>选择器:子选择器(不是子孙后代)
按照分析,这里只有google那段被选中,其他都是属于div2,div3里面的
#div1> p{
background-color: blue;
}
5,+选择器:相邻兄弟选择器
#div1+ p{
background-color: blue;
}
表示和div1是同一级的段落标记,符合条件的只有下面这个
<p>我是div外面的p标签</p>
6,[ ]:属性选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Demo</title>
<style type="text/css">
p[id="name1"]{
color: blue;
}
</style>
</head>
<body>
<p class="imooc" id="name1">慕课网</p>
<p class="imooc" id="name2">www.imooc.com</p>
<h1>欢迎来到慕课网</h1>
</body>
网友评论