CSS选择器之div:first-child&div :first-child

最新推荐文章于 2024-07-25 10:18:55 发布

Angelayueyue_

最新推荐文章于 2024-07-25 10:18:55 发布

阅读量9.9k

点赞数 5

分类专栏： CSS选择器 CSS 文章标签： css

本文链接：https://blog.csdn.net/weixin_44249574/article/details/107685188

版权

CSS选择器同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

CSS

2 篇文章 0 订阅

订阅专栏

div:first-child&div :first-child的区别

div:first-child属于组合选择器
既满足是div元素，又满足是父级元素的“第一个孩子”，至于父级元素是谁，无所谓。
div :first-child属于后代选择器
必须是div元素的“第一个孩子”，父级元素明确要求是div元素，至于“第一个孩子”是什么元素，无所谓。

div:first-child

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 为了便于观察，将外层div和内层div设置不同的宽高 */
        #outer{
            width: 200px;
            height: 200px;
        }
        #inner{
            width: 100px;
            height: 100px;
        }
        /* 组合选择器 */
        div:first-child{
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div id="outer"><!-- 该div是其父级元素body的第一个孩子 -->
        <div id="inner"></div><!-- 该div是其父级元素div(id="outer")的第一个孩子 -->
        <p></p>
        <span></span>
    </div>
</body>
</html>

浏览器解析效果如下：
组合选择器
内外div都加上了红色边框的样式，因为它们都既是div元素，又是其父级元素的“第一个孩子”。

div :first-child

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 为了便于观察，将外层div和内层div设置不同的宽高，并且给外层div加上蓝色边框 */
        #outer{
            width: 200px;
            height: 200px;
            border: 1px solid blue;
        }
        #inner{
            width: 100px;
            height: 100px;
        }
        /* 后代选择器 */
        div :first-child{
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div id="outer"><!-- 该div是父级元素body的第一个孩子 -->
        <div id="inner"></div><!-- 该div是父级元素div(id="outer")的第一个孩子 -->
        <p></p>
        <span></span>
    </div>
</body>
</html>

浏览器解析效果如下：
后代选择器

红色边框样式只作用到了div元素下的“第一个孩子”——div(id=“inner”)

Angelayueyue_

关注

5
点赞
踩
12

收藏

觉得还不错? 一键收藏
3
评论
CSS选择器之div:first-child&div :first-child

div:first-child&div :first-child的区别div:first-child属于组合选择器既满足是div元素，又满足是父级元素的“第一个孩子”，至于父级元素是谁，无所谓。div :first-child属于后代选择器必须是div元素的“第一个孩子”，父级元素明确要求是div元素，至于“第一个孩子”是什么元素，无所谓。div:first-child<!DOCTYPE html><html lang="en"><head>
复制链接

扫一扫

专栏目录