CSS是前端開發中不可或缺的一部分,除了常用的CSS屬性外,還有一些特殊符號需要我們掌握。下面就讓我們來看一下這些特殊符號吧!
1. ~ 表示選擇一個元素前面緊跟著另一個元素的元素。例如:
#box ~ p { font-size: 14px; }
可以選擇#box元素后面所有的
標簽。
2. ^= 表示選擇屬性以指定值開頭的元素。例如:
img[src^="https"] { border: 2px solid #ccc; }
可以選擇所有src屬性以https開頭的img元素。
3. $= 表示選擇屬性以指定值結尾的元素。例如:
a[href$=".pdf"] { color: blue; }
可以選擇所有href屬性以.pdf結尾的a元素。
4. *= 表示選擇屬性包含指定值的元素。例如:
input[type*="password"] { background-color: #eee; }
可以選擇所有type屬性包含password的input元素。
5. | 表示選擇帶有指定屬性值的元素,該屬性可以是單值或由空格分隔的多個值中的一個。例如:
a[lang|="en"] { color: red; }
可以選擇所有lang屬性值以en開頭的a元素,如lang="en"或lang="en-US"。
以上就是CSS中常用的特殊符號,它們的靈活運用可以讓我們更方便地編寫CSS代碼。希望對大家有所幫助!
上一篇css 右邊框高度設計
下一篇vue無限數組嵌套