全面的CSS选择器备忘单

在线提供各种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/