01.css提高笔记-css3新增选择器

文章目录

一.css3新增属性选择器

1、利用属性来进行选择

2、利用属性值来选择

3、利用具有相同属性，并且属性值开头的相同元素进行选择

4、利用具有相同属性，并且属性值结尾的相同元素进行选择

5、利用具有相同属性，并且属性值中含有相同的元素进行选择

二.结构伪类选择器

1、:first-child  选择第一个孩子 

2、:last-child 选择最后一个孩子

3、:nth-child(n)  n可以是数字、关键字或公式

4.  :first-of-type 选择第一个孩子

5.  :last-of-type 选择最后一个孩子

6.  :nth-of-type()  n可以是数字、关键字或公式

7.  :nth-child() 和 :nth-of-type() 区别

三.伪类选择器

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

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

---

一.css3新增属性选择器

1、利用属性来进行选择

    input[value] {

            color: pink;

    }

    <input type="text" value="请输入文字">

    <input type="text">

2、利用属性值来选择

    input[type=text] {

            color: pink;

        }

    <input type="text" value="请输入文字">

    <input type="passward">

3、利用具有相同属性，并且属性值开头的相同元素进行选择

        div[class^=da] {

            color: pink;

        }

        <div class="da1">我是熊大</div>

        <div class="da2">我是熊二</div>

        <div class="da3">我是熊三</div>

        <div>我是光头强</div>

4、利用具有相同属性，并且属性值结尾的相同元素进行选择

        section[class$=juren] {

            color: pink;

        }

    <section class="gs-juren">我是哥斯拉</section>

    <section class="dj-juren">我是迪加</section>

    <section class="not">我是不知道</section>

5、利用具有相同属性，并且属性值中含有相同的元素进行选择

        div[class*=oo] {

            color: pink;

        }

        <div class="moon">明月几时有</div>

        <div class="boot">把酒问青天</div>

        <div class="wooq">我欲乘风归去</div>

        <div class="yool">又恐琼楼玉宇</div>

注意：类选择器、属性选择器、伪类选择器的权重相同

---

二.结构伪类选择器

结构伪类选择器：一般用于选择父元素里的第几个孩子

1、:first-child  选择第一个孩子 

        ul li:first-child {

            background-color: pink;

        }

2、:last-child 选择最后一个孩子

        ul li:last-child {

            background-color: pink;

        }

3、:nth-child(n)  n可以是数字、关键字或公式

        ul li:nth-child(2n) {

            background-color: skyblue;

        }

• 如果是数字，n=1、2、3以此类推
• 如果是关键字 n=even(选中偶数)，n=odd(选中奇数)
• 如果是公式  n=n(选中所有孩子)、2n(选中偶数)、2n+1(选中奇数)、5n(5的倍数)、n+5(从第五个开始往后选择)、-n+5（选择前5个

4.  :first-of-type 选择第一个孩子

        ul li:first-of-type {

            background-color: pink;

        }

5.  :last-of-type 选择最后一个孩子

        ul li:last-of-type {

            background-color: pink;

        }

6.  :nth-of-type()  n可以是数字、关键字或公式

        ul li:nth-of-type() {

            background-color: pink;

        }

• 如果是数字，n=1、2、3以此类推
• 如果是关键字 n=even(选中偶数)，n=odd(选中奇数)
• 如果是公式  n=n(选中所有孩子)、2n(选中偶数)、2n+1(选中奇数)、5n(5的倍数)、n+5(从第五个开始往后选择)、-n+5（选择前5个)

7.  :nth-child() 和 :nth-of-type() 区别

• :nth-child()会把所有的盒子排列序号，执行的时候先看:nth-child()，再看前面指定的盒子
• :nth-of-type() 是先看指定的元素，再执行:nth-of-type()

三.伪元素选择器

伪元素选择器可以利用css创建html标签，从而简化html结构

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

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

语法：element::before { }

注意：

• before和after必须含有content属性
• 伪元素选择器和标签选择器一样，权重为1
• before和after创建一个元素，是属于行内元素
• 新创建的元素在文档里搜不到，所以称之为伪元素