css序选择器

最新推荐文章于 2023-03-12 06:00:00 发布

小鱼的池塘

最新推荐文章于 2023-03-12 06:00:00 发布

阅读量2.1k

点赞数

分类专栏：前端基础语言从学习文章标签： css css3

本文链接：https://blog.csdn.net/haha_hello/article/details/54970312

版权

前端基础语言从学习专栏收录该内容

27 篇文章 1 订阅

订阅专栏

一，序选择器1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>18-css序选择器.html</title>
    <!--
    序选择器:
    css3中新增的选择器最具代表性的就是序选择器
    1,同级别的第几个
    :first-child 选中同级别中的第一个
    :last-child  选中同级别中的最后一个
    :nth-child(n) 选中同级别中的第n个
    :nth-last-child(n) 选中同级别中的倒数第n个
    :only-child 选中父元素中只有一个子元素的元素
    注意点:不区分类型
    2,同类型的第几个
    :first-of-type 选中同级别中同类型的第一个
    :last-of-type 选中同级别中同类型的最后一个
    :nth-of-type(n) 选中同级别中同类型的第n个
    :nth-last-of-type(n) 选中同级别中同类型的倒数第n个
    :only-of-type 选中父元素中子元素的类型只有一种的元素
    -->
    <style>
        /*p:first-child{*/
            /*color: red;*/
        /*}*/
        /*
        p:first-of-type{
            color: red;
        }*/

        /*p:last-child{
            color: greenyellow;
        }*/
        /*p:last-of-type{
            color: green;
        }*/

        /*p:nth-child(3){
            color: red;
        }*/
        /*p:nth-of-type(3){
            color: burlywood;
        }*/
        /*p:nth-last-child(2){
            color: purple;
        }*/
        /*p:nth-last-of-type(2){
            color: yellow;
        }*/
        /*p:only-child{
            color: purple;
        }*/
        p:only-of-type{
            color: red;
        }
    </style>
</head>
<body>
<!--<div>
    <p>我是段落5</p>
    <p>我是段落6</p>
    <p>我是段落7</p>
    <p>我是段落8</p>
    <p>我是段落9</p>
</div>
-->
<p>我是段落1</p>
<div>
    <h1>我是标题</h1>
    <p>我是段落</p>
    <p>我是段落2</p>
</div>
</body>
</html>

二，序选择器2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>18-序选择器下.html</title>

    <!--
        :nth-child(odd) 选中同级别中所有的奇数
        :nth-child(even) 选中同级别中所有的偶数
        :nth-of-type(odd) 选中同类型同级别中所有的奇数
        :nth-of-type(even) 选中同类型同级别中所有的偶数
        :nth-child(xn + y) 选中同级别中所有的 xn + y
        :nth-of-type(xn + y) 选中同类型同级别中所有的 xn + y
         n: 代表的是同级别中所有的元素,计数器,n是从0开始递增的
         x: 代表选中同级别中n的倍数
         y: 代表选中同级别中的元素是从第几个开始的
    -->
    <style>
        /*P:nth-child(odd){
            color: red;
        }*/
        /*p:nth-child(even){
            color: yellow;
        }*/
        /*p:nth-of-type(odd){
            color: blue;
        }*/
        /*p:nth-of-type(even){
            color: green;
        }*/
        /*p:nth-child(3n + 1){
            color: red;
        }*/
        p:nth-of-type(3n + 1){
            color: green;
        }
    </style>
</head>
<body>

<p>我是项目</p>
<p>我是项目</p>
<h1>我是标题</h1>
<p>我是项目</p>
<p>我是项目</p>
<h1>我是标题</h1>
<p>我是项目</p>
<p>我是项目</p>
<div>
    <p>我是段落</p>
    <p>我是段落2</p>
    <p>我是段落3</p>
</div>
<h1>我是标题</h1>
<p>我是项目</p>
<p>我是项目</p>
</body>
</html>

小鱼的池塘

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
css序选择器

一，序选择器1<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>18-css序选择器.html</title> <!-- 序选择器: css3中新增的选择器最具代表性的就是序选择器 1,同级别的第几个 :first-child 选中同级别中的第一个
复制链接

扫一扫

专栏目录