CSS伪元素，伪类选择器

最新推荐文章于 2023-05-17 13:37:53 发布

无盐海

最新推荐文章于 2023-05-17 13:37:53 发布

阅读量3.1k

点赞数 1

分类专栏： CSS

本文链接：https://blog.csdn.net/Fanbin168/article/details/46137877

版权

CSS 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

伪类选择器是CSS中已经定义好了的选择器，不能谁便取名，常用的味蕾选择器是使用在a元素上的几种，如a:link a:visited a：hover a:active

伪元素选择器斌不是针对真正的元素使用的选择器，而是针对CSS中已经定义好的伪元素使用的选择器，CSS中有如下四种伪元素选择器（first-line, first-letter, berfore ,after）

CSS四种伪元素选择器

<1>

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style>
        p:first-line { /*伪元素： 本来p元素的第一行是一句文字，并不是一个元素，但是这里将p元素的第一行伪装成一个元素了，然后给它设置样式; */
            font-size: 30px;
            font-family: Arial;
            color: red;
        }

        p:first-letter { /*这里将p标签这个元素的第一个字母伪装成一个元素，然后给他设置样式*/
            font-size: 3cm;
        }
    </style>
</head>
<body>
    <p>
        Aaaaaaaaaaa<br />
        bbbbbbbbbbb<br />
        ccccccccccc<br />
    </p>
</body>
</html>

<2>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style>
    
        p:before {  /*在p元素前面追加一个“你好”文字*/
            content:"你好！";
            

        }
        p:after { /*在p元素后面追加一个“大家好”文字*/
            content:"大家好！"
        }

          
    </style>
</head>
<body>
    <p>
        Aaaaaaaaaaa
    </p>
</body>
</html>

CSS四个最基本的结构性伪类选择器

1> :root

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style>
        :root { /*将样式绑定到页面的根元素中，所有根元素是指位于文档中最顶层结构的元素，即<html> 即将HTML的背景设置为黄色*/
            background-color: yellow;
        }
    </style>
</head>
<body>
    <p>
        Aaaaaaaaaaa
    </p>
</body>
</html>

2>:not

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style>
        li:not(.two) { /*排除某个元素； 这里不同于Jquery的伪选择器; 这里括号里是一个“选择器”*/
            color:red;
            font-size:30px;
        }        
    </style>
</head>
<body>
    <ul>
        <li>aaaaaaaaaaa</li>
        <li class="two">aaaaaaaaaaa</li> 
        <li>aaaaaaaaaaa</li>
           
    </ul>
</body>
</html>

3>:empty

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style>
        li:empty { /*将空的li元素隐藏掉*/
            display:none;
        }             
    </style>
</head>
<body>
    <ul>
        <li>aaaaaaaaaaa</li>
        <li></li> 
        <li>aaaaaaaaaaa</li>
           
    </ul>
</body>
</html>

4>:target

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style>
        :target { /*将目标元素设置一个样式 ；当点击“去到one锚点”后将one锚点的背景颜色设为绿色，当点击“去到tow锚点”的时候将two锚点的背景颜色设为绿色 */
            background-color: green;
        }
    </style>
</head>
<body>
    <a href="#one">去到one锚点</a><br>
    <a href="#two">去到tow锚点</a><br><br><br>

    <a name="one">
        中国人中国人中国人中国人中国人<br>
        中国人中国人中国人中国人中国人<br>
        中国人中国人中国人中国人中国人<br>
        中国人中国人中国人中国人中国人<br> <br> <br> <br>    
    </a>



    <a name="two">
        美国人美国人美国人美国人美国人<br>
        美国人美国人美国人美国人美国人<br>
        美国人美国人美国人美国人美国人<br>
        美国人美国人美国人美国人美国人<br>
    
    </a>
</body>
</html>

其他的伪类选择器

强调一下：找元素的时候不是找它的外层，而是直接z直接用里层的li，所以我们这里都是直接用找到li元素；

:first-child 找每组第一行; :last-child 找每组最后一行 (每个ul下的li为一组)

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style>
        li:first-child { /*找出相同一级中的li元素，然后再找出它们各自的第一个元素,给它设置样式； 比如：url1与url2下面都有li元素，url1下的li元素为一组,url2下面的li为一组，url1下的这一组li元素，与url2下的那一组li元素是同一个级别的。 然后将url1下的那一组li元素的第一个li元素 和url2下的那一组li元素的第一个li元素的背景设置为红色*/
            background-color: red;
        }

        li:last-child { /*找出相同一级中的li元素，然后再找出它们各自最后的那个元素,给它设置样式   （例子：如上）*/
            background-color: green;
        }

        li:nth-child(3) { /*找出相同一级中的li元素，然后再找出它们指定下标的那个元素,给它设置样式 ， （例子：如上），注意：下标从1开始的*/
            background-color: yellow;
        }

    </style>
</head>
<body>
   <ul id="url1">
       <li>今天天气不错，挺风和日丽的</li>  
       <li>今天天气不错，挺风和日丽的</li>
       <li>今天天气不错，挺风和日丽的</li>
       <li>今天天气不错，挺风和日丽的</li>
       <li>今天天气不错，挺风和日丽的</li>
   </ul>

    <ul id="url2">
        <li>人生能有几回搏，今天不博何日博</li>
        <li>人生能有几回搏，今天不博何日博</li>
        <li>人生能有几回搏，今天不博何日博</li>
        <li>人生能有几回搏，今天不博何日博</li>
        <li>人生能有几回搏，今天不博何日博</li>
    </ul> 
