nth-child()和nth-of-type()

最新推荐文章于 2022-11-10 07:11:27 发布

demo_coder

最新推荐文章于 2022-11-10 07:11:27 发布

阅读量126

点赞数

分类专栏：前端学习文章标签： css html css3

本文链接：https://blog.csdn.net/qq_53542496/article/details/125354911

版权

前端学习专栏收录该内容

2 篇文章 0 订阅

订阅专栏

选择器:nth-child(n):
(1).选择当前元素的父元素下的所有子元素。
(2).就在这些子元素里面找第n个元素，
判断是否是选择器所指定的元素。

<!DOCTYPE html>
<html>
<head>
<style> 
.inner:nth-child(2){
    background-color: green;
}
</style>
</head>
<body>
   <div>
        <h2>h2</h2>
        <div class="inner">div
            <h2>h2</h2>
            <div>div</div>
            <p>p</p>
            <span>span</span>
        </div>
        <p>p</p>
        <span>span</span>
        <h2>h2</h2>
        <div>div</div>
        <p>p</p>
        <span>span</span>
   </div>
</body>
</html>

效果：

选择器 :nth-child(n):
(1).选择当前元素的父元素下的所有子元素。
(2).选择子元素的第n个标签

<!DOCTYPE html>
<html>
<head>
<style> 
.inner :nth-child(2){
 background-color: green;
}
</style>
</head>
<body>
<div>
     <h2>h2</h2>
     <div class="inner">div
         <h2>h2</h2>
         <div>div</div>
         <p>p
         </p>
         <span>span</span>
     </div>
     <p>p</p>
     <span>span</span>
     <h2>h2</h2>
     <div>div</div>
     <p>p</p>
     <span>span</span>
</div>
</body>
</html>

效果：

选择器:nth-of-type(n):
(1).选择当前元素的父元素下的所有子元素。
(2).然后将选择器指定的元素类型找出，再从中找第n个元素。

<!DOCTYPE html>
<html>
<head>
<style> 
.inner:nth-of-type(2){
    background-color: green;
}
</style>
</head>
<body>
   <div class="outer">
        <h2>h2</h2>
        <div class="inner">div
            <h2>h2</h2>
            <div>div</div>
            <p>p
            </p>
            <span>span</span>
            <div>div2</div>
        </div>
        <p>p</p>
        <span>span</span>
        <h2>h2</h2>
        <div class="inner">div</div>
        <p>p</p>
        <span>span</span>
   </div>
</body>
</html>

效果：

选择器 :nth-of-type(n):
(1).选择当前元素的父元素下的所有子元素。
(2).找到所有选择器元素下的所有子孙元素，然后每个元素的第n个元素被选择。

<!DOCTYPE html>
<html>
<head>
<style> 
.inner :nth-of-type(2){
    background-color: green;
}
</style>
</head>
<body>
   <div>
        <h2>h2</h2>
        <div class="inner">div
            <h2>h2</h2>
            <div>div
                <h2>h2</h2>
                <div>div</div>
                <p>p
                </p>
                <span>span</span>
                <div>div2</div>
            </div>
            <p>p
            </p>
            <span>span</span>
            <div>div2</div>
        </div>
        <p>p</p>
        <span>span</span>
        <h2>h2</h2>
        <div>div</div>
        <p>p</p>
        <span>span</span>
   </div>
</body>
</html>