CSS-3.選擇器的使用

阿新 • • 發佈：2019-01-12

標籤選擇器：直接選擇某一種標籤，然後全部進行修改樣式。格式： p{ 屬性名稱：屬性值； } id選擇器：給標籤設定id屬性，然後在css中，對定義了相同id屬性的標籤進行修飾格式； #id值{ 屬性名稱：屬性值； } 注意點： 1.每個HTML標籤都有一個屬性叫做id屬性，每個標籤都可以設定id屬性 2.在同一個介面中，id屬性的值是不能重複的 3.在編寫id選擇器時，一定要在id名稱前面加上# 4.id的名稱是有一定規範的，只能由字母和下劃線和數字構成，開頭不能有數字 5.id名稱是不能用html標籤的名稱，比如不能用<img><p><hr>.... class（類）選擇器：

給標籤設定class屬性，然後在css中，對設定了class屬性的標籤進行修飾格式： .class值{ 屬性名稱：屬性值； } 注意點： 1.每個HTML標籤都有一個屬性叫做class，也就是說每個標籤都可以設定類名 2.在同一個頁面中，class的名稱是可以重複的 3.在編寫class選擇器時一定要在class名稱前面加上.(點) 4.類名的命名規範跟id名稱的命名規範是一樣的 5.類名就是專門用來給某些特定的標籤設定樣式的 6.在HTML每個標籤可以同時繫結多個類名，例如：<p class="aa bb">這就給 <p>標籤定義了兩個類名，分別是aa和bb，用空格隔開錯誤寫法 <p class="aa" class="bb">

當實際應用時，適當更改寫程式碼的方式，會增加可用性，例項如下：當需要給三段文字交叉新增三種不同的屬性 <sytle> .para1{ color:red; font-size:30px; } .para2{ text-decoration:underline; font-size:30px; } .para2{ text-decoration:underline; color:red; } </style> <body> <p class="para1">第一段文字</p> <p class="para2">第一段文字</p> <p class="para3">第一段文字</p> </body> 觀察這段程式碼會發現，此程式碼不易維護，當代碼行數很多的時候，不利於修改，可以將color:red;

, text-decoration:,font-size:30px，這三個屬性值分別作為類，然後讓<p>標籤帶兩種類即可，操作如下： <style> .colorR{ color:red; } .line{ text-decoration:underline; } .size30{ font-size:30px; } </style> <body> <p class=".coloR size30">第一段文字</p> <p class="line size30">第一段文字</p> <p class="line coloR">第一段文字</p> </body> 此時，消去了多餘程式碼，更容易通過更改屬性值來更改段落樣式 後代選擇器：後代選擇器很簡單，就是父級在前中間空格後代在後。格式：父子{ 屬性名稱：屬性值； } 例如： <style> divp{ color:red; } </style> <body> <div> <p>我是段落</p> </div> </body> 在後代選擇中，class和id也是可以互用的，例如給上面的程式碼新增class和id。 <style> .aaq#bb2{ color:red; } </style> <body> <div class="aa1"> <p id="bb1">我是段落</p> </div> </body>

CSS-3.選擇器的使用

CSS-3.選擇器的使用

3. CSS 派生選擇器

3.24 學前端 CSS之選擇器

CSS 7.3 選擇器-屬性選擇器

CSS關聯選擇器的大致類型總結

CSS-聯合選擇器

CSS同時選擇器

5 css類選擇器的使用

css的選擇器的優先級

CSS常用選擇器記錄-:nth-of-type(n)

HTML學習筆記 CSS學習選擇器第五節（原創）

HTML學習筆記 CSS學習選擇器案例第五節（原創）參考使用表

Css 後代選擇器與子代選擇器的區別

【css】選擇器

CSS屬性選擇器

CSS 屬性選擇器

CSS中選擇器權重計算的例題

css基礎選擇器

CSS偽選擇器hover

css 貓頭鷹選擇器

CSS-3.選擇器的使用

相關推薦