伪元素,伪类选择器,结构伪类选择器的介绍

最新推荐文章于 2023-09-18 00:00:20 发布

Summer_Uncle

最新推荐文章于 2023-09-18 00:00:20 发布

阅读量212

点赞数

文章标签： css html css3

本文链接：https://blog.csdn.net/Summer_Uncle/article/details/130745672

版权

结构伪类选择器

(一)基本用法

	这里主要介绍nth-child和nth-of-type两种结构伪类选择器.
	图中的E代表类名,标签名等目标标签的名字,也就是你想要选中的标签.

1.nth-child
在这里插入图片描述

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    /*这里选中ul后代中第一个标签,并且为li标签,这只红色背景色*/
        li:first-child{
            background-color: red;
        }
		/*这里选中ul后代中第二个标签,并且标签为li,设置绿色背景色*/
        li:nth-child(2n){
            background-color: green;
        }
    </style>
</head>
<body>
    <ul>
        <li>这是第1个li</li>
        <li>这是第2个li</li>
        <li>这是第3个li</li>
        <li>这是第4个li</li>
        <li>这是第5个li</li>
        <li>这是第6个li</li>
        <li>这是第7个li</li>
        <li>这是第8个li</li>
    </ul>
</body>
</html>

效果如下:
在这里插入图片描述

2.nth-of-type
在这里插入图片描述

nth-child和nth-of-type的区别:

nth-child对父级元素内的子元素按顺序排序,但不分类排序.nth-of-type分类排序.

nth-of-type的写法:

1.first-of-type

2.last-of-type

3.nth-of-type(同样可以写nth-child的公式)

(二)公式

在这里插入图片描述

注意:必须严格按照公式的样式来写,不能颠倒顺序

伪元素

在这里插入图片描述

注意:伪元素可以添加样式,且是行内元素.先写伪类选择器,再写伪类元素.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
     /* 结构中只有father中的爱这个字是实际存在的结构,下面添加伪元素,生成"老鼠袋大米" */
        .father {
            width: 300px;
            height: 300px;
            background-color: pink;
        }

        /* 伪元素 */
        .father::before {
            content:'老鼠';
        }

        .father::after {
            content:'大米';
        }
    </style>
</head>
<body>
    <div class="father">爱</div>
</body>
</html>

效果图如下:
在这里插入图片描述

伪类选择器

伪类选择器选中的是一个状态

(一)链接伪类选择器

在这里插入图片描述

(二)焦点伪类选择器

在这里插入图片描述

占位符伪类选择器

input::placeholder { }

添加占位符的样式

(三)属性选择器

在这里插入图片描述

Summer_Uncle

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
伪元素,伪类选择器,结构伪类选择器的介绍

1.nth-child效果如下:2.nth-of-type(二)公式注意:必须严格按照公式的样式来写,不能颠倒顺序注意:伪元素可以添加样式,且是行内元素.先写伪类选择器,再写伪类元素.效果图如下: 伪类选择器选中的是一个状态占位符伪类选择器 input::placeholder { } 添加占位符的样式
复制链接

扫一扫