CSS 3 選擇器的使用

2021-08-15 03:07:59 字數 1262 閱讀 4439

標籤選擇器:直接選擇某一種標籤,然後全部進行修改樣式。

格式:p

id選擇器:給標籤設定id屬性,然後在css中,對定義了相同id屬性的標籤進行修飾

格式;#id值

注意點:

1.每個html標籤都有乙個屬性叫做id屬性,每個標籤都可以設定id屬性

2.在同乙個介面中,id屬性的值是不能重複的

3.在編寫id選擇器時,一定要在id名稱前面加上#

4.id的名稱是有一定規範的,只能由字母和下劃線和數字構成,開頭不能有數字

5.id名稱是不能用html標籤的名稱,比如不能用

class(類)選擇器:給標籤設定class屬性,然後在css中,對設定了class屬性的標籤進行修飾

格式:.class值

注意點:

1.每個html標籤都有乙個屬性叫做class,也就是說每個標籤都可以設定類名

2.在同乙個頁面中,class的名稱是可以重複的

3.在編寫class選擇器時一定要在class名稱前面加上

.(點)

4.類名的命名規範跟id名稱的命名規範是一樣的

5.類名就是專門用來給某些特定的標籤設定樣式的

6.在html每個標籤可以同時繫結多個類名,例如:這就給

標籤定義了兩個類名,分別是aa和bb,用空格隔開

錯誤寫法

當實際應用時,適當更改寫**的方式,會增加可用性,例項如下:

當需要給三段文字交叉新增三種不同的屬性

.para1

.para2

.para2

第一段文字

第一段文字

第一段文字

觀察這段**會發現,此**不易維護,當**行數很多的時候,不利於修改,可以將

color:red;,

text-decoration:,

font-size:30px,這三個屬性值分別作為類,然後讓標籤帶兩種類即可,操作如下:

第一段文字

第一段文字

第一段文字

此時,消去了多餘**,更容易通過更改屬性值來更改段落樣式

後代選擇器:後代選擇器很簡單,就是父級在前中間空格後代在後。

格式:父 子

例如:

我是段落

在後代選擇中,class和id也是可以互用的,例如給上面的**新增class和id。

aa1">

bb1">我是段落

css3 選擇器 CSS3選擇器

子級選擇器用於選取帶有特定父元素的元素。書寫語法 element1 element2 注意 如果 element2 元素不是父元素 element1 的直接子元素,則不會被選擇。符號之前書寫父級的選擇器,符號之後寫子級選擇器,必須滿足父子級關係才選中標籤 相鄰兄弟選擇器可以用於選擇緊接在另乙個元素後...

css3 選擇器 CSS3選擇器詳解

css3在css2基礎上,增強或新增了許多特性,彌補了css2的眾多不足之處,使得web開發變得更為高效和便捷。比如說,同樣是乙個頭像,可能在低版本的瀏覽器中,頭像方的 在高版本的瀏覽器中,頭像是圓的。漸進增強和優雅降級之間的不同 面試題目 由於css3普遍存在相容性問題,為了避免因相容性帶來的干擾...

CSS3的選擇器

漸進增強 從小到大 先保證最基本的功能 使用者體驗的提公升 優雅降級 從大到小 先針對版本較高的裝置進行專案構建,保證使用者體驗的完美 犧牲一些效果,保證最基本的功能 選擇器 選擇符 id class 型別 div span.後代選擇器 偽類選擇器 偽元素選擇器.屬性選擇器 e attr 選中e元素...