當前位置：首頁 > 前端技术 > CSS >内容正文

CSS

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

發布時間：2025/3/21 CSS 30 豆豆

生活随笔收集整理的這篇文章主要介紹了 CSS之关系选择器、属性选择器、伪类选择器小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

一、關系選擇器

后代選擇器：只要是這個元素的后代，樣式都會發生變化，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>

總結

以上是生活随笔為你收集整理的CSS之关系选择器、属性选择器、伪类选择器的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： CSS基本选择器（元素选择器、类选择器、
下一篇： CSS之固定定位、相对定位、绝对定位