你必須知道的CSS選擇器 Must-know CSS selectors

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)來寫