css3伪类选择器及伪元素

最新推荐文章于 2023-12-28 16:54:57 发布

bug的生产者

最新推荐文章于 2023-12-28 16:54:57 发布

阅读量213

点赞数

分类专栏： css效果

本文链接：https://blog.csdn.net/qq_43209768/article/details/100060211

版权

css效果专栏收录该内容

11 篇文章 0 订阅

订阅专栏

来源于技术胖的视频总结
1.a标签的4种伪类选择器

        a:link{color:#333;}//链接未被访问时
        a:visited{color:red}//链接被访问时
        a:hover{color:green}//鼠标悬停时
        a:active{color:blue} //鼠标点击不松手时

<a href="">小欢喜</a>

2.css3状态伪类选择器，比如说表单的禁用和可用的不同样式

    <input type="text" ><br>
    <input type="text" disabled ><br>

注意样式的书写顺序，颠倒后效果可能出不来

   input:disabled { background-color: red}
   input:enabled{background-color:yellow};

在这里插入图片描述
3.结构伪类选择器

        :first-child:选择某个元素的第一个子元素
        :last-child:选择某个元素的最后一个子元素
        :nth-child(): 选择某个元素的一个或多个特定的子元素
        :nth-last-child(): 选择某个元素的一个或多个特定的子元素,最后一个子元素开始算
        :nth-of-type(): 选择指定的元素
        :nth-last-of-type(): 选择特定的元素,从元素的最后一个开始计算
        :first-of-type():选择一个上级元素下的第一个同类子元素
        :last-of-type():选择一个上级元素下的最后一个同类子元素
        :only-child():选择的元素是它的父元素的唯一一个子元素
        :only-of-type():选择一个子元素是它的上级元素的唯一一个相同类型的子元素
        :empty():选择的元素里面没有任何内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="src/index.js"></script>
    <title>Document</title>

    <style>
        *{margin:0;padding:0}
        .demo{
            border:1px solid #ccc;
            width:300px;
            margin:50px auto;
            padding:10px;
        }
        .demo li{
            float:left;
            list-style: none;
            padding:2px;
            border:1px solid #333;
            margin-right:4px;
            width:20px;
        }
        .demo a{
            display:block;
            width:20px;
            height: 20px;
            border-radius:10px;
            background:rosybrown;
            text-align: center;
            text-decoration: none;
        }
        .clearfix{
            clear:both;
            overflow: auto;
        }

    </style>
</head>
<div class="demo clearfix" >
        <ul class=" clearfix" >
            <li><a href="">1</a></li>
            <li><a href="">2</a></li>
            <li><a href="">3</a></li>
            <li><a href="">4</a></li>
            <li><a href="">5</a></li>
            <li><a href="">6</a></li>
            <li><a href="">7</a></li>
            <li><a href="">8</a></li>
            <li><a href="">9</a></li>
            <li><a href="">10</a></li>
        </ul>
</div>
</body>
</html>

1.:first-child:选择某个元素的第一个子元素

   li:first-child{background:green}

在这里插入图片描述
2.:last-child:选择某个元素的最后一个子元素

li:last-child{background:green}

在这里插入图片描述
3.:nth-child(): 选择某个元素的一个或多个特定的子元素

   li:nth-child(2n){background:green}

在这里插入图片描述
4.:nth-child(): 选择某个元素的一个或多个特定的子元素

        li:nth-child(2n+1){background:green}

在这里插入图片描述
5.:nth-child(): 选择某个元素的一个或多个特定的子元素

        li:nth-child(odd){background:green}

在这里插入图片描述
6.:nth-child(): 选择某个元素的一个或多个特定的子元素

        li:nth-child(even){background:green}

在这里插入图片描述
7.:nth-last-of-type(): 选择特定的元素,从元素的最后一个开始计算

        li:nth-last-child(3){background:green}

在这里插入图片描述
8.nth-child()和nth-of-type()的区别

        li:nth-child(2){background:green}

       li:nth-child(2){background:green}
    </style>
</head>
<div class="demo clearfix" >
        <ul class=" clearfix" >
            <p>33</p>
            <li><a href="">1</a></li>
            <li><a href="">2</a></li>

在这里插入图片描述

        li:nth-of-type(2){background:green}

在这里插入图片描述
9.first-of-type与nth-of-type效果相同
10.:only-child():选择的元素是它的父元素的唯一一个子元素

        li:only-child{background:green}

<div class="demo clearfix" >
        <ul class=" clearfix" >
            <li><a href="">1</a></li>
        </ul>
</div>

在这里插入图片描述
11.:empty():选择的元素里面没有任何内容

<div class="demo clearfix" >
        <ul class=" clearfix" >
            <li></li>
        </ul>
</div>

        li:empty{background:green}

在这里插入图片描述
4.伪元素（用于向某些选择器设置特殊效果）
a.:first-letter将特殊的样式添加到文本的首字母,如文字的首字下沉效果

 <style>
        .demo{
            border:1px solid #ccc;
            width:300px;
            margin:50px auto;
            padding:10px
        }
        .demo::first-letter{
            font-size:40px;
            font-weight:bold;
            float:left;
        }
        
    </style>
</head>
<body>
<div class="demo">
        伪元素是创造关于文档语言能够指定的文档树之外的抽象。例如文档语言不能提供访问元素内容第一字或者第一行的机制。伪元素允许设计师引用它们，否则这是难以办到的。伪元素还提供样式设计师给在源文档中不存在的内容分配样式（例如：:before和:after能够访问产生的内容）。
</div>
</body>

在这里插入图片描述
b.:first-line将特殊的样式添加到文本的首行

        .demo::first-line{
            color:#f0f;
        }

在这里插入图片描述
c.:before在某元素之前插入某些内容
d.:after在某元素之后插入某些内容

 <style>
        .demo{
            border:1px solid #ccc;
            width:550px;
            margin:50px auto;
            padding:10px;
            text-align: center;
        }
       .demo::before{
           content:url(../src/bg1.png);
           display: block
       }
       .demo::after{
           content:url(../src/bg2.png);
           display: block
       }
    </style>
</head>
<body>
<div class="demo">
        埃罗芒阿老师
</div>
</body>

在这里插入图片描述

bug的生产者

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css3伪类选择器及伪元素

来源于技术胖的视频总结1.a标签的4种伪类选择器 a:link{color:#333;}//链接未被访问时 a:visited{color:red}//链接被访问时 a:hover{color:green}//鼠标悬停时 a:active{color:blue} //鼠标点击不松手时<a href="">小欢喜&lt...
复制链接

扫一扫

专栏目录