CSS之CSS選擇器怎麼使用

css選擇器,在平時的時候用處非常大,今天分享下幾個網址

網址1:https://blog.csdn.net/weixin_43376571/article/details/121868657

說的很明白,超級實用,特別是其中的p[class=”important warning”],完全匹配,解決了我的大問題

1.屬性與屬性值必須完全匹配
  [屬性名] [屬性名="屬性值"]
  p[class="important warning"] {color: red;}

2.根據部分屬性值選擇
  [屬性名~="屬性值"]
  p[class~="important"] {color: red;}
 
3.特定屬性選擇類型
  [屬性名|="屬性值"]
  [lang|="en"] {color: red;}
  上面這個規則會選擇 lang 屬性等於 en 或以 en- 開頭的所有元素。
4. 選擇以什麼開頭的所有元素 
  [屬性名^="屬性值"]
  [abc^="def"]
  選擇 abc 屬性值以 "def" 開頭的所有元素。

5. 選擇以什麼結尾的所有元素 
  [屬性名$="屬性值"]
  [abc$="def"]
  選擇 abc 屬性值以 "def" 結尾的所有元素。

6.選擇包含子串的所有元素
  [屬性名*="屬性值"]
  [abc*="def"]
  選擇 abc 屬性值中包含子串 "def" 的所有元素

剩下的網址:

http://www.makeru.com.cn/news/1080.html

https://www.w3school.com.cn/cssref/css_selectors.asp

到此為止。

發布者:彬彬筆記,轉載請註明出處:https://www.binbinbiji.com/zh-hant/css/2736.html

(0)
彬彬筆記彬彬筆記
上一篇 2022年7月22日
下一篇 2022年7月26日

相關推薦

發表回復

登錄後才能評論
蜀ICP備14017386號-13