當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

css--css选择器，伪类

發布時間：2025/3/14 编程问答 24 豆豆

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

前戲

前面我們說過CSS規則由選擇器和聲明組成，我們要給標簽設置屬性，那我們就要找到對應的標簽，CSS選擇器可以幫我們找到我們需要的標簽

css選擇器有：

標簽選擇器

類選擇器

ID選擇器

全局選擇器

群組選擇器

后代選擇器

標簽選擇器

標簽選擇器前面我們用過，它是以HTML標簽作為選擇器

<!DOCTYPE html> <html lang="en"> <head><meta http-equiv="Content-Type" content="text/html;charset=utf-8"/><style>p{color:red}h1,div{color:blue}</style> </head> <body><h1>h1標簽</h1><div>css選擇器</div><p>標簽選擇器</p><p>類選擇器</p><p>ID選擇器</p> </body> </html>

注意：有多個標簽之間用，隔開

類選擇器

同一個元素可以設置多個類，之間用空格隔開

<!DOCTYPE html> <html lang="en"> <head><meta http-equiv="Content-Type" content="text/html;charset=utf-8"/><style>.p1{color:red}.p2,.p3{color:blue}</style> </head> <body><h1 class="p1">h1標簽</h1><div>css選擇器</div><p class="p1">標簽選擇器</p><p class="p2">類選擇器</p><p class="p3">ID選擇器</p> </body> </html>

注意：多個類時用，隔開

如果我們只想給p標簽下的class=p1的設置怎么辦？

<!DOCTYPE html> <html lang="en"> <head><meta http-equiv="Content-Type" content="text/html;charset=utf-8"/><style>p.p1{color:red}</style> </head> <body><h1 class="p1">h1標簽</h1><div>css選擇器</div><p class="p1">標簽選擇器</p><p class="p2">類選擇器</p><p class="p3">ID選擇器</p> </body> </html>

在類選擇器前面加上標簽名就可以了

ID選擇器

id選擇器和類選擇器差不多，類選擇器用的是點，id選擇器用的是#

<!DOCTYPE html> <html lang="en"> <head><meta http-equiv="Content-Type" content="text/html;charset=utf-8"/><style>#i1{color: green}</style> </head> <body><p id="i1">標簽選擇器</p><p id="i2">類選擇器</p><p id="i3">ID選擇器</p> </body> </html> View Code

群組選擇器

群組選擇器其實我們在標簽選擇器的時候已經使用過了，就是把多個標簽用逗號隔開，當然，群組選擇器不只可以用做標簽，也可以用做類選擇器，id選擇器

<!DOCTYPE html> <html lang="en"> <head><meta http-equiv="Content-Type" content="text/html;charset=utf-8"/><style>#i1,#i2,#i3,.h1{color: red}</style> </head> <body><h1 class="h1">我是h1</h1><p id="i1">標簽選擇器</p><p id="i2">類選擇器</p><p id="i3">ID選擇器</p> </body> </html> View Code

這樣，頁面上所有的字體都成了紅色

全局選擇器

全局選擇器就是給所有標簽設置一個樣式，一般用做清除標簽默認的樣式

我們來將上面的群組選擇器換成全局選擇器

<!DOCTYPE html> <html lang="en"> <head><meta http-equiv="Content-Type" content="text/html;charset=utf-8"/><style>*{color: red}</style> </head> <body><h1 class="h1">我是h1</h1><p id="i1">標簽選擇器</p><p id="i2">類選擇器</p><p id="i3">ID選擇器</p> </body> </html> View Code

后代選擇器

使用后代選擇器，之間用空格隔開

<!DOCTYPE html> <html lang="en"> <head><meta http-equiv="Content-Type" content="text/html;charset=utf-8"/><style>p em {color: red}</style> </head> <body><h1 class="h1"><em>明天</em>我是h1</h1><p ><em>今天</em>標簽選擇器</p><p id="i2">類選擇器</p><p id="i3">ID選擇器</p> </body> </html>

這樣寫我們就給p標簽下面的em標簽加上了顏色

后代選擇器可以寫多層

偽類選擇器

鏈接偽類

鏈接也就是a標簽，有四種狀態：激活狀態，已訪問狀態，未訪問狀態，和鼠標懸停狀態

偽類hover和active

上面的四種狀態的:link和:visited是a標簽專用的，而:hover和:active其他標簽也可以使用

:hover用與訪問的鼠標經過某個元素時

:active用于一個元素被激活時（既按下鼠標之后松開鼠標之前的時間）

<!DOCTYPE html> <html lang="en"> <head><meta http-equiv="Content-Type" content="text/html;charset=utf-8"/><style>a:link{color: blue}/*未訪問狀態*/a:visited{color: gray}/*已訪問狀態*/a:hover{color:red}/*鼠標懸浮狀態*/a:active{color: green}/*鼠標激活狀態*/p:hover{color:red}p:active{color: green}</style> </head> <body><a href="https://cn.bing.com/">必應</a><p id="i2">類選擇器</p></body> </html> View Code

鏈接偽類的順序

:link>:visited>:hover>:active

說明：

　　a:hover必須置于a:link和a:visited之后才有效

　　a:active必須置于a:hover之后才有效

?CSS優先級

同一樣式表中：

1.權值相同，就近原則（離被設置元素越近優先級越高）

2.權值不同，根據權值來判斷css樣式，哪種權值高，就使用哪種樣式

選擇器權值

標簽選擇器，權值為1

類選擇器和偽類，權值為10

id選擇器，權值為100

通配符選擇器，權值為0

行內樣式，權值為1000

權值規則

統計不同選擇器的個數

每類選擇器的個數乘以相應的權值

把所有的值想加得出選擇器的權值

！important規則

可調整樣式規則的優先級

添加在樣式規則之后，中間用空格隔開

CSS樣式命名

?采用英文字母，數字以及”-“和”_“命名

以小寫字母開頭，不能以數字、”-“，"_"開頭

命名形式：單字，連字符，下劃線和駝峰

轉載于:https://www.cnblogs.com/zouzou-busy/p/11027964.html

總結

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

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