CSS選擇器 我要找到你

2021-08-22 02:37:23 字數 1685 閱讀 7824

什麼是選擇器,在web開發中如果你要想將css樣式應用於特定的html元素,首先需要找到該目標元素。在css中,執行這一任務的樣式規則部分被稱為選擇器(選擇符)。

css選擇器主要有: id選擇符》類選擇器 >標籤選擇器

下面我們一一介紹這幾種選擇器,問我用的是vs2107,在這樣的開發環境下操作演示,建立乙個web專案,在建立乙個html頁和乙個樣式表,在新增中就能找到。

用標籤,來選擇網頁元素,可以能是最直觀的方法了,如同根據家庭位址找人一樣的自然。基本格式是:標籤名 空格 後面是:用花括號包起來的宣告塊。然後,將要設定的樣式宣告,以[屬性名, 冒號:屬性值]的方式寫在宣告塊中,每個樣式之間用分號分隔,屬性值不要加引號。這與html標籤中的屬性值是不一樣的。標籤選擇符在實際工作中很少單獨使用,與其他型別的選擇符,組合在一起已達到精確定位元素的目的。

html頁的**如下,完整版,接下的選擇器將簡寫。

charset="utf-8" />

css測試title>

>

href="css/stylesheet1.css"

rel="stylesheet"

type="text/css" />

>

head>

標籤選擇器測試h1>

永遠用事實說話h1>

測試div>

部落格總結div>

body>

html>

樣式表**

/*

* 建立人:高占路

* css選擇器:id選擇器》類選擇器 >html標籤選擇器

*/body

h1

id選擇器 用id選擇符選擇的元素,必須在當前頁面中,是唯一的,開啟html頁,我們看到兩個標題文字,第乙個標題中的文字是:標籤選擇器測試,第二標題中的文字是:永遠用事實說話。 我們的目標是把:永遠用事實說話 設定成藍色。開啟css樣式表,標籤選擇器試下,會選中所以的h1文字就都成藍色了。這時我們給第二個h1,新增乙個id屬性 id=」blue」,然後咋css樣式表中寫如下css樣式表,這時你就會發現只有第二個文字變成了藍色。這就說明我們選到了頁面中,id等於blue的元素,並且是唯一得。

id選擇符通常來設定網頁中唯一的元素,如網頁的頭部,尾部,目標欄等,大多與布局元素配對使用。

html

標籤選擇器測試h1>

id="blue">永遠用事實說話h1>

body>

css樣式表

#blue

俗話說:物以類聚,人與群分。網頁中的元素也是一樣的,在頁面中,總有一些元素永遠一樣的外觀,一樣的大小,一樣的邊距等,完全可以將這些元素,劃分到一類中,進行統一管理,簡化樣式設計。例如,有四個標籤文字,我想讓第乙個,第三個字型36px,顏色為藍色,這時我們就能用id選擇器了,因為違反了乙個頁面中只能用唯一得乙個元素,這時我們要用類選擇器可以完美做到。如下**

class="circle">標籤選擇器測試h1>

永遠用事實說話h1>

class="circle">測試h1>

部落格總結h1>

body>

.circle

今天總結這些東西,希望對大家有幫助!細微差別可以討論。

我要學前端 css常用選擇器與樣式

選擇器優先順序 css常用樣式 選擇符注意 1.當乙個屬性有多個屬性值時,屬性值與屬性值不分先後順序 2.空格換行等不影響屬性顯示 選擇符表示要定義樣式的物件,可以是元素本身,也可以是一類元素或者制定名稱的元素 主要分為 1.元素選擇符 2.id選擇符 3.類選擇符 4.萬用字元選擇符 5.群組選擇...

css選擇器 CSS選擇器總結

在前不久的專案中,實習小妹妹在乙個全域性的樣式中使用了下面這個css選擇器 content 對應的html結構大致是 實習妹子大致的意思是想要讓content下的子元素div的高度100 但是貌似她沒有真正理解first child的意義,從而導致這個全域性的樣式讓 所有頁面都出現了問題,然後我就只...

CSS選擇器 復合選擇器

選擇器 名稱 說明 css 版本 通用選擇器 選擇所有元素 2元素選擇器 選擇指定型別的元素1 id 選擇器 選擇指定 id 屬性的元素1.class 選擇器 選擇指定 class 屬性的元素 1 attr 系列 屬性選擇器 選擇指定 attr 屬性的元素 2 3 s1,s2,s3 分組選擇器 選擇...