小白学习html&css一些笔记——6.拓展选择器

最新推荐文章于 2024-09-14 15:26:51 发布

NiaYoop

最新推荐文章于 2024-09-14 15:26:51 发布

阅读量94

点赞数

分类专栏：自学分享小白编程文章标签： html css

本文链接：https://blog.csdn.net/niayooop/article/details/115068792

版权

自学分享同时被 2 个专栏收录

25 篇文章 0 订阅

订阅专栏

小白编程

24 篇文章 0 订阅

订阅专栏

"本文详细介绍了CSS中的各种选择器，包括通用选择器*、并集选择器、子选择器、父选择器、属性选择器和伪类选择器，并通过实例展示了它们的用法。例如，使用子选择器`div p`来选取div内的所有段落，使用父选择器`div > p`来选取直接位于div下的段落，以及属性选择器`input[type="text"]`来选取所有type为text的输入框。"

摘要由CSDN通过智能技术生成

扩展选择器：
1. 选择所有元素：
语法： *{}
2. 并集选择器：
选择器1,选择器2{}
3. 子选择器：筛选选择器1元素下的选择器2元素
语法：选择器1 选择器2{}
4. 父选择器：筛选选择器2的父元素选择器1
语法：选择器1 > 选择器2{}
5. 属性选择器：选择元素名称，属性名=属性值的元素
语法：元素名称[属性名=“属性值”]{}
6. 伪类选择器：选择一些元素具有的状态
语法：元素:状态{}
如： <a>
状态：
link：初始化的状态
visited：被访问过的状态
active：正在访问状态
hover：鼠标悬浮状态

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            color: red;
        }
        p{
            color: blue;
        }
        /*子选择器*/
        div p{
            color: purple;
        }
        /*父选择器*/
        div>p{
            font-size: 20px;
        }
        /*并集选择器*/
        h1,h2,h3{
            color: gold;
        }
        /*属性选择器*/
        input[type="text"]{
            border: 5px solid;
        }

    </style>
</head>
<body>
<!--

1. 扩展选择器：
				1. 选择所有元素：
					* 语法： *{}
				2. 并集选择器：
					* 选择器1,选择器2{}

				3. 子选择器：筛选选择器1元素下的选择器2元素
					* 语法：  选择器1 选择器2{}
				4. 父选择器：筛选选择器2的父元素选择器1
					* 语法：  选择器1 > 选择器2{}

				5. 属性选择器：选择元素名称，属性名=属性值的元素
					* 语法：  元素名称[属性名="属性值"]{}

				6. 伪类选择器：选择一些元素具有的状态
					* 语法： 元素:状态{}
					* 如： <a>
						* 状态：
							* link：初始化的状态
							* visited：被访问过的状态
							* active：正在访问状态
							* hover：鼠标悬浮状态
-->
<!--子选择器-->
<div>
    <p>纯音乐</p>
</div>
<!--父选择器-->
<!--并集选择器-->
<h1>我是h1</h1>
<h2>我是h2</h2>
<h2>我是h3</h2>
<!--属性选择器-->
<input type="text">
<input type="password">
</body>
</html>