CSS3新特性之新增的三大选择器_css3中新增加的选择器分别是-CSDN博客

本文链接：https://blog.csdn.net/wutong_jun/article/details/107214419

属性选择器

属性选择器通过已经存在的属性名或属性值匹配元素

选择符	含义
inp [attr]	选择具有attr 命名的属性的inp元素
inp [attr=“value”]	选择具有attr属性且属性值等于value的inp元素
inp [attr^=“value”]	匹配具有attr属性且值以value开头的inp元素
inp [attr$="value]	匹配具有attr属性且值以value结尾的inp元素
inp [attr*=“value”]	匹配具有attr属性且值中含有value的inp元素

利用属性选择器就可以不用借助于类或者id选择器

<style>
    /*选择是input内 具有value属性的 那个元素*/
    input[value] {
        color: red;
    }
</style>

<body>
<input type="text" value="请输入用户名">
<input type="text"> 
</body>

可以选择属性=值的某些元素.

<style>
    input[value = 'password'] {
        color: red;
    }
</style>

<body>
    <input type= "text" id="">
    <input type="password" id="">
</body>

可以选择属性值开头的某些元素

<style>
/*选择div里面  具有class属性  以index开头的那些元素*/
    div[class^=index]{
        color: red;
    }
</style>

<body>
    <div class="index1">属性值开头</div>
    <div class="index2">属性值开头</div>
    <div class="index3">属性值开头</div>
    <div class="index4">属性值开头</div>
</body>

结构伪类选择器

结构伪类选择器主要根据文档结构来选择器元素，常用于根据父级选择器里面的子元素

选择符	含义
inp: first-child	匹配父元素中的第一个子元素 inp
inp: last-child	匹配父元素中最后一个inp元素
inp: nth-child(n)	匹配父元素中的第n个子元素inp
inp: first-of-typinp	指定类型inp的第一个
inp: last-of-typinp	指定类型inp的最后一个
inp: nth-of-typinp(n)	指定类型inp的第n个

<style>
	/*选择第一个li*/
    li:first-child{
        color: red;
    }
    /*选择最后一个li*/
    li:last-child{
        color: blue;
    }
      /*选择第三个li*/
    li:nth-child(3){
        color: green;
    }
</style>
<body>
   <ul>
      <li>我变红了</li>
      <li>我没变</li>
      <li>我变绿了</li>
      <li>我变蓝了</li>
   </ul>
</body>

nth-child (n)选择某个父元素的一个或多个特定的子元素

n 如果是数字,就是选择第n个子元素，里面数字从1开始…
可以是关键字:even偶数,odd奇数
可以是公式: 如果n是公式,则从0开始计算,但是第0个元素或者超出了元素的个数会被忽略

<style>
    /* 选择在前五个span元素  包括第五个 */
   span:nth-child(-n+5){
       color: red;
   }
</style>

nth-child 与 nth-of-type的区别

<style>
    /*执行的时候会把所有盒子排序 然后先看  :nth-child（1）之后再回去看前面的 span  */
    /*因为 第一个是p  与要选的span匹配不上，所以没有标签会被选*/
   div span:nth-child(1){
       color: red;
   }
    /*执行的时候会把指定的盒子排序 所以会直接把第一个span选出来*/
    div span:nth-of-type(1){
        color: blue;
    }
</style>

<body>
    <div>
        <p>没人选我</p>
        <span>我会变蓝</span>
        <span>没人选我</span>
    </div>
</body>

总结：

nth-child对父元素里面所有子元素排序选择(序号是固定的)先找到第n个子元素,然后看看是否和inp匹配
nth-of-type对父元素里面指定子元素进行排序选择。先去匹配inp ,然后再根据inp找第n个子元素

伪元素选择器

伪元素选择器可以帮助我们利用CSS创建新标签元素,而不需要HTML标签,从而简化HTML结构。

::before在元素内部的前面插入内容
::before 创建一个伪元素，其将成为匹配选中的元素的第一个子元素。常通过content属性来为一个元素添加修饰性的内容。此元素默认为行内元素
语法规范：element::before { 样式 }

a::before {   
	content: "♥"; /*在a链接前面插入一个♥*/
 }

::after 在元素内部的后面插入内容
::after表示法是在CSS 3中引入的，::符号是用来区分伪类和伪元素的。支持CSS3的浏览器同时也都支持CSS2中引入的表示法:after。
语法规范：element::after { 样式 }

a::after {   
	content: "♥"; /*在a链接后面插入一个♥*/
 }

注意：

before和after创建一个元素,但是属于行内元素
before 和 after必须有content属性
可以用几乎任何方法定义 content中的文字和图片样式
新创建的这个元素在文档树中是找不到的,所以称为伪元素
伪元素选择器和标签选择器一样,权重为1

示例：

<style>
    p::before{
        content: '♥';
        color: red;
    }
    p::after{
        content: '♥';
        color: orange;
    }
</style>

<body>
    <p>我是一只快乐的程序猿</p>
</body>