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