3.2 KiB
| title | localeTitle |
|---|---|
| CSS Selectors Cheat Sheet | CSS选择器备忘单 |
CSS选择器
在CSS中，选择器是用于选择DOM元素的模式。
以下是使用选择器的示例。在以下代码中， a和h1是选择器：
a {
color: black;
}
h1 {
font-size 24px;
}
选择器的作弊清单
|选择器|选择|
| --- | --- | | head |选择带有head标签的元素
| .red |选择所有带有'red'类的元素
| #nav |使用'nav'Id |选择元素
| div.row |选择具有div标签和'row'类的所有元素 | [aria-hidden="true"] |选择具有值为“true”|的aria-hidden属性的所有元素 | * |通配符选择器。选择所有DOM元素。请参阅下面与其他选择器一起使用|
我们可以以有趣的方式组合选择器。一些例子：
|选择器|选择|
| --- | --- | | li a | DOM后代组合子。所有的a标记，是一个孩子li标签|
| div.row * |选择具有div标签和'row'class |的元素的后代（或子元素）的所有元素
| li > a |差异组合子。选择直接后代，而不是所有后代，如后代选择器|
| li + a |相邻的组合子。它选择紧跟前一个元素的元素。在这种情况下，每个li只有第一个a 。 |
| li, a |选择所有a元素和所有的li元素。 |
| li ~ a |兄弟姐妹的组合子。选择a承接元件li元件。 |
伪选择器或伪结构类对于从DOM中选择结构元素也是有用的。这里是其中的一些：
|选择器|选择| | --- | --- |
| :first-child |在另一个元素的内部（或子元素）内立即定位第一个元素
| :last-child |在另一个元素的内部（或子元素）内立即定位最后一个元素
| :nth-child() |直接在另一个元素的内部（或子元素）中定位第n个元素。承认整数， even ， odd或公式|
| a:not(.name) |选择所有不属于.name类a元素
| ::after |允许从CSS而不是HTML将内容插入页面。虽然最终结果实际上不在DOM中，但它在页面上显示为好像是。此内容在HTML元素之后加载。 |
| ::before |允许从CSS而不是HTML将内容插入页面。虽然最终结果实际上不在DOM中，但它在页面上显示为好像是。此内容在HTML元素之前加载。 |
我们可以使用伪类来定义DOM元素的特殊状态，但不要单独指向元素。一些例子：
|伪类|选择| | --- | --- | | :hover |选择一个被鼠标指针悬停的元素
| :focus |选择一个从键盘接收焦点的元素或以编程方式| | :active |选择被鼠标指针点击的元素
| :link |选择尚未点击的所有链接|
| :visited |选择已被点击的链接
游戏
CSS Diner是一款网络游戏，教授几乎所有关于组合选择器的知识。
补充参考
还有更多的CSS选择器！在CodeTuts ， CSS-tricks.com ， w3schools.com或Mozilla Developer Network上了解它们。