CSS之关系选择器、属性选择器、伪类选择器
生活随笔
收集整理的這篇文章主要介紹了
CSS之关系选择器、属性选择器、伪类选择器
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
一、關系選擇器
后代選擇器：只要是這個元素的后代，樣式都會發生變化，div下面的所有h1標簽樣式都會改變
關系選擇器：子代選擇器，只改變子標簽的樣式
二、屬性選擇器
<!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>總結
以上是生活随笔為你收集整理的CSS之关系选择器、属性选择器、伪类选择器的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： CSS基本选择器（元素选择器、类选择器、
- 下一篇： CSS之固定定位、相对定位、绝对定位