你必須知道的CSS選擇器 Must-know CSS selectors
-
Upload
kero-yu -
Category
Technology
-
view
211 -
download
5
description
Transcript of 你必須知道的CSS選擇器 Must-know CSS selectors
![Page 1: 你必須知道的CSS選擇器 Must-know CSS selectors](https://reader034.fdocuments.us/reader034/viewer/2022052201/5599e2e41a28ab1b668b4589/html5/thumbnails/1.jpg)
CSS SELECTORS YOU MUST KNOW除了Class、ID 以外還有什麼?
Presented by KeroYu
![Page 2: 你必須知道的CSS選擇器 Must-know CSS selectors](https://reader034.fdocuments.us/reader034/viewer/2022052201/5599e2e41a28ab1b668b4589/html5/thumbnails/2.jpg)
#container * { margin: 0px;
}
#container 下的所有元素 margin 為 0px
<div id=“container”><p>Hello, I’m Tom.</p><span>She’s Annie.</span>
</div>
![Page 3: 你必須知道的CSS選擇器 Must-know CSS selectors](https://reader034.fdocuments.us/reader034/viewer/2022052201/5599e2e41a28ab1b668b4589/html5/thumbnails/3.jpg)
ul + p { color: #000;
}
ul後的p元素顏色為#000
<ul><li>some item here</li></ul>
<p>這裡的字色會變成#000<p>
![Page 4: 你必須知道的CSS選擇器 Must-know CSS selectors](https://reader034.fdocuments.us/reader034/viewer/2022052201/5599e2e41a28ab1b668b4589/html5/thumbnails/4.jpg)
#container > div { border: 1px solid #ccc;
}
如下例中,只有 .lala 會被套用
<div id=“container”><div class=“lala”>
<div class=“dada”></div></div>
</div>
![Page 5: 你必須知道的CSS選擇器 Must-know CSS selectors](https://reader034.fdocuments.us/reader034/viewer/2022052201/5599e2e41a28ab1b668b4589/html5/thumbnails/5.jpg)
#container ~ span { color: #000;
}
如下例中,.foo 和 .bar 都會被套用
<div id=“container”><span class=“foo”></span><div>
<span class=“bar”></span></div>
</div>
![Page 6: 你必須知道的CSS選擇器 Must-know CSS selectors](https://reader034.fdocuments.us/reader034/viewer/2022052201/5599e2e41a28ab1b668b4589/html5/thumbnails/6.jpg)
a[title] { color: #000;
}
如下例中,只有 Link 1 會被套用
<a title=“something” href=“#”>Link 1</a><br><a href=“#”>Link 2</a>
![Page 7: 你必須知道的CSS選擇器 Must-know CSS selectors](https://reader034.fdocuments.us/reader034/viewer/2022052201/5599e2e41a28ab1b668b4589/html5/thumbnails/7.jpg)
a[href=“//google.com”] { color: #000;
}
如下例中,只有 Link 1 會被套用
<a href=“//google.com”>Link 1</a><br><a href=“//yahoo.com”>Link 2</a>
![Page 8: 你必須知道的CSS選擇器 Must-know CSS selectors](https://reader034.fdocuments.us/reader034/viewer/2022052201/5599e2e41a28ab1b668b4589/html5/thumbnails/8.jpg)
a[href*=“gle”] { color: #000;
}
如下例中,只有 Link 1 會被套用
<a href=“//google.com”>Link 1</a><br><a href=“//gooloo.com”>Link 2</a>
![Page 9: 你必須知道的CSS選擇器 Must-know CSS selectors](https://reader034.fdocuments.us/reader034/viewer/2022052201/5599e2e41a28ab1b668b4589/html5/thumbnails/9.jpg)
a[href^=“//”] { color: #000;
}
如下例中,只有 Link 2 會被套用
<a href=“images/picture.jpg”>Link 1</a><br><a href=“//google.com”>Link 2</a>
![Page 10: 你必須知道的CSS選擇器 Must-know CSS selectors](https://reader034.fdocuments.us/reader034/viewer/2022052201/5599e2e41a28ab1b668b4589/html5/thumbnails/10.jpg)
a[href$=“.jpg”] { color: #000;
}
如下例中,只有 Link 1 會被套用
<a href=“images/picture.jpg”>Link 1</a><br><a href=“//google.com”>Link 2</a>
![Page 11: 你必須知道的CSS選擇器 Must-know CSS selectors](https://reader034.fdocuments.us/reader034/viewer/2022052201/5599e2e41a28ab1b668b4589/html5/thumbnails/11.jpg)
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>
![Page 12: 你必須知道的CSS選擇器 Must-know CSS selectors](https://reader034.fdocuments.us/reader034/viewer/2022052201/5599e2e41a28ab1b668b4589/html5/thumbnails/12.jpg)
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
![Page 13: 你必須知道的CSS選擇器 Must-know CSS selectors](https://reader034.fdocuments.us/reader034/viewer/2022052201/5599e2e41a28ab1b668b4589/html5/thumbnails/13.jpg)
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>
![Page 14: 你必須知道的CSS選擇器 Must-know CSS selectors](https://reader034.fdocuments.us/reader034/viewer/2022052201/5599e2e41a28ab1b668b4589/html5/thumbnails/14.jpg)
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>
![Page 15: 你必須知道的CSS選擇器 Must-know CSS selectors](https://reader034.fdocuments.us/reader034/viewer/2022052201/5599e2e41a28ab1b668b4589/html5/thumbnails/15.jpg)
li:nth-last-child(1) {color: red;
}
如下例中,Third Child 會被套用
<ul><li>First child</li><li>Second child</li><li>Third Child</li>
</ul>
![Page 16: 你必須知道的CSS選擇器 Must-know CSS selectors](https://reader034.fdocuments.us/reader034/viewer/2022052201/5599e2e41a28ab1b668b4589/html5/thumbnails/16.jpg)
span:nth-of-type(2) {color: red;
}
如下例中,Mike 會被套用
<span>Jenny</span><span>Mike</span><span>Jake</span>
![Page 17: 你必須知道的CSS選擇器 Must-know CSS selectors](https://reader034.fdocuments.us/reader034/viewer/2022052201/5599e2e41a28ab1b668b4589/html5/thumbnails/17.jpg)
span:nth-last-of-type(3) {color: red;
}
如下例中,Jenny 會被套用
<span>Jenny</span><span>Mike</span><span>Jake</span>
![Page 18: 你必須知道的CSS選擇器 Must-know CSS selectors](https://reader034.fdocuments.us/reader034/viewer/2022052201/5599e2e41a28ab1b668b4589/html5/thumbnails/18.jpg)
div p:only-child {color: red;
}
如下例中,Apple 會被套用
<div><p>Apple</p></div><div>
<p>Banana</p><p>Orange</p>
</div>
![Page 19: 你必須知道的CSS選擇器 Must-know CSS selectors](https://reader034.fdocuments.us/reader034/viewer/2022052201/5599e2e41a28ab1b668b4589/html5/thumbnails/19.jpg)
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>
![Page 20: 你必須知道的CSS選擇器 Must-know CSS selectors](https://reader034.fdocuments.us/reader034/viewer/2022052201/5599e2e41a28ab1b668b4589/html5/thumbnails/20.jpg)
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>
![Page 21: 你必須知道的CSS選擇器 Must-know CSS selectors](https://reader034.fdocuments.us/reader034/viewer/2022052201/5599e2e41a28ab1b668b4589/html5/thumbnails/21.jpg)
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;
}
![Page 22: 你必須知道的CSS選擇器 Must-know CSS selectors](https://reader034.fdocuments.us/reader034/viewer/2022052201/5599e2e41a28ab1b668b4589/html5/thumbnails/22.jpg)
• 避免使用 inline styles
• 避免使用 ID
• 避免使用過多層級的選擇器
• 避免無意義命名,使用語義命名
• 避免使用 !important
• 命名規則保持一致
• 避免由上而下(top-down)寫法,而應遵循 BEM (Block、Element、Modifier)來寫