CSS3新增 | 前端笔记（六）

前端学习记录之路

已于 2023-04-30 12:39:13 修改

阅读量33

点赞数

文章标签：前端 css css3

于 2023-04-03 22:16:41 首次发布

本文链接：https://blog.csdn.net/weixin_55901142/article/details/129941227

版权

文章详细介绍了CSS3中的属性选择器，包括按属性、值、开头、结尾和包含进行选择的用法，并展示了结构伪类选择器如:first-child和:nth-child的使用。此外，还讨论了伪元素选择器如::before和::after在创建新内容方面的功能，以及box-sizing属性如何影响盒子模型，和transition如何实现元素的平滑过渡效果。

摘要由CSDN通过智能技术生成

（二）CSS3新增

1.属性选择器

书写	含义
`input[value]{...}`	选具有 XX 属性的 E 元素
`input[type=text]{...}`	选具有 XX 属性且值=XX 的 E 元素
`div[class^=icon]{...}`	选具有 XX 属性且值以 XX 开头的 E 元素
`div[class$=data]{...}`	选具有 XX 属性且值以 XX 结尾的 E 元素
`div[class\*=icon]{...}`	选具有 XX 属性且值含有 XX 的 E 元素

    <style>
        /* 必须是input 但是同时具有 value这个属性 选择这个元素  [] */
        /* input[value] {
            color:pink;
        } */
        /* 只选择 type =text 文本框的input 选取出来 */
        input[type=text] {
            color: pink;
        }
        /* 选择首先是div 然后 具有class属性 并且属性值 必须是 icon开头的这些元素 */
        div[class^=icon] {
            color: red;
        }
        section[class$=data] {
            color: blue;
        }
        div.icon1 {
            color: skyblue;
        }
        /* 类选择器和属性选择器 伪类选择器 权重都是 10 */
    </style>
</head>
<body>
    <!-- 1. 利用属性选择器就可以不用借助于类或者id选择器 -->
    <!-- <input type="text" value="请输入用户名">
    <input type="text"> -->
    <!-- 2. 属性选择器还可以选择属性=值的某些元素 重点务必掌握的 -->
    <input type="text" name="" id="">
    <input type="password" name="" id="">
    <!-- 3. 属性选择器可以选择属性值开头的某些元素 -->
    <div class="icon1">小图标1</div>
    <div class="icon2">小图标2</div>
    <div class="icon3">小图标3</div>
    <div class="icon4">小图标4</div>
    <div>我是打酱油的</div>
    <!-- 4. 属性选择器可以选择属性值结尾的某些元素 -->
    <section class="icon1-data">我是安其拉</section>
    <section class="icon2-data">我是哥斯拉</section>
    <section class="icon3-ico">哪我是谁</section>

</body>

2.结构伪类选择器

选择器	含义
ul li:first-child/first-of-type{…}	选父元素里第一个子元素
last-child/last-of-type{…}	选父元素里最后一个子元素
nth-child(n){…}	把所有排序号再选第几个（n=2,3,…第 n 个）
nth-of-type(n){…}	只选指定的盒子排号（n=2,3,…第 n 个）
nth-child(even/odd/n/2n/2n+1/5n/n+5/-n+5){…}	偶数/奇数/全部/偶数/奇数/5 的倍数/第 5 个开始到最后/前 5 个

   <style>
        /* nth-child 会把所有的盒子都排列序号 */
        /* 执行的时候首先看  :nth-child(1) 之后回去看 前面 div */
        section div:nth-child(1) {
            background-color: red;
        }
         /* nth-of-type 会把指定元素的盒子排列序号 */
        /* 执行的时候首先看  div指定的元素  之后回去看 :nth-of-type(1) 第几个孩子 */
        section div:nth-of-type(1) {
            background-color: blue;
        }
    </style>     

    <section>
        <p>光头强</p>
        <div>熊大</div>
        <div>熊二</div>
    </section>

3.伪元素选择器（权重为 1）

帮助我们利用CSS创建新标签元素，而不需要HTML标签。

样式	含义
`div::before{...（必有 content 属性）}`	行内元素，在父元素内部内容的前面插入内容
`div::after{...（必有 content 属性）}`	行内元素，在父元素内部内容的后面插入内容

备注：行内元素可以转化为行内块，才能改变大小。

    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        /* div::before 权重是2 */
        div::before {
            /* 这个content是必须要写的 */
            /* display: inline-block; */
            content: '我';
            /* width: 30px;
            height: 40px;
            background-color: purple; */
        }
        div::after {
            content: '小猪佩奇';
        }
    </style>
</head>
<body>
    <div>
        是
    </div>
</body>

4.盒子模型box-sizing

box-sizing:border-box（盒子大小就为 width）（无须减边框）

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

5.过渡 transition

transition：过渡属性（all 所有）时间（s）运动曲线（默认 ease）何时开始（s）；

以后继续更新笔记，关注我，不要丢下我。

前端学习记录之路

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3新增 | 前端笔记（六）

* 必须是input 但是同时具有 value这个属性选择这个元素 [] */color:pink;} *//* 只选择 type =text 文本框的input 选取出来 */color;/* 选择首先是div 然后具有class属性并且属性值必须是 icon开头的这些元素 */color;color;/* 类选择器和属性选择器伪类选择器权重都是 10 */
复制链接

扫一扫