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