十二，CSS其他选择器

作者: 好多可乐 | 来源:发表于2020-12-18 14:13 被阅读0次

十二，CSS其他选择器
CSS学习笔记
CSS3
CSS选择器
CSS选择器归纳
CSS选择器
css选择器
CSS 选择器
Sublime 学习web的css
CSS选择器

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>