CSS-5-结构伪类选择器

最新推荐文章于 2024-04-16 17:10:31 发布

西西ANO

最新推荐文章于 2024-04-16 17:10:31 发布

阅读量173

点赞数

分类专栏： # CSS 文章标签： css3

本文链接：https://blog.csdn.net/baidu_38126306/article/details/110729966

版权

CSS 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

CSS -> 结构伪类选择器

伪类：条件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--避免使用class选择器和id选择器-->
    <style>
        
        /*ul的第一个子元素*/
        ul li:first-child{
            background: deeppink;
        }
        /*ul的最后子元素*/
        ul li:last-child{
            background: darkcyan;
        }

        /*选中p1：定位到父元素，选择当前的第一个元素
        p:nth-child(1)：选择当前p元素的父级元素，选中父级元素的第一个，并且是当前标签（p）
        */
        p:nth-child(2){
            background: coral;
        }
        
        /*选中父元素下的第二个为p标签的元素*/
        p:nth-of-type(2){
            background: yellow;
        }
        a:hover{
            background: red;
        }

    </style>
</head>
<body>

<h1>h1</h1>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
    <li>li1</li>
    <li>li2</li>
    <li>li3</li>
</ul>
<a href="">anobabe</a>
</body>
</html>

西西ANO

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS-5-结构伪类选择器

CSS -> 结构伪类选择器伪类：条件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title>  <style> /*ul的第一个子元素*/ ul li:fir
复制链接

扫一扫