CSS选择器

用一种方式把你想要的那个元素选中，只有把他选中了，你才可以为这个元素添加CSS样式
不同的方式就是不同的选择器，选择器的不同，在于选择方式的不同，但目的是一样的，就是选中想要的元素才可以定义该元素的CSS

常用的5种选择器
元素选择器：选中相同的元素，然后给相同的元素定义同一个CSS样式
id选择器：为元素设置id,为设置id的元素定义CSS样式，同一个页面不许出现相同的id,就像没有两个人的身份证号是一样的，不同的页面可以有相同的id
class选择器 :类选择器，对或同的元素定义相同的CSS样式
后代选择器 :选择元素内部中所有的某一种元素，包括子元素和其他后代元素（孙元素），父元素和后代元素必须用空格隔开，从而表示某个元素内部的后代元素
群组选择器 :同时对几个选择器进行相同的操作，两个选择器之前必须用英文逗号隔开

id 选择器要加 “#“号前缀，class选择器要加"."前缀
每一个样式声明后都要用分号来表示一个声明的结束

例子：元素选择器

        /*把页面中所有的div元素选中，并定义文本颜色为红色 */
        div{color:red;}

    <!-- 元素选择器 -->
    <div>我的网站</div>
    <p>我的网站</p>
    <span>我的网站</span>
    <div>我的网站</div>
    <div>我的网站</div>

例子：id选择器

 <style>
        /*选中id 为love的元素，并定义文本颜色为绿色 */
        #love{color:green;}
    </style>
    
</head>
<body>
    <!-- id选择器 -->

    <div>我的网站</div>
    <p>我的网站</p>
    <span id="love">我的网站</span>
    <div>我的网站</div>
    <div>我的网站</div> 
</body>

例子：class选择器

 <style>
        /*选中设置相同元素和不同元素 拥有同一个class的元素设置样式为蓝色 */
    .myName{color:blue;}
    </style>
    
</head>
<body>
    <!-- class选择器 -->
    <div class="myName">我的网站</div>
    <p>我的网站</p>
    <span class="myName">我的网站</span>
    <div>我的网站</div>
    <div class="myName">我的网站</div> 
</body>

例子：后代选择器

<style>
        /* 选中id为father1的元素下所有的div元素，定义文本颜色为粉色 */
        #father1 div{ color:pink;}
    </style>
    
</head>
<body>
   <!-- 后代选择器 -->
   <div id="father1">
       <div>我的网站</div>
       <div>我的网站</div>
   </div>
   <div id="father2">
   <p>我的网站</p>
   <p>我的网站</p>
   <span>我的网站</span>
</div>

例子：群组选择器

  <style>
        /*对几个不同的选择器进行相同的操作，设置文本颜色为玫红色，选择器之间必须用逗号隔开 */
    .myName,#love,span{color:purple;}
    </style>
    
</head>
<body>
    <!-- 群组选择器 -->
    <div class="myName">我的网站</div>
    <p id="love">我的网站</p>
    <span>我的网站</span>
    <div>我的网站</div>
    <div>我的网站</div> 
</body>

层次选择器
常见的层次关系包括：父子后代兄弟和相邻

后代选择器：选择元素内部中所有的某一个元素包括子元素和其他后代元素

M N{ }

M元素和 N元素之间用空格隔开，表示选中M元素内部后代N元素(所有N元素）

 <style>
    /* id为first元素内部的所有p元素，不管是子元素还是其他后代元素 全选中 */
    #first p{color:red;}

  </style>

  <div id="first">
    <p>第一个子元素</p>
    <p>第一个子元素</p>
    <div id="second">
      <p>第一个子元素的子元素</p>
      <p>第一个子元素的子元素</p>
    </div>
    <p>第一个子元素</p>
    <p>第一个子元素</p>
  </div>

子代选择器：选中元素内部的某一个子元素

M >N { }

后代选择器和子代选择器的区别
后代选择器：选取元素内部所有的元素（包括子元素）
子代选择器：选取的是元素内部某一个子元素（只限子元素）

  <style>

    /*id为first的元素下的子元素p,  子代选择器只选取子元素，不包括其他后代元素  */
      #first > p{color:green;}
  </style>

  <div id="first">
    <p>第一个子元素</p>
    <p>第一个子元素</p>
    <div id="second">
      <p>第一个子元素的子元素</p>
      <p>第一个子元素的子元素</p>
    </div>
    <p>第一个子元素</p>
    <p>第一个子元素</p>
  </div>

兄弟选择器：选中元素后面(不包括前面)的某一类兄弟元素

M~N{ }

选中M元素后面的所有某一兄弟元素N
只选取后面的所有兄弟元素，不包括前面的所有兄弟元素

  <style>
     /* id为second的元素后面的所有兄弟元素p */
     #second~p{color:purple;} 

  </style>

  <div id="first">
    <p>第一个子元素</p>
    <p>第一个子元素</p>
    <div id="second">
      <p>第一个子元素的子元素</p>
      <p>第一个子元素的子元素</p>
    </div>
    <p>第一个子元素</p>
    <p>第一个子元素</p>
  </div>

相邻选择器：选中元素后面(不包括前面）的某一个 "相邻" 的兄弟元素

M + N{ }

兄弟选择器和相邻选择器的区别
兄弟选择器选取元素后面"所有" 的某一类元素
相邻选择器选取元素后面"相邻" 的某一个元素

  <style>
      /* id为second的元素后面的 相邻的兄弟颜色p */
      #second+p{color:blue;} 

  </style>

  <div id="first">
    <p>第一个子元素</p>
    <p>第一个子元素</p>
    <div id="second">
      <p>第一个子元素的子元素</p>
      <p>第一个子元素的子元素</p>
    </div>
    <p>第一个子元素</p>
    <p>第一个子元素</p>
  </div>

  <style>
    *{padding: 0;margin: 0;}
    li+li{border-top: solid red 1px;}
  </style>

  <ul>
    <li>第1个元素</li>
    <li>第2个元素</li>
    <li>第3个元素</li>
    <li>第4个元素</li>
    <li>第5个元素</li>
    <li>第6个元素</li>
  </ul>

posted @ 2021-01-01 05:27 沁莹阅读(155) 评论(0) 收藏举报

刷新页面返回顶部

沁莹

CSS选择器

公告