CSS之关系选择器、属性选择器、伪类选择器

敲代码敲到头发茂密

已于 2024-02-18 16:53:46 修改

阅读量413

点赞数 1

分类专栏：前端 # CSS 文章标签： css html css3

于 2022-01-15 21:08:23 首次发布

本文链接：https://blog.csdn.net/YZL40514131/article/details/122421882

版权

前端同时被 2 个专栏收录

37 篇文章 0 订阅

订阅专栏

CSS

4 篇文章 1 订阅

订阅专栏

在这里插入图片描述

CSS之关系选择器、属性选择器、伪类选择器

一、关系选择器
二、属性选择器
三、伪类选择器

一、关系选择器

后代选择器：只要是这个元素的后代，样式都会发生变化，div下面的所有h1标签样式都会改变
关系选择器：子代选择器，只改变子标签的样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			/*后代选择器：只要是这个元素的后代，样式都会发生变化
        	div下面的所有h1标签样式都会改变*/
			div h1{
				color: gold;
			}
			/*关系选择器：子代选择器
                         只改变子标签的样式*/
			div>h1{
				color: royalblue;
			}
		</style>
	</head>
	<body>
		<div>
                        <h1>富强</h1>
                        <h1>民主</h1>
                        <h1>文明</h1>
                        <h1>和谐</h1>
                        <h1>自由</h1>
                        <span>
                                <h1>平等</h1>
                                <h1>公正</h1>
                                <h1>法制</h1>
                                <h1>爱国</h1>
                                <h1>敬业</h1>
                        </span>
                </div>
	</body>
</html>

二、属性选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
                        /*属性选择器*/
                        input[type="password"]{
                                background-color: red;
                        }
                        input[type="text"][value="kb1"]{
                                background-color: yellow;
                        }
                        
                </style>
	</head>
	<body>
		<form>
                        用户名1：<input type="text" value="kb1" /><br />
                        用户名2：<input type="text" value="kb2" /><br />
                        密&emsp;码：<input type="password" value="123123" /><br />
                  <input type="submit" value="登录" />
                </form>
	</body>
</html>

效果展示
在这里插入图片描述

三、伪类选择器

一般伪类选择器都用在超链接上：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			a:link{
				color: royalblue;
			}
			a:hover{
				color: black;
			}
		</style>
	</head>
	<body>
		<a href="index.html">超链接</a>
	</body>
</html>

敲代码敲到头发茂密

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
2
评论
CSS之关系选择器、属性选择器、伪类选择器

一、关系选择器后代选择器：只要是这个元素的后代，样式都会发生变化，div下面的所有h1标签样式都会改变关系选择器：子代选择器，只改变子标签的样式<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> /*后代选择器：只要是这个元素的后代，样式都会发生变化
复制链接

扫一扫