CSS 選擇器以及優先順序
阿新 • • 發佈：2022-05-30
1. id選擇器
<style>
#container {
width: 100px;
}
</style>
<body>
<div id="container"></div>
</body>
2. class選擇器 | 類選擇器
<style> .container { width: 100px; } </style> <body> <div class="container"></div> </body>
3. 元素選擇器
<style>
div {
width: 100px;
}
</style>
<body>
<div></div>
</body>
4. 通用選擇器
<style> *{ margin: 0; padding: 0; box-sizing: border-box; } </style> <body> <div></div> </body>
5. 屬性選擇器
<style> /* 存在title屬性的<a> 元素 */ a[title] { color: purple; } /* 存在href屬性並且屬性值匹配"https://example.org"的<a> 元素 */ a[href="https://example.com"] { color: green; } /* 存在href屬性並且屬性值包含"example"的<a> 元素 */ a[href*='link'] { font-size: 2em; } /* 存在href屬性並且屬性值結尾是".org"的<a> 元素 */ a[href$='.org'] { font-style: italic; } /* 存在class屬性並且屬性值包含以空格分隔的"logo"的<a>元素 */ a[class~='logo'] { padding: 2px; } /* 表示帶有以 class 命名的屬性，且屬性值是以 link6 開頭的元素。 */ a[class$='link7'] { color: red; } </style> <body> <a href="#" title="連結">link1</a> <a href="https://example.com">link2</a> <a href="https://link.com">link3</a> <a href="https://link2.org">link4</a> <a class="link logo">link5</a> <a class="link621312">link6</a> <a class="asdblink7">link7</a> </body>
6. 選擇器列表
<style>
a,
p {
color: red;
}
</style>
<body>
<a href="#">1</a>
<p></p>
</body>
7. 後代選擇器
<style>
ul.container li {
color: red;
}
</style>
<body>
<ul class="container">
<li>idx</li>
<li>idx</li>
<li>idx</li>
</ul>
</body>
8. 一般兄弟選擇器
<style>
p ~ span {
color: red;
}
</style>
<body>
<span>This is not red.</span>
<p>Here is a paragraph.</p>
<code>Here is some code.</code>
<span>And here is a span.</span>
</body>
8. 相鄰兄弟選擇器
<style>
li:first-of-type + li {
color: red;
}
</style>
<body>
<ul>
<li>One</li>
<li>Two!</li>
<li>Three</li>
</ul>
</body>
9. 偽類
<style>
p:hover {
color: red;
}
</style>
<body>
<p>hover</p>
</body>
css 優先順序
行內 > id > class > 屬性 > 標籤|偽元素