关于CSS3碎知识点

1新增的选择器：属性选择器，结构伪类选择器，伪类元素选择器

   (1)属性选择器：权重为10

利用属性进行选择，例如：

<input type="text" value="da"> -->

<input type="text">

 

input[value]

        {

            color: aqua;

        }

结果只会选择第一个标签。

 

利用选择属性=属性值的某些元素来选择，例如：

<input type="text" name="" id="">

<input type="password" name="" id="">

 

input[type=text]

    {

            background-color: aqua;

            outline: none;

     }

结果只会选择第二个标签。

 

属性选择器还可以选择属性值开的头的某些元素进行选择，例如：

<div class="one1">dage</div>

<div class="one2">dage</div>

<div class="one3">dage</div>

<div class="one4">dage</div>

 

 div[class^=o] {

            color: aquamarine;

        }

结果四个标签都会选中。

 

属性选择器可以选择属性值某些结尾的元素，例如：

<div class="1one">dage</div>

<div class="2one">dage</div>

 

   div[class*=e]

        {

            color: aqua;

        }

结果俩个标签都会被选中。

   (2)结构伪类选择器：权重为10，主要是根据文档结构来选择元素，常用于根据父母选择器里面的子元素进行选择，例如：

<style>

        *{

            padding: 0%;

            margin: 0%;

        }

        /* 选择第一个孩子 */

        /* ul li:first-child {

            list-style: none;

        } */

 

        /* 选择最后一个孩子 */

        /* ul li:last-child{

            list-style: none;

        } */

        

        /* nth-child(n)选择某个元素的一个或多个特定得到子元素 */

        /* n可以是数字,关键字和公式 */

 

        /* n如果时数字就是第几个孩子 */

        /* 选择三个孩子 */

        /* ul li:nth-child(3)

        {

            list-style: none;

        } */

 

        /* n是关键字:even偶数 odd奇数 */

        /* 选择奇数的孩子 */

        /* ul li:nth-child(odd){

            list-style: none;

        } */

 

        /* n可以是公式 nth-child(n) 从0开始 每次加1 往后面计算 这里面必须是n 不能是其他的字母 选择了所有的孩子 */

        /* ol li:nth-child(n){

            list-style: none;

        } */

       /* 2n为偶数,2n-1为基数  n+5为第五个孩子开始 */

 

       /* ul li:first-of-type和first-child是一样的 */

 

       /* nth-child 会把所有的孩子都排列序号 */

       /* 执行的时候先看nth-child(1)  之后再看前边的元素*/

       section div:nth-child(1){

           color: aqua;

       }

       /* nth-of-type会把指定的元素排列 然后在进行选择   */

       section div:nth-of-type(1)

       {

           color: brown;

       }

    </style>

   (3)伪元素选择器可以帮助我们利用css创建标签，而不需要HTML标签，从而简化HTML结构。选择符：1.::before：简介在元素内部的前面插入内容。2.::after简介：在元素內部的后面插入内容。

注意：before和after创建一个元素，但是属于行内元素，新创建得到这个元素在文档中是找不到的，所以唯美称为伪元素。语法：element：：before{}，before和after必须有content属性，伪元素选择器和标签选择器一样，权重为1。例如：

 <div class="one">是</div>

 

 .one {

                margin: 50px auto;

                width: 200px;

                height: 200px;

                background-color: seagreen;

            }

 .one::before {

                content: '我';

                /* display: inline-block; */

                width: 100px;

                height: 100px;

                background-color: sienna;

            }

  .one::after {

                content: '大哥';

                background-color: #fff;

            }

效果图：