【CSS】【3】CSS選擇器

技術小胖子發表於2017-11-09
CSS
一、基本選擇器
1、標記選擇器
（1）定義：
  h1
  {
      color:blue;
      font-size:12px;
  }
  為何叫標記選擇器呢？是因為此類選擇器是針對HTML的標記而定義的，比如<h1>、<p>、<li>、<body>、<div>、<span>等。
（2）使用：
 <h1>標記選擇器演示</h1>


2、類別選擇器

（1）定義：
 .red

 {

     color:red;

     font-size:12px;

 }
（2）使用：
<p class=”red”>類別選擇器演示</p>


3、ID選擇器

（1）定義：
 #blue
 {
    color:blue;
    font-size:20px;
 }
（2）使用：
 <div id=”blue”>ID選擇器演示</div>  


4、類選擇器與ID選擇器的區別

  類選擇器可以給多個物件使用，ID選擇器僅能給一個指定ID的物件使用。


二、複合選擇器

1、交集選擇器
（1）定義：
h1.red
  {
       color:red;
  }
  或者
div#bule
  {
      color:bule;
  }
（2）解釋：
 其中h1或div都是標識選擇器，其後緊跟著類選擇器（.red)或ID選擇器(#bule)，之間無空格


2、並集選擇器

（1）定義：
 div,h1.red,div#bule
 {
     …….
 }
（2）解釋：
 並集選擇器用”，”號分隔開基本選擇器和複合選擇器，其{…….}中的定義對於選擇器div、h1.red和div.bule均生效


3、後代選擇器

（1）定義：
  div  h1.first  span.letter
  {
…….
  }
（2）解釋：
  後代選擇器用空格分隔開，其{…….}中的定義僅對div塊中的宣告類選擇first的h1標識中的span標識生效，且span使用的類選擇器必須為letter。暈了沒？若暈了就看下面的例子  e100.gif
 <div>
      <h1 class=”first”>
             <span class=”letter”>無間道</span>
             <span class=”letter1″>主演：劉德華、梁朝偉</span>
             <span id=”letter2″>這部電影值得看</span>
      </h1>
     <h1>
             <span>我是警察</span>
     </h1>
 </div>
 上述定義僅對標紅的“無間道“生效，對其他內容，如”主演：劉德華、梁朝偉“均不生效。
  到這裡累了沒有？休息一下吧。
     本文轉自qingkechina 51CTO部落格，原文連結：http://blog.51cto.com/qingkechina/1261733，如需轉載請自行聯絡原作者


相關文章