前端学习笔记：CSS3新增--笔记来自B站黑马前端Pink老师学习视频（部分）

CSS3新增–笔记来自B站黑马前端Pink老师学习视频

一、属性选择器

属性选择器可以根据元素的特定属性来选择元素，这样就不用借助于类或者id选择器

<title>CSS3新增属性选择器</title>
    <style>
        /* 必须是 input 但是同时具有 value这个属性 */
        input[value] {
     
            color: pink;
        }

        /* 只选择 type=text 的input 选取出来 */
        input[type=text] {
     
            color: pink;
        }

        /* 选出class的值是以icon开头的元素 */
        div[class^=icon] {
     
            color: red;
        }

        /* class的值是以data结尾的元素 */
        section[class$=data] {
     
            color: blue;
        }

        /* class值中含有cd的元素 */
        div[class*=cd] {
     
            color: coral;
        }

        /* 类选择器和属性选择器 伪类选择器 权重都是10 */
    </style>

二、结构伪类选择器

1.nth-child选择器

<title>CSS3新增结构伪类选择器</title>
    <style>
        /* 1. 选择ul 里面的第一个孩子 */
        ul li:first-child {
     
            background-color: pink;
        }
        /* 2.选择ul 里面的最后一个孩子 */
        ul li:last-child {
     
            background-color: pink;
        }
        /* 3.选择ul 里面的第2个孩子 */