CSS基础班笔记(三)

最新推荐文章于 2024-05-28 20:45:00 发布

m0_61083409

最新推荐文章于 2024-05-28 20:45:00 发布

阅读量81

点赞数

分类专栏：前端 html 面试文章标签： css 前端 sass

本文链接：https://blog.csdn.net/m0_61083409/article/details/123052720

版权

web前端剑法之css

??web前端剑法之css

地址

??CSS基础班笔记(一)

https://blog.csdn.net/Augenstern_QXL/article/details/115560532

??CSS基础班笔记(二)

https://blog.csdn.net/Augenstern_QXL/article/details/115560502

??CSS基础班笔记(三)

https://blog.csdn.net/Augenstern_QXL/article/details/115726577

??CSS进阶班笔记(四)

https://blog.csdn.net/Augenstern_QXL/article/details/119172527

??CSS进阶班笔记(五)

https://blog.csdn.net/Augenstern_QXL/article/details/120374974

目录总览

在这里插入图片描述

1、新增选择器??

CSS3 给我们新增了选择器，可以更加便捷，更加自由的选择目标元素。

属性选择器
结构伪类选择器
伪元素选择器

1.1、属性选择器??

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

选择符

简介

E[att]

选择具有att属性的E元素

E[att=“val”]

选择具有att属性且属性值等于val的E元素

E[att^=“val”]

匹配具有att属性且值以val开头的E元素

E[att$=“val”]

匹配具有att属性且值以val结尾的E元素

E[att*=“val”]

匹配具有att属性且值中含有val的E元素

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

1

2

3

注意：类选择器，属性选择器，伪类选择器，权重为10

1.2、结构伪类选择器??

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

选择符

简介

E:first-child

匹配父元素中的第一个子元素E

E:last-child

匹配父元素中最后一个E元素

E:nth-child(n)

匹配父元素中的第n个子元素E

E:first-of-type

指定类型E的第一个

E:last-of-type

指定类型E的最后一个

E:nth-of-type（n）

指定类型E的第n个

①、E:first-child 和E:last-child

<head>
    <style>
        /* 1.选择ul里面的第一个孩子 小li */
        
        ul li:first-child {
            background-color: pink;
        }
        /* 2.选择ul里面的最后一个孩子 小li */
        
        ul li:last-child {
            background-color: pink;
        }
    </style>
</head>


<body>
    <ul>
        <li>我是第1个孩子</li>
        <li>我是第2个孩子</li>
        <li>我是第3个孩子</li>
        <li>我是第4个孩子</li>
        <li>我是第5个孩子</li>
        <li>我是第6个孩子</li>
        <li>我是第7个孩子</li>
        <li>我是第8个孩子</li>
    </ul>

②、nth-child(n)

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

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

公式

取值

偶数（等价于even）

2n+1

奇数（等价于odd）

5 10 15 …（5的倍数）

n+5

从第5个开始（包含第五个）到最后

-n+5

前5个（包含第5个）

<head>
	<style>
		/* 选择ul里面的第2个孩子 小li */
        ul li:nth-child(2) {
            background-color: pink;
        }
    </style>
</head>


<body>
    <ul>
        <li>我是第1个孩子</li>
        <li>我是第2个孩子</li>
        <li>我是第3个孩子</li>
        <li>我是第4个孩子</li>
        <li>我是第5个孩子</li>
        <li>我是第6个孩子</li>
        <li>我是第7个孩子</li>
        <li>我是第8个孩子</li>
    </ul>
</body>


<style>
        /* 1.把所有的偶数 even的孩子选出来 */
        ul li:nth-child(even) {
            background-color: #ccc;
        }

        /* 2.把所有的奇数 odd的孩子选出来 */
        ul li:nth-child(odd) {
            background-color: gray;
        }
        /* 3.nth-child(n) 从0开始 每次加1 往后面计算  这里面必须是n 不能是其他的字母 选择了所有的孩子*/
        /* ol li:nth-child(n) {
            background-color: pink;
        } */
        /* 4.nth-child(2n)母选择了所有的偶数孩子 等

最低0.47元/天解锁文章

m0_61083409

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS基础班笔记(三)

web前端剑法之css??web前端剑法之css地址??CSS基础班笔记(一)https://blog.csdn.net/Augenstern_QXL/article/details/115560532??CSS基础班笔记(二)https://blog.csdn.net/Augenstern_QXL/article/details/115560502??CSS基础班笔记(三)https://blog.csdn.net/Augenstern_QXL/article/details/115726
复制链接

扫一扫