中興AX5400Pro+上手體驗：再升級 雙2.5G網口+USB 3.0這次全都有
2021年11月的時候，中興先后發布了兩款路由器產品，中興AX5400和中興AX5400 Pro，從產品命名上就不難看出這是隸屬于同一系列的，但在外觀設計上這兩款產品可以說是完全沒一點關系
屬性選擇器對帶有指定屬性的 HTML 元素設置樣式。可以為擁有指定屬性的 HTML 元素設置樣式，而不僅限于 class 和 id 屬性。
CSS屬性選擇器提供了一種簡單而強大的方法，可以根據特定屬性或屬性值的存在將樣式應用于HTML元素。
可以通過將屬性（可選地帶有值）放在一對方括號中來創建屬性選擇器。也可以在其前面放置一個[元素類型選擇器。
這是屬性選擇器的最簡單形式，如果給定的屬性存在，則將樣式規則應用于元素。例如，可以title使用以下樣式規則來樣式化所有具有屬性的元素：
示例
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>CSS 屬性選擇器示例</title> <style> [title] { color: blue; }</style> </head> <body style="background-color: aqua;"> <h1 title="heading">屬性選擇器</ h1> <p title="paragraph">此段落的顏色將為藍色。</ p> </body></html>
[title]上例中的選擇器匹配具有title屬性的所有元素。
還可以通過將屬性選擇器放置在元素類型選擇器之后，將選擇范圍限制為特定的HTML元素。
示例
<style> abbr[title] { color: red;}</style>
選擇器abbr[title]僅匹配具有title屬性的元素，因此它匹配縮寫，但不匹配具有屬性的錨元素title。
可以使用=運算符使屬性選擇器匹配屬性值與給定值完全相等的任何元素：
示例
<style> input[type="text"] { border:1px solid red; } input[type="submit"] { border:1px solid green; }</style>
解析：
上例中的選擇器匹配[ input 具有type屬性值等于的所有元素submit。
可以使用~=運算符來使屬性選擇器與屬性值是由空格分隔的值（例如class="alert warning"）的列表的任何元素匹配，其中一個值等于指定的值：
示例
<style> [class~="warning"] { color: #fff; background: red; }</style>
該選擇器將任何具有class屬性的HTML元素匹配，該屬性包含以空格分隔的值，其中一個為warning。例如，它具有類值的元素相匹配warning，alert warning等等。
可以使用|=運算符使屬性選擇器與屬性具有以指定的值開頭的連字符分隔的值列表的任何元素匹配：
示例
<style> p[lang|=en] { color: #fff; background: blue; }</style>
解析：
上例中的選擇器匹配具有lang屬性的所有元素，該屬性包含以開頭的值en，無論該值后面是否帶有連字符和更多字符。換句話說，它的元素相匹配lang具有價值屬性en，en-US，en-GB等,而不能為US-en，GB-en。
可以使用^=運算符使屬性選擇器與屬性值以指定值開頭的任何元素匹配。它不必是一個完整的詞。
示例
<style> a[href^="http://"] { background:url(img/border.png) 100% 50% no-repeat; padding-right: 15px; }</style>
上例中的選擇器將定位所有外部鏈接并添加一個小圖標，指示它們將在新的選項卡或窗口中打開。
可以使用*=運算符使屬性選擇器匹配其屬性值包含指定值的所有元素。
示例
<style> [class*="warning"] { color: #fff; background: red; }</style>注:
上例中的此選擇器將所有HTML元素與classvalue包含的屬性進行匹配warning。
例如，它的元素相匹配具有類值warning，alert warning，alert-warning或alert_warning等。
屬性選擇器對于不帶class或的樣式樣式特別有用id：
示例
input[type="text"], input[type="password"] { width: 150px; display: block; margin-bottom: 10px; background: yellow;}input[type="submit"] { padding: 2px 10px; border: 1px solid #804040; background: #ff8040;}
本文基于CSS基礎，講解了CSS 屬性選擇器，了解屬性選擇器的含義，對一些常見的屬性通過案例進行詳細的講解。最后通過一個小項目，樣式化表單，進一步的加深理解。
歡迎大家積極嘗試，有時候看到別人實現起來很簡單，但是到自己動手實現的時候，總會有各種各樣的問題，切勿眼高手低，勤動手，才可以理解的更加深刻。
代碼很簡單，希望對你學習有幫助。
本文鏈接：http://www.tebozhan.com/showinfo-26-137-0.html一篇文章帶你了解 CSS 屬性選擇器
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
上一篇： 19個 JavaScript 單行代碼技巧，讓你看起來像個專業人士
下一篇： 使用LLM插件從命令行訪問Llama 2
Copyright ? 2016-2023 天津谷騏科技有限公司 版權所有 sitemap.xml
違法及侵權請聯系：2376512515@qq.com 津ICP備18001702號
津公網安備 12010102000574號