css选择器总结

1.通配符选择器

       *     =>表示选中页面中所有元素       （ 如下，页面所有标签中的文字都是蓝色）

<style>
    * {
      color: blue;
    }
</style>

<div>这是div中的文字</div>
<p>这是p中的文字</p>
<a href="#">这是a中的文字</a>
<h1>这是h1中的文字</h1>

2.子元素选择器（亲儿子选择器）

>        =>选中直接子元素                （如下，ul>li设置li的文字颜色，不会改变p标签中的元素）

<style>
    p {
      color: green;
    }

    ul>li {
      color: red;
    }
</style>

<ul>
    <li>
      这里是小li是ul的直接子元素（亲儿子）
      <p>这里是p，是li的直接子元素</p>
    </li>
</ul>

 3.后代选择器（儿子，孙子）

    父子元素之间以空格隔开

   （将2中的style部分的代码修改成如下）        （p的颜色也会被修改）

p {
   color: green;
}

ul li {
     color: red;
}

ul li p {
     color: red;
}

 4.并集选择器-----可以同时选择多组标签

    不同标签之间用逗号隔开

  <style>
    div,p,a {
      color: pink;
    }
  </style>

<div>这是div中的文字</div>
<p>这是p中的文字</p>
<a href="#">这是a中的文字</a>

5.伪类选择器

任何标签都可用，以下以a标签举例（如果是div做鼠标经过----div:houer{})

<style>
    a:link {
      /*未被访问的链接*/
      color: red;
    }

    a:visited {
      /* 已经被访问的链接 */
      color: green;
    }

    a:hover {
      /* 鼠标经过 */
      color: yellow;
    }

    a:active {
      /* 鼠标按下未弹起 */
      color: blue;
    }
</style>

<a href="#">这是一个链接</a>

未点击时：

 点击后：

鼠标经过：

 鼠标按下未弹起：

 6.伪类选择器

  用于选取获得焦点的表单元素   =>一般情况<input>标签会用到

<style>
    input:focus {
      background-color: skyblue;
    }
</style>

<input type="text">

   打开页面时：

  将光标定到输入框时：

  

7.CSS3新增属性选择器

•   例div[value]{}  ---- 有value这个属性的div

• div[value] {
        color: pink;
  }

  <div value="name">这是有value属性的div</div>
  <div>普通的div</div>

  

•   例input[type=text]{}  ----  type是text的input

• input[type=text] {
        background-color: aqua;
  }

   type为text的<input type="text">
   type为password的<input type="password">

   

•   例div[class^=icon]{}  ----  class是以icon开头的div

• div[class^=icon] {
        color: red;
  }

  <div class="icon1">icon1</div>
  <div class="icon2">icon2</div>
  <div class="icon3">icon3</div>
  <div class="icon4">icon4</div>

   

•   例div[class$=data]{}  ----  class是以data结尾的div

• div[class$=data] {
        color: red;
  }

  <div class="1data">1data</div>
  <div class="2data">2data</div>
  <div class="3data">3data</div>
  <div class="4data">4data</div>

   

•   例div[class*=icon]{}  ----  class中含icon字段的div

• div[class*=icon] {
        color: red;
  }

  <div class="icon">icon</div>
  <div class="1icon">1icon</div>
  <div class="icon2">icon2</div>
  <div class="ic3on">ic3on</div>

  

8.CSS3新增结构伪类选择器

•   E:first-child   匹配父元素中的第一个子元素E

• li:first-child {
        color: blue;
  }

  <ul>
      <li>我是ul的第1个孩子</li>
      <li>我是ul的第2个孩子</li>
      <li>我是ul的第3个孩子</li>
      <li>我是ul的第4个孩子</li>
      <li>我是ul的第5个孩子</li>
      <li>我是ul的第6个孩子</li>
  </ul>

   

•   E:last-child   匹配父元素中的最后一个子元素E

• li:last-child {
        color: blue;
  }

  <ul>
      <li>我是ul的第1个孩子</li>
      <li>我是ul的第2个孩子</li>
      <li>我是ul的第3个孩子</li>
      <li>我是ul的第4个孩子</li>
      <li>我是ul的第5个孩子</li>
      <li>我是ul的第6个孩子</li>
  </ul>

  

•   E:nth-child(n)   匹配父元素中的第n个子元素E

•   n可以是数字：

  li:nth-child(3) {
        color: blue;
  }

  body部分的代码同前两种一样

   

    n可以是关键字：even偶数，odd奇数

  li:nth-child(odd) {
        color: blue;
  }

  body部分的代码同前两种一样

   

     n可以是表达式，此时n会从0开始，每次加一，直到n-1

  li:nth-child(5n) {
         /*表示5的倍数*/
        color: blue;
  }

    body部分的代码同前两种一样

   

  li:nth-child(-n+3) {
        /*表示选中前三个*/
        color: blue;
  }

    body部分的代码同前两种一样

          

•   E:first-of-type   匹配父元素中指定类型的第一个子元素E

div:first-of-type {
      color: blue;
}

<section>
    <p>这是p元素</p>
    <div>我是section的第一个div孩子</div>
    <div>我是section的第二个div孩子</div>
</section>

    

         它和first-child的区别是：当使用它时会先找到指定类型的标签，再找first第一个

                                                 而后者是先找到第一个子元素，如果类型不符合，则无效果

        如下：将第一段代码修改成使用first-child                （结果没有任何的效果）

div:first-child {
      color: blue;
}

 

•   E:last-of-type   匹配父元素中指定类型的最后一个子元素E   

div:last-of-type {
      color: blue;
}

<section>
    <p>这是p元素</p>
    <div>我是section的第一个div孩子</div>
    <div>我是section的第二个div孩子</div>
    <p>这是p元素</p>
</section>

 

        与last-child的区别同上类似

•   E:nth-of-type(n)   匹配父元素中指定类型的第n个子元素E

div:nth-of-type(2) {
      color: blue;
}

<section>
    <p>这是p元素</p>
    <div>我是section的第一个div孩子</div>
    <div>我是section的第二个div孩子</div>
    <p>这是p元素</p>
</section>

         与nth-child的区别同上类似，用法大体相同

9.CSS3新增伪元素选择器

• ::before        在元素内部的前面插入内容

div::before {
    /*使用时记得把地址换成自己的图片地址*/
      content: url(../image/奔跑.jpg);
}

 <div>这是一个div</div>

 

• ::after           在元素内部的后面插入内容

div::after {
      content: url(../image/奔跑.jpg);
}

<div>这是一个div</div>

 

 特点：

• 会创建一个元素（行内）
• 在文档树中找不到
• 必须有content属性

感受：知识点真的很广很杂很难记，加油！！！