十二，CSS其他选择器
2020-12-18 本文已影响0人
好多可乐
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>
