child系列用法

绿仔牛奶_

已于 2022-06-10 15:32:57 修改

阅读量1.2k

点赞数

分类专栏： Web前端核心技术文章标签： css css3 html

于 2022-06-10 15:22:28 首次发布

本文链接：https://blog.csdn.net/yuqu1028/article/details/125222239

版权

Web前端核心技术专栏收录该内容

16 篇文章 0 订阅

订阅专栏

写在前面:伪类选择器，在使用id选择器以及类选择器时经常需要同时对多个不同特殊的标签进行属性设置，为了减少id和类选择器的使用次数，经常用child来选中某级元素的某一个子元素进行特殊设定
child系列的用法格式定义：

父元素>子元素标签：child{
    样式表
}
其中child用法有多种，大致如下：
（1）：first-child匹配祖先元素的第一个子元素
（2）：last-child匹配祖先元素的最后一个子元素
（3）：only-child
（4）：nth-child(n) 匹配祖先元素的第N个子元素
（5）：nth-of-type(n)匹配祖先元素的第N个特定类型的子元素
下面对于每种用法进行详解

first-child

定义

<style>
#d1{
    width:50px;
    height:50px;
    background-color:red;
}			
#d1>span:first-child{
    width:auto;
    height:auto;
    background-color:tomato;
}
</style>
html:
<body>
<div id="d1">
	<span>测试子元素0</span>
</div>
</body>

如上代码所示，此时不需要对div子元素span进行另外的选择器设置也能控制它的显示属性

last-child

使用方法与first-child相同：

#d1{
    width:50px;
    height:50px;
    background-color:red;
}			
#d1>span:last-child{
    width:auto;
    height:auto;
    background-color:tomato;
}

only-child

only-child用于选中父级元素下的唯一一个子元素，注意时唯一子元素

#d1{
    width:50px;
    height:50px;
    background-color:red;
}			
#d1>span:only-child{
    width:auto;
    height:auto;
    background-color:tomato;
}

<div id="d1">
    <span>
    唯一子元素
    </span>
</div>

nth-child

nth-child(n)用于选中父级元素下的某个特定子元素
使用方法是如下：

#d1{
            width: 200px;
            height: 200px;
            background-color: tomato;
        }
        #d1>span:nth-child(odd){
            /* 选中奇数位子元素 */
            width: auto;
            height: auto;
            background-color: skyblue;
            font-family: 仿宋;
            text-align: center;
            color: blue;
        }

<div id="d1">
    <span>测试子元素0</span>
    <span>测试子元素1</span>
    <span>测试子元素2</span>
    <span>测试子元素3</span>
    <span>测试子元素4</span>
    <span>测试子元素5</span>
    <span>测试子元素6</span>
    <span>测试子元素7</span>
    <span>测试子元素8</span>
    <span>测试子元素9</span>
</div>

写法格式：
直接数字写法：nth-child(number),number为所匹配的具体某一个子元素
倍数：2n，3n，5n… 2n匹配第2,4,6…个子元素 3n,5n依次类推
公式，3n+1，5n+1等等
奇偶匹配:odd奇数，even偶数
odd与2n+1相同，even与2n相同

在这里插入图片描述

绿仔牛奶_

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
child系列用法

after、berore、child:first-child 匹配父元素中第一个子元素:last-child 匹配父元素中最后一个子元素:only-child 匹配父元素中仅有一个子元素的p元素:nth-child(n) :匹配属于其父元素的第 N 个子元素，不论元素的类型:nth-of-type(n) : 匹配属于父元素的第 N 个特定类型的子元素写在前面:伪类选择器，在使用id选择器以及类选择器时经常需要同时对多个不同特殊的标签进行属性设置，为了减少id和类选择器的使用次数，经常用child来选
复制链接

扫一扫