CSS3选择器整理

基本选择器

1. 标签选择器

<style>
  h1{
    color:red;
  }
</style>

<h1>测试</h1>

2. 类选择器

<style>
  .ceshi{
    color:red;
  }
</style>

<h1 class="ceshi">测试</h1>

3. id选择器（必须保证id全局唯一）

<style>
  #ceshi{
    color:red;
  }
</style>

<h1 id="ceshi">测试</h1>

优先级：id选择器 > class选择器 > 标签选择器

层次选择器

1. 后代选择器:在有个元素的后面

<style>
  body p{
    background: red;
  }
</style>

<boby>
  <p>p1</p>
  <p>p2</p>
  <p>p3</p>
  <ul>
    <li>
      <p>p4</p>
    </li>
    <li>
      <p>p5</p>
    </li>
    <li>
      <p>p6</p>
    </li>
  </ul>
</boby>

2. 子选择器

<style>
  body>p{
    background: red;
  }
</style>

<boby>
  <p>p1</p>
  <p>p2</p>
  <p>p3</p>
  <ul>
    <li>
      <p>p4</p>
    </li>
    <li>
      <p>p5</p>
    </li>
    <li>
      <p>p6</p>
    </li>
  </ul>
</boby>

3. 相邻兄弟选择器(同辈，对下不对上，id下面的一个)

<style>
  .active + p{
    background: red;
  }
</style>

<boby>
  <p>p0</p>
  <p class="active">p1</p>
  <p>p2</p>
  <p>p3</p>
  <ul>
    <li>
      <p>p4</p>
    </li>
    <li>
      <p>p5</p>
    </li>
    <li>
      <p>p6</p>
    </li>
  </ul>
</boby>

4. 通用选择器(当前选择元素向下的所有兄弟元素)

<style>
  .active~p{
    background: red;
  }
</style>

<boby>
  <p>p0</p>
  <p class="active">p1</p>
  <p>p2</p>
  <p>p3</p>
  <ul>
    <li>
      <p>p4</p>
    </li>
    <li>
      <p>p5</p>
    </li>
    <li>
      <p>p6</p>
    </li>
  </ul>
</boby>

伪类选择器

1. 取第一个、最后一个子元素。

<style>
  ul li:first-child{
    background: red;
  }

  ul li:last-child{
    background: red;
  }
</style>

<boby>
  <p>p1</p>
  <p>p2</p>
  <p>p3</p>
  <ul>
    <li>li1</li>
    <li>li2</li>
    <li>li3</li>
  </ul>
</boby>

2. 选择当前p元素的父级元素后，选中父级元素的第一个，并且是当前元素才生效

<style>
  /*
  数字1可换2，3等，表示第几个
  */
  p:nth-child(1){
    background: red;
  }
  
  /*
  选中父元素下的p元素的第二个，类型
  */
  p:nth-of-type(1){
    background: red;
  }
  
</style>

<boby>
  <p>p1</p>
  <p>p2</p>
  <p>p3</p>
  <ul>
    <li>li1</li>
    <li>li2</li>
    <li>li3</li>
  </ul>
</boby>

3. 鼠标悬停生效css

<style>
  /*
  数字1可换2，3等，表示第几个
  */
  a:hover{
    background: red;
  }  
</style>

<boby>
  <a href="">测试</a>
</boby>

属性选择器

<style>
  /* a标签数字变圆 */
  .demo p{
    float: left;
    display: block;
    height: 50px;
    width: 50px;
    border-radius: 15px;
    background: red;
    text-align: center;
    color: gainsboro;
    text_decoration: none;
    margin-right: 5px;
    font: bold 20px/50px Arial;
  }  
  
  /* 属性名， 属性名=属性值（正则） */  
  /* 存在id属性的元素   a[]{} */  
  a[id]{
    background: yelloe;
  } 

  /* id=first 的元素 */  
  a[id=first]{
    background: red;
  } 

  /* class中有links的元素 
  = 绝对等于
  *= 包含这个元素
  */  
  a[class*="links"]{
    background: yelloe;
  } 

  /* 选中href中以http开头的元素
  ^= 以这个开头
  $= 以这个结尾
  */  
  a[href^=http]{
    background: yelloe;
  } 
  a[href$=pdf]{
    background: yelloe;
  }

</style>

<boby>
  <p class="demo">

    <a href="http://www.baidu.com" class="links item first" id="first">1</a>
    <a href="" class="links item active" target="_blank" title="test">2</a>
    <a href="img/123.html" class="links item">3</a>
    <a href="img/123.png" class="links item">4</a>
    <a href="img/123.jpg" class="links item">5</a>
    <a href="abc" class="links item">6</a>
    <a href="/a.pdf" class="links item">7</a>
    <a href="/abc.pdf" class="links item">8</a>
    <a href="abc.doc" class="links item">9</a>
    <a href="abcd.doc" class="links item last">10</a>

  </p>
  
</boby>

CSS3选择器整理