Learn CSS Mastery 2
阿新 • • 發佈：2020-08-09
選擇器分類
1.元素選擇器、標籤選擇器
p { color: red;}
h1 { color: blue;}
2.ID選擇器
<p id=”box”>測試</p>
<style>
#box {
border: 1px solid red;
}
</style>
3.類選擇器
<p class=“box active”>測試</p>
<style>
.active {
font-size: 20px;
}
</style>
4.通用選擇器
* { box-sizing: border-box; } .box * { font-size: 24px; }
5.屬性選擇器
- [attr] 選擇包含 attr 屬性的所有元素，不論 attr 的值什麼。
- [attr=val] 僅選擇 attr 屬性被賦值為 val 的所有元素
<style> acronym[title] { /* color:blue; */ border-bottom: 1px dotted #999; } acronym[title]:hover { color:red; } acronym[title]:focus { cursor: help; } </style> <body> <p>The term <acronym title="self-contained underwater breathing apparatus">SCUBA</acronym> is an acronym rather than an abbreviation as it is pronounced as a word.</p> </body>
6.不常用
1.[attr~=val] 僅選擇 attr 屬性的值（以空格間隔出多個值）中有包含 val 值的所有元素，比如位於被空格分隔的多個
類（class）中的一個類
2.[attr*=val] 選擇 attr 屬性的值中包含字串 val 的元素
3.[attr^=val] 選擇 attr 屬性的值以 val 開頭（包括val）的元素
4.[attr$=val] 選擇 attr 屬性的值以 val 結尾（包括val）的元素
5.[attr|=val] 選擇 attr 屬性的值是val或以 val-開頭的元素（-用來處理語言編碼）。
組合選擇器
A，B
A, B 同時選中A 和 B
<p class=“author”>測試</p> <p class=“detail”>你好啊，你好啊</p> <style> .author, .detail { color: red; } </style>
A B
選中A的後代B元素，注意A和B之間有個空格
<style>
.detail li {
border: 1px solid red;
/* color: red; */
padding: 20px;
}
</style>
<body>
<ul class="detail">
<li>
<ul>
<li>aaa</li>
</ul>
</li>
<li>bbb</li>
</ul>
</body>
AB
選中既是A又是B的元素，注意A和B之間沒有空格
<ul>
<li class=”item”>111</li>
<li class=”item active”>被選中✅ </li>
</ul>
<style>
.item.active {
color: red;
}
</style>
A > B
選中A的直接子元素B
<style>
.detail>li {
border: 1px solid red;
/* color: red; */
padding: 20px;
}
</style>
<body>
<ul class="detail">
<li>
<ul>
<li>aaa</li>
</ul>
</li>
<li>bbb</li>
</ul>
</body>
A+B
選中A 的下一個相鄰元素B
<style>
.lbj+li {
border: 1px solid red;
}
</style>
<ul class="cavs">
<li class="lbj">勒布朗詹姆斯</li>
<li>歐文</li><!-- 選中 -->
<li>安東尼</li>
</ul>
</body>
A~B
選中A的後面全部相鄰元素B
<style>
.lbj~li {
border: 1px solid red;
}
</style>
<ul class="cavs">
<li class="lbj">勒布朗詹姆斯</li>
<li>歐文</li><!-- 選中 -->
<li>安東尼</li><!-- 選中 -->
</ul>
</body>