web前端 四 html 選擇器

2021-09-25 21:43:58 字數 2502 閱讀 2555

我們來看一看常用的幾個選擇器:

doctype

html>

<

html

>

<

head

>

<

meta

charset

="utf-8"

>

<

title

>選擇器

title

>

<

style

>

/***類選擇器(偽類)

*一定是點開頭,這裡我們要說的是,

*如果在頁面體內有樣式應用了中的類,

*那麼該物件就有了類裡面定義的相應屬性 */

.text1

/***標籤選擇器樣式(重定義樣式)

*這種樣式名要寫成和標籤一樣的名字,

*那麼頁面中該標籤所有的樣式,

*都會被定義成我們在標籤選擇器中所定義的樣式。

* (即在操作之前、操作時、操作之後標籤得樣式分別不同) */

/*以下標籤選擇器為偽類*/

/*偽類可以給標籤得不同狀態定義樣式*/ a

:link a

:hover a

:active a

:visited b

/*** 星選擇樣式器:

* 作用是所有的標籤屬性都由星選擇樣式器決定

*這是有就近原則規定的 */

*/**

* 復合選擇器 */

/* 背景樣式:這種樣式由class來應用*/

.bg1

.text1

/*** 交叉選擇器

* 既有重定義,又有類定義。 */

h1.text1

/*** 並集選擇器

* (復合樣式)

* 既有h3字型大小,又有.ttt偽類的字型樣式。 */

h3,.ttt

/*** 後代選擇器 */

.text1h3

/**

* id選擇器:

* 樣式必須根據id名稱修改對應的樣式

* 對某乙個樣式中的標籤進行重定義,

* 就適合用該選擇器。 */

#ststyle

>

head

>

<

body

>

<

h1>我想看看怎麼顯示!<

h1>

<

h2 class

="ttt"

>我想看看怎麼顯示!

h2>

<

h3>我想看看怎麼顯示!

h3>

<

h4>我想看看怎麼顯示!

h4>

<

div

class

="text1"

>

<

div>

<

h3>孫子子也是後代

h3>

div>

<

h3>後代選擇器

h3>

<

h2>這個不需要應用後代選擇器的樣式

h2>

<

div>段落塊

div>

<

h1 class

="text1 bg1"

>這是準備應用類樣式的內容

h1><

br />

<

h1>不準備應用重定義樣式的內容

h1><

br />

<

h3 class

="ttt"

>這是準備應用類樣式的內容

h1><

br />

<

a href

="#"

>這是準備應用類樣式的內容

a><

br />

<

a href

="#"

>這是準備應用類樣式的內容

a><

br />

<

a href

="#"

>這是準備應用類樣式的內容

a><

br />

<

b>應用重定義選擇器樣式

b><

br />

<

b>應用重定義選擇器樣式

b><

br />

<

b>應用重定義選擇器樣式

b><

br />

<

div id=

"st"

>

這是準備應用類樣式的內容

web前端 屬性選擇器 通用選擇器

1.通用選擇器 將屬性應用於頁面的所有元素 2.屬性選擇器 eg.lista 3.按屬性或屬性值選擇 selecting by attribute or value of attribute title title best 4.按值的開始或結束選擇 selecting by beginning o...

Web 前端 CSS選擇器

選擇器 選擇器類選擇器 類選擇器 三年級時,我還是乙個膽小如鼠的小女孩,上課從來不敢回答老師提出的問題,生怕回答錯了老師會批評我。就一直沒有這個勇氣來回答老師提出的問題。學校舉辦的活動我也沒勇氣參加。到了三年級下學期時,我們班上了一節公開課,老師提出了乙個很簡單的問題,班裡很多同學都舉手了,甚至成績...

Web前端 CSS選擇器

本文介紹css的選擇器,包括元素選擇器 id選擇器 類選擇器 屬性選擇器 後代選擇器 子元素選擇器 相鄰兄弟選擇器。本文內容結合w3c教程編寫 1 元素選擇器 又稱型別選擇器 type selector 是最常見的css選擇器,文件的元素就是選擇器,比如p h1 甚至html本身。p h12 id選...