css选择器总结

1.通配符选择器

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

<style>
    * {
      color: blue;
    }
</style>
<div>这是div中的文字</div>
<p>这是p中的文字</p>
<a href="#">这是a中的文字</a>
<h1>这是h1中的文字</h1>

css选择器总结

2.子元素选择器(亲儿子选择器)

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

<style>
    p {
      color: green;
    }

    ul>li {
      color: red;
    }
</style>
<ul>
    <li>
      这里是小li是ul的直接子元素(亲儿子)
      <p>这里是p,是li的直接子元素</p>
    </li>
</ul>

css选择器总结

 3.后代选择器(儿子,孙子)

    父子元素之间以空格隔开

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

p {
   color: green;
}

ul li {
     color: red;
}

ul li p {
     color: red;
}

css选择器总结

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

    不同标签之间用逗号隔开

  <style>
    div,p,a {
      color: pink;
    }
  </style>
<div>这是div中的文字</div>
<p>这是p中的文字</p>
<a href="#">这是a中的文字</a>

css选择器总结

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>

未点击时:

css选择器总结

 点击后:

css选择器总结

鼠标经过:

css选择器总结

 鼠标按下未弹起:

css选择器总结

 6.伪类选择器

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

<style>
    input:focus {
      background-color: skyblue;
    }
</style>
<input type="text">

   打开页面时:

css选择器总结

  将光标定到输入框时:

  css选择器总结

7.CSS3新增属性选择器

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

  • div[value] {
          color: pink;
    }
    <div value="name">这是有value属性的div</div>
    <div>普通的div</div>

    css选择器总结

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

  • input[type=text] {
          background-color: aqua;
    }
     type为text的<input type="text">
     type为password的<input type="password">

    css选择器总结 

  •   例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>

    css选择器总结 

  •   例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>

    css选择器总结 

  •   例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>

    css选择器总结

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>

    css选择器总结 

  •   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>

    css选择器总结

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

  •   n可以是数字:

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

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

     css选择器总结

      n可以是关键字:even偶数,odd奇数

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

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

     css选择器总结

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

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

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

     css选择器总结

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

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

         css选择器总结 

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

div:first-of-type {
      color: blue;
}
<section>
    <p>这是p元素</p>
    <div>我是section的第一个div孩子</div>
    <div>我是section的第二个div孩子</div>
</section>

    css选择器总结

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

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

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

div:first-child {
      color: blue;
}

css选择器总结 

  •   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>

 css选择器总结

        与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>

 css选择器总结

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

div::after {
      content: url(../image/奔跑.jpg);
}
<div>这是一个div</div>

 css选择器总结

 特点:

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

感受:知识点真的很广很杂很难记,加油!!!

上一篇:项目总结1


下一篇:Dom——下拉菜单