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

在人生的道路上,不管是潇洒走一回,或者是千山独行,皆须是自己想走的路,虽然,有的人并不是很快就能找到自己的方向和道路,不过,只要坚持到底,我相信,就一定可以找到自己的路,只要找到路,就不必怕路途遥远了。

导读:本篇文章讲解 CSS之关系选择器、属性选择器、伪类选择器,希望对大家有帮助,欢迎收藏,转发!站点地址:www.bmabk.com,来源:原文

一、关系选择器

后代选择器:只要是这个元素的后代,样式都会发生变化,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>

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

文章由半码博客整理,本文链接:https://www.bmabk.com/index.php/post/123451.html

(0)

相关推荐

发表回复

登录后才能评论
半码博客——专业性很强的中文编程技术网站,欢迎收藏到浏览器,订阅我们!