你必須知道的css選擇器 must-know css selectors
DESCRIPTION
CSS SELECTORS YOU MUST KNOW 除了 Class、ID 以外還有什麼？TRANSCRIPT
CSS SELECTORS YOU MUST KNOW除了Class、ID 以外還有什麼？
Presented by KeroYu
#container * { margin: 0px;
}
#container 下的所有元素 margin 為 0px
<div id=“container”><p>Hello, I’m Tom.</p><span>She’s Annie.</span>
</div>
ul + p { color: #000;
}
ul後的p元素顏色為#000
<ul><li>some item here</li></ul>
<p>這裡的字色會變成#000<p>
#container > div { border: 1px solid #ccc;
}
如下例中，只有 .lala 會被套用
<div id=“container”><div class=“lala”>
<div class=“dada”></div></div>
</div>
#container ~ span { color: #000;
}
如下例中，.foo 和 .bar 都會被套用
<div id=“container”><span class=“foo”></span><div>
<span class=“bar”></span></div>
</div>
a[title] { color: #000;
}
如下例中，只有 Link 1 會被套用
<a title=“something” href=“#”>Link 1</a><br><a href=“#”>Link 2</a>
a[href=“//google.com”] { color: #000;
}
如下例中，只有 Link 1 會被套用
<a href=“//google.com”>Link 1</a><br><a href=“//yahoo.com”>Link 2</a>
a[href*=“gle”] { color: #000;
}
如下例中，只有 Link 1 會被套用
<a href=“//google.com”>Link 1</a><br><a href=“//gooloo.com”>Link 2</a>
a[href^=“//”] { color: #000;
}
如下例中，只有 Link 2 會被套用
<a href=“images/picture.jpg”>Link 1</a><br><a href=“//google.com”>Link 2</a>
a[href$=“.jpg”] { color: #000;
}
如下例中，只有 Link 1 會被套用
<a href=“images/picture.jpg”>Link 1</a><br><a href=“//google.com”>Link 2</a>
a[data-info~=“external”] { color: #000;
}a[data-info~=“image”] {
border: 1px solid #ccc;}
如下例中，Link 1、2、3 都會被套用
<a href=“#” data-info=“external image”>Link 1</a><a href=“#” data-info=“external”>Link 2</a><a href=“#” data-info=“image”>Link 3</a>
Input[type=radio]:checked { border: 1px solid #000;
}
如下例中，Male 前的 input 會被套用
<input type=“radio” name=“gender” value=“M” checked>Male<input type=“radio name=“gender” value=“F”>Female
div:not(.foo){ color: blue;
}
如下例中，.bar 會被套用
<div class=“foo”>We are black fonts.</div><div class=“bar”>No we are not.</div><div class=“foo”>We are black fonts.</div>
li:nth-child(3) {color: red;
}
如下例中，Third Child 會被套用
第一/最後一個可以直接使用 first-child/last-child
<ul><li>First child</li><li>Second child</li><li>Third Child</li>
</ul>
li:nth-last-child(1) {color: red;
}
如下例中，Third Child 會被套用
<ul><li>First child</li><li>Second child</li><li>Third Child</li>
</ul>
span:nth-of-type(2) {color: red;
}
如下例中，Mike 會被套用
<span>Jenny</span><span>Mike</span><span>Jake</span>
span:nth-last-of-type(3) {color: red;
}
如下例中，Jenny 會被套用
<span>Jenny</span><span>Mike</span><span>Jake</span>
div p:only-child {color: red;
}
如下例中，Apple 會被套用
<div><p>Apple</p></div><div>
<p>Banana</p><p>Orange</p>
</div>
div span:only-child {color: red;
}
如下例中，John 會被套用
<div><p>Who are you?</p><span>John</span>
</div><div><p>Some texts go here.</p>
<span>Mike.</span><span>Anna.</span></div>
div ul:first-of-type{color: red;
}
如下例中，.foo 會被套用
<div><p>Paragraph here.</p><ul class=“foo”>
<li>Item 1.</li><li>Item 2.</li></ul><ul class=“bar”>
<li>Item 3.</li><ul></div>
ul:first-of-type > li:nth-child(2) {font-weight: bold;
}
p + ul li:last-child {font-weight: bold;
}
ul:first-of type li:nth-last-child(1) {font-weight: bold;
}
• 避免使用 inline styles
• 避免使用 ID
• 避免使用過多層級的選擇器
• 避免無意義命名，使用語義命名
• 避免使用 !important
• 命名規則保持一致
• 避免由上而下(top-down)寫法，而應遵循 BEM (Block、Element、Modifier)來寫