结构伪类选择器

2022/4/14 23:14:14

编程Tag： 选择器元素 li 结构伪类 ul background

本文主要是介绍结构伪类选择器，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

结构伪类选择器

什么是结构伪类选择器？

什么是伪类选择器？

CSS中已经定义好的选择器,不能随便取名

什么是结构伪类选择器？

针对HTML层级结构的的伪类选择器

应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*选择p的父类的第二个元素且该元素类型为p*/
        p:nth-child(2) {
            background: #4949b3;
        }

        /*选择p的父类的类型为p的元素的第二个元素*/
        p:nth-of-type(2) {
            background: #ac49b3;
        }

        /*ul的最后一个元素*/
        ul li:last-child {
            background: red;
        }

        /*ul的第一个元素*/
        ul li:first-child {
            background: #0022ff;
        }

        /*鼠标移动到上面会变黄色*/
        a:hover {
            background: yellow;
        }
    </style>
</head>
<body>
<a href="">1231</a>
<h1>h1</h1>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<p>p4</p>
<ul>
    <li>li</li>
    <li>li</li>
    <li>li</li>
</ul>

</body>
</html>

这篇关于结构伪类选择器的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

结构伪类选择器

结构伪类选择器

什么是结构伪类选择器？

应用

相关编程文章