在线提供各种CSS备忘单和快速参考指南。 但是,其中大多数是针对网页设计师的,只有极少数是针对开发人员的。 尤其是对于后端开发人员,他们突然发现自己使用CSS选择器编写前端自动化。
当然,您可以继续并通过在线迷你游戏学习CSS的乐趣。 如果您如此愿意并且有空闲时间致力于技能扩展的游戏化,那就去吧 。 但是,如果您正在寻找针对开发人员的集中且简短的CSS选择器备忘单,那么我们已经为您创建了一份 。
什么是CSS选择器(以及为什么需要它们)?
一般来说, CSS(层叠样式表)很棒。 CSS就像网站的库一样,在过去20年中,它们一直是Web外观和工作方式发生的最好的事情之一。
CSS选择器是CSS规则库中的组件,并且是高级CSS的核心。 通过让您轻松地根据其属性来操纵多个元素,它们实质上为您节省了大量的手动编码。
CSS的最新版本CSS 3.0添加了用于样式自动化的选择器选项 。 添加选择器选项后,您可以编写代码来选择网站或webapp前端中的几乎所有元素。
开发人员CSS选择器备忘单
选择器名称 | 句法 | 描述 | 例 |
通用选择器 | * | 选择所有元素 | * {color: pink;font-size: 20px;} |
类型选择器 | element{properties} | 根据元素类型选择元素 | p {color: pink;font-size: 20px;} |
编号选择器 | #id{properties} | 选择具有指定ID的元素 | #adbox {width: 80px;margin: 5px;} |
类选择器 | .class{properties} | 选择指定CSS类的元素 | .dark {color: black;} |
属性选择器 | |||
element[attribute]{properties} | 选择具有指定属性的元素 | input[disabled] {background-color: #fff;} | |
element[attribute="value"] | 选择具有指定属性等于值的元素 | input[type=”text”] {color: black;} | |
element[attribute~="value"] | 选择具有指定属性的元素,该元素的值包含一个特定单词。 | h1[title~="Codota"] {color: pink;font-size: 20px;} | |
element[attribute|="value"] | 选择具有指定属性的元素,并选择具有以指定值(或指定值立即后跟“-”)开头的属性的属性值 | a[hreflang|="en"] { color: blue;} | |
element[attribute^="value"] | 选择具有指定属性的元素,其属性值以指定值开头 | h2[title^="Codota"] {color: black;font-size: 20px;} | |
element[attribute$="value"] | 选择具有指定属性且属性值以指定值结尾的元素 | h3[title$="Right Now!"] {color: red;font-size: 30px;} | |
element[attribute*="value"] | 选择具有指定属性的元素,其中属性值包含指定值 | h4[title*="new"] {color: red;font-size: 20px;} | |
后代组合器 | element1 element2{properties} | 选择父元素(element1)下的所有指定子后代元素(element2)。 | div p{color:pink;} |
儿童组合器 | element1 > element2{properties} | 选择父元素(element1)下的所有指定的直接子元素(element2)。 | div > p{color:pink;} |
伪类 | |||
element: link{ properties } | 选择未访问的链接元素 | a:link{color:blue;} | |
element: visited{ properties } | 选择访问的链接元素 | a:visited{color:red;} | |
element: active{ properties } | 选择活动的链接元素 | a:active{color:green;} | |
element: hover{ properties } | 选择鼠标悬停元素 | a:hover{color:purple;} | |
element: focus{ properties } | 选择焦点对准的元素 | a:focus{color:pink;} |
全面的CSS备忘单
如本文开头所述,Internet上有很多CSS备忘单,其中有些甚至对开发人员有用。 如果我们简短而简短的CSS选择器备忘单不能满足您的CSS备忘作弊需求,则可能有以下几种:
- W3.org CSS选择器综合指南3级
- CSS手册:面向开发人员的CSS便捷指南
- Techaltum的CSS3选择器列表
- Nana Jeon撰写的CSS选择器备忘单 [PDF]
知道更好的CSS选择器备忘单吗? 还是更好-创建了完美的CSS选择器备忘单? 让我们在评论中知道!
From: https://blog.codota.com/css-selectors-cheat-sheet-for-developers/