通配選擇符

2021-09-29 08:04:27 字數 2531 閱讀 3975

選擇符

id選擇符,class選擇符,tag選擇符,通配選擇符,分組選擇符,包含選擇符和偽類選擇符

id,class選擇符上個說過了。就直接說tag選擇符。

tag選擇符

也叫標籤選擇符,可直接通過html標籤的名字來設定樣式。

<

!doctype html>

"en"

>

"utf-8"

>

選擇符<

/title>

divp

<

/style>

<

/head>

第乙個標籤<

/div>

第二個標籤<

/div>

第乙個段落<

/p>

第二個段落<

/p>

<

/body>

<

/html>

在同乙個html網頁中,相同的標籤可能有不同的樣式

/*帶有active樣式的div標籤新增顏色

第乙個div標籤

第二個標籤

第乙個p標籤

第二個p標籤

上面的**中需要將帶有active樣式的

標籤新增顏色,但是對同樣帶有active樣式的

標籤沒有影響,這時就需要tag選擇符和class選擇符組合來設定選擇符,使網頁能夠只選擇

標籤中帶active的class樣式,而不去選擇其他標籤中帶active的class樣式。

<

!doctype html>

"en"

>

"utf-8"

>

選擇符<

/title>

div.active

<

/style>

<

/head>

="active"

>第乙個div標籤<

/div>

第二個標籤<

/div>

="active"

>第乙個p段落<

/p>

第二個段落<

/p>

<

/body>

<

/html>

tag選擇符和class選擇符可以和class選擇符組合使用時,tag與class之間是緊挨著的,無需空格隔開。

通配選擇符

可以把樣式通用在所有標籤中,通過星號(*)的方式來設定,要慎用統配選擇符。

<

!doctype html>

"en"

>

"utf-8"

>

統配選擇符<

/title>

*<

/style>

<

/head>

這是乙個標籤<

/div>

這是乙個p標籤<

/p>

這是乙個h1標籤<

/h1>

<

/body>

<

/html>

組選擇符

分組選擇符可以簡化相同的操作,通過逗號(,)來進行分組設定

<

!doctype html>

"en"

>

"utf-8"

>

分組選擇符<

/title>

div,p,h1

<

/style>

<

/head>

這是乙個標籤<

/div>

這是乙個p標籤<

/p>

這是乙個h1標籤<

/h1>

<

/body>

<

/html>

將div,p,h1標籤統一設定顏色,和把標籤分開設定顏色效果相同,但是這種寫法提供了可維護性。

包含選擇符

是指被選標籤被其他標籤所包含,從何人通過篩選的方式進行操作,通過空格來包含設定。例如只需要ul中的li新增顏色,而ol中的li不做任何處理,這時就要用到包含選擇符進行選擇。

<

!doctype html>

"en"

>

"utf-8"

>

包含選擇符<

/title>

ul li

<

/style>

<

/head>

李雲龍<

/li>

楊秀琴<

/li>

和尚<

/li>

<

/ul>

趙剛<

/li>

楚雲飛<

/li>

田雨<

/li>

<

/ol>

<

/body>

<

/html>

jQuery選擇符 XPath選擇符

說明 jquery支援一組基本的xpath選擇符 可以和css選擇符一起使用 jquery無論對什麼文件都可以使用xpath和 css選擇符。1.屬性選擇符 2 特點 允許以類似正規表示式的語法來標識字串的開始 和結尾 也可以使用 表示字串的任意位置。1 a href mailto 表示取得以mai...

CSS選擇符 屬性選擇符

使用屬性選擇器可以篩選出設定了特定屬性的標籤。例如選取所有設定了title屬性的 img title 這種選擇符的第一部分是標籤名 img 隨後是屬性名,放在方括號裡 title css不限制屬性選擇符只能使用標籤名,也可以使用類。例如 photo title 用於選取類為photo,而且設定了ti...

CSS選擇符 型別選擇符

h1用於選取特定html標籤的選擇符,叫型別選擇符或元素選擇符。這種選擇符的作用特別大。能把樣式應用到網頁中的每個目標標籤上。使用這種選擇符,只需少量工作就能大幅修改網頁的外觀。假如想讓網頁中每個段落都使用相同的字型 顏色和字型大小,只需編寫乙個選擇符為p 表示標籤 的樣式即可。html 最基本的佐...