<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>元素选择器</title><style>div{font-size: 30px;color: green;}</style></head><body><div>元素选择器///</div><div>元素选择器///</div><!DOCTYPE html> <html><head><meta charset="UTF-8"><title>id选择器</title><style>#div3{font-size: 30px;color: gray;}</style></head><body><div>id选择器/</div><div class="div2">id选择器//</div><div>id选择器///</div><div class="div2">id选择器</div><div id="div3">id选择器/</div></body> </html>
<div>元素选择器///</div><div>元素选择器///</div><div>元素选择器///</div></body></html><!DOCTYPE html> <html><head><meta charset="UTF-8"><title>类选择器</title><style>.div2{font-size: 30px;color: red;}</style></head><body><div>类选择器/</div><div class="div2">类选择器//</div><div>类选择器///</div><div class="div2">类选择器</div><div>类选择器/</div></body> </html><!DOCTYPE html> <html><head><meta charset="UTF-8"><title>id选择器</title><style>#div3{font-size: 30px;color: gray;}</style></head><body><div>id选择器/</div><div class="div2">id选择器//</div><div>id选择器///</div><div class="div2">id选择器</div><div id="div3">id选择器/</div></body> </html>
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>层级选择器</title><style>div p{font-size: 30px;color: yellow;}</style></head><body><div><p>层级选择器</p></div><div>层级选择器</div><p>层级选择器</p></body> </html><!DOCTYPE html> <html><head><meta charset="UTF-8"><title>属性选择器</title><style>input[type='text']{background-color: black;}input[type='password']{background-color: blue;}</style></head><body>用户名：<input type="text" name="username" /><br />密码：<input type="password" name="pass" /></body> </html>