Web前端学习笔记2（结构伪类选择器，:nth-of-type用法和区别，css3盒子模型，伪类选择器用法及应用）

rootting

已于 2022-06-29 19:41:20 修改

阅读量1k

点赞数

分类专栏： web前端文章标签： html css 前端

于 2022-06-29 19:39:21 首次发布

本文链接：https://blog.csdn.net/m0_60531106/article/details/125527789

版权

web前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

结构伪类选择器（续）

1、用nth-child()选择偶数

ul li:nth-child(even) {
    background-color: #ccc;
}

        /* 选择了所有偶数的孩子 */
        ol li:nth-child(2n) {
            background-color: blue;
        }

2、选择奇数

/* 选择所有奇数的 */
        ul li:nth-child(odd) {
        background-color: gray;
        }

        /* 选择奇数 */
        ol li:nth-child(2n+1) {
            background-color: red;
        }

3、选择所有数

        /* 3、nth-child(n),从0开始 每次加1 往后面计算 这里面必须是n 不能是其他字母 */
        /* 第0个和超出部分的孩子会自动忽略 */
        /* 指选择所有的孩子 */
        ol li:nth-child(n) {
            background-color: red;
        }

4、n+m,和-n+m

n+3/n+m从m开始

-n加m指从1到m

        /* n+3/n+m从m开始 */
        ol li:nth-child(n+5) {
            background-color: yellow;
        }
        /* -n加m指从1到m */
        ol li:nth-child(-n+5) {
            background-color: pink;
        }

:nth-of-type用法

选第一个和最后一个元素

        ul li:first-of-type{
            background-color: pink;
        }
        ul li:last-of-type {
            background-color: pink;
        }

和nth-child()相似的用法

        ul li:nth-of-type(even){
            background-color: pink;
        }

nth-child和nth-of-type的差别

（元素）:nth-child(m)先把所有元素排好，在找前面的元素

（元素）:nth-of-type先找前面元素，再排序号

ul li:nth-of-type(even){
            background-color: pink;
        }
        /* 该语句结果并没有选中任何孩子， */
        /* :nth-child()会把所有的盒子都排列序号 */
        /* 执行的时候首先看:nth-child(1) 之后再回去看 前面的div */
        /* 所以没有符合要求的孩子 */
        section div:nth-child(1){
            background-color: red;
        }
         /* nth-of-type(1)会把所有指定的盒子都排列序号 */
        /* 执行的时候首先看div 之后再回去看 前面的nth-of-type(1) */
        /* 所以选出来bbb */
        /* 结构伪类选择器权重10 */
        /* 以下语句权重12 */
        section div:nth-of-type(1){
            background-color: blue;
        }

    <section>
        <p>aaa</p>
        <div>bbb</div>
        <div>ccc</div>
    </section>

css3盒子模型

我们默认的盒子为

box-sizing: content-box;

盒子大小 = 本身大小+边框+padding

css3盒子模型

box-sizing: border-box;

盒子大小 = 本身大小

因此我们初始化页面可以为

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

伪类选择器

权重：伪类选择器权重和标签选择器一样为1

伪类选择器

(元素)::before//(元素)::after

before 为在父盒子里的内容前创建一个元素

after 为在父盒子里的内容后创建一个元素

应用：

向下的箭头可以用伪类选择器直接做，不用再HTML里加一个元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        @font-face {
    font-family: 'icomoon';
    src:  url('fonts/icomoon.eot?1lv3na');
    src:  url('fonts/icomoon.eot?1lv3na#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?1lv3na') format('truetype'),
    url('fonts/icomoon.woff?1lv3na') format('woff'),
    url('fonts/icomoon.svg?1lv3na#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}
        div{
            position: relative;
            width: 200px;
            height: 35px;
            border: 1px solid red;
        }
        div::after{
            position: absolute;
            top: 10px;
            right: 10px;
            font-family: 'icomoon';
            /* content: ""; */
            content: '\e91e';
            color: red;
            font-size: 18px;
        }
    </style>
</head>
<body>
    <div>

    </div>
</body>
</html>

鼠标浮动到图片时就显示播放图

.tudou:hover::before

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .tudou{
            position: relative;
            width: 440px;
            height: 320px;
            background-color: pink;
            margin: 30px auto;
        }
        .tudou img{
            width: 100%;
            height: 100%;
        }
        .tudou::before{
            content: '';
            display: none;
            /* 伪类选择器不能指定大小，因为加上了定位所以可以指定 */
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, .3) url(arr.png) no-repeat center;
        }
        /* 中间不能有空格 */
        .tudou:hover::before{
            display: block;
        }
    </style>
</head>
<body>
    <div class="tudou">
        <img src="tudou.jpg" alt="">
    </div>
</body>
</html>

rootting

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Web前端学习笔记2（结构伪类选择器，:nth-of-type用法和区别，css3盒子模型，伪类选择器用法及应用）

1、用nth-child()选择偶数 2、选择奇数 3、选择所有数 4、n+m,和-n+m:nth-of-type用法选第一个和最后一个元素和nth-child()相似的用法nth-child和nth-of-type的差别（元素）:nth-child(m)先把所有元素排好，在找前面的元素（元素）:nth-of-type先找前面元素，再排序号css3盒子模型我们默认的盒子为盒子大小 = 本身大小+边框+padding盒子大小 = 本身大小
复制链接

扫一扫

专栏目录