</body>
</html>

奇偶伪类选择器

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style>
        li:nth-child(even) { /*找出相同一级中的li元素，然后将每组中的偶数设置为红色 （不知为什么和jquery不一样，实验得知：下标从1开始的，所以第一行而奇数，所以第一行是蓝色的，第二行是偶数，所以第二行才是红色的）*/
            background-color:red;
        }

        li:nth-child(odd) { /*找出相同一级中的li元素，然后将每组中的奇数设置为蓝色（不知为什么和jquery不一样，实验得知：下标从1开始的）*/
            background-color: blue;
        }

    </style>
</head>
<body>
   <ul id="url1">
       <li>今天天气不错，挺风和日丽的</li>  
       <li>今天天气不错，挺风和日丽的</li>
       <li>今天天气不错，挺风和日丽的</li>
       <li>今天天气不错，挺风和日丽的</li>
       <li>今天天气不错，挺风和日丽的</li>
   </ul>

    <ul id="url2">
        <li>人生能有几回搏，今天不博何日博</li>
        <li>人生能有几回搏，今天不博何日博</li>
        <li>人生能有几回搏，今天不博何日博</li>
        <li>人生能有几回搏，今天不博何日博</li>
        <li>人生能有几回搏，今天不博何日博</li>
    </ul> 
</body>
</html>

CSS中的奇偶选择器，对比jquery中的奇偶选择器有什么不同

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="jquery-1.11.2.js"></script>
</head>
<body>
   <ul id="url1">
       <li>今天天气不错，挺风和日丽的</li>  
       <li>今天天气不错，挺风和日丽的</li>
       <li>今天天气不错，挺风和日丽的</li>
       <li>今天天气不错，挺风和日丽的</li>
       <li>今天天气不错，挺风和日丽的</li>
   </ul>

    <ul id="url2">
        <li>人生能有几回搏，今天不博何日博</li>
        <li>人生能有几回搏，今天不博何日博</li>
        <li>人生能有几回搏，今天不博何日博</li>
        <li>人生能有几回搏，今天不博何日博</li>
        <li>人生能有几回搏，今天不博何日博</li>
    </ul> 
</body>
</html>
<script type="text/javascript">
    $(function () {
        $("li:even").css("background-color", "red");  //jquer这个奇偶选择器的下标从开始的，0是偶数，所以第一行为红色，而且它是获取页面所有的li，将所有的li视为一组，然后查找奇偶，它与CSS的li:nth-child(odd), 或li:nth-child(even) 不一样。(css是将每个ul下面的li都各自视为一组 而且每组元素的下标都是从1开始的)

        $("li:odd").css("background-color", "blue");
    })
</script>

自定义隔N行进行变色

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style type="text/css">
        p:nth-child(3n+4) {  /*我们用:nth-child(even) 或者:nth-child(odd) 可以找出奇偶元素，但是假如我想每隔3个元素就变色呢？*/
                             /*3n表示每隔3个元素，4表示从第四个元素开始，每隔三个元素就将他们的颜色设为红色*/
            background-color:red
        }
    </style>
</head>
<body>
    <div>
        <p>今天天气还可以</p>
        <p>今天天气还可以</p>
        <p>今天天气还可以</p>
        <p>今天天气还可以</p>
        <p>今天天气还可以</p>
        <p>今天天气还可以</p>
        <p>今天天气还可以</p>
        <p>今天天气还可以</p>
        <p>今天天气还可以</p>
        <p>今天天气还可以</p>
    </div>
</body>
</html>

找同一类型的元素：:nth-of-type(n) | :nth-last-of-type(n)

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style type="text/css">
        /*最外层的div里有4个p元素，2个div元素*/

        p:nth-child(4) {
            background-color:red;  /*我们想将第四个p元素的背景颜色设为红色，可是发现大的div里面的第四个元素是一个div元素，并不是一个p元素，所以我们这样根本就没有取到第四个p元*/
        
        }

        p:nth-of-type(4) { /*找出大的div里的同一类型的元素，排除其他类型的元素；（注意：下标从1开始）*/
                           background-color:blue; /*这样我们就找到了大的div里的第四个p元素，然后将它的背景颜色设为蓝色*/
        }

        p:nth-last-of-type(3) { /*找出大的div里的同一类型的元素，排除其他类型的元素  然后 从后往前数，找到第3个p元素 (注意：下标从1开始)*/
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div>
        <p>今天天气还可以</p>
        <p>今天天气还可以</p>
        <p>今天天气还可以</p>
        <div>是啊，还不错，要出去走走</div>
        <div>是啊，还不错，要出去走走</div>
        <p>今天天气还可以</p>
    </div>
</body>
</html>

无盐海

关注

1
点赞
踩
9

收藏

觉得还不错? 一键收藏
1
评论
CSS伪元素，伪类选择器

p:first-line { /*伪元素：本来p元素的第一行是一句文字，并不是一个元素，但是这里将p元素的第一行伪装成一个元素了，然后给它设置样式; */ font-size:30px; font-family:Arial; color:red; } p:first-letter { /*这
复制链接

扫一扫

专栏目录