很多朋友对于CSS/CSS3语法快速查询和不太懂，今天就由小编来为大家分享，希望可以帮助到大家，下面一起来看看吧！

子选择器ulli {}

后代选择器p a {}

类选择器.class {}

ID 选择器#id {}

相邻兄弟选择器h1 + p {}

通用兄弟选择器h1 ~ p {}

属性选择器[attribute=’SomeValue’] {}

Pseudo 选择器 元素

鼠标悬停选择器a:hover {}

活动链接选择器a:active {}

焦点选择器input:focus {}

已访问链接选择器a:visited {}

链接选择器.class:link {}

第一行选择器p:first-line {}

首字母选择器p:first-letter {}

第一个子选择器p:first-child {}

最后一个子选择器p:last-child {}

独生子选择器p:only-child {}

:nth-child 选择器p:nth-child() {}

其父选择器的第一个元素p:first-of-type {}

选中的元素选择器input:checked {}

禁用元素选择器input:disabled {}

启用的元素选择器input:enabled {}

没有子选择器的元素（包括文本节点） p:empty {}

不是指定的元素选择器：not(p) {}

在元素.class:before {} 之前

在元素.class:before {} 之后

Text 样式

字体样式font-style: 正常|

Position

斜体|斜

字体变体font-variant: 正常|小盘股

字体粗细font-weight: 正常|大胆|更大胆|打火机| 100 – 900

垂直对齐vertical-align:基线| 10 像素|子|超级|顶部|文本顶部|中|底部|文本底部|最初的

字体大小font-size: 12px | 0.8em | 80%

文本转换text-transform: 大写|小写|大写

字符间距letter-spacing: 正常| 4像素

行高line-height: 正常| 3em | 34%

水平对齐方式text-align: left |对|中心|证明合法

文本对齐最后一个text-align-last: auto |左|对|中心|证明|开始|结束|初始|继承

文本装饰text-decoration: 无|下划线|上划线|直通

缩进第一行text-indent: 25px

字体系列font-family: ‘Open Sans’，无衬线字体

文本对齐text-justify: auto |词间|人物间|无|初始|继承

文本溢出text-overflow: 剪辑| 文本溢出省略号|字符串|初始|继承

文本阴影text-shadow: h-shadow v-shadow 模糊半径颜色|无|初始|继承

Background

位置position:静态|相对|绝对|固定|黏

位置属性顶部|对|底部|左边

浮动元素float: left |对|没有任何

清除浮动元素clear: 无|左|对|两个都

Z 索引z-index: 3 |汽车|继承

Box 属性

背景图片background-image: url()

背景重复background-repeat: 重复-x | 背景重复重复-y |重复|空间|圆形|不重复

背景颜色background-color: #2AA9E0

背景位置background-position: 顶部| 背景位置background-position:对|底部|左|中心

背景附件background-attachment: 滚动|固定|本地|初始|继承

List 样式

框尺寸框-sizing: 边框框|

Flex box

内容框

边距margin: 2px 4px 6px 8px | 0 自动

内边距padding: 2px 4px 6px 8px

边框颜色border-color: #2AA9E0

边框样式border-style: 无|隐藏|点|虚线|固体|双|凹槽|山脊|插图|一开始

边框宽度border-width: 10px

CSS Grid

列表类型list-style-type: 光盘|

动态内容

圆|方形|没有任何

列表位置list-style-position: 内|外部

列表图像list-style-image: url()

速查表

弯曲方向flex-direction: 行| 010-1010 弯曲方向行反转|专栏|列反转

Flex Wrap flex-wrap: nowrap | Flex Wrap Flex-wrap: nowrap | Flex Wrap包裹|反向换行

调整内容justify-content: flex-start | 调整内容justify-content:弯曲端|中心|之间的空格|周围空间|空间均匀

对齐项目align-items: flex-start |弯曲端|中心|基线|拉紧

对齐内容align-content: flex-start | 对齐内容弯曲端|中心|之间的空格|周围空间|拉紧

订单order: 0

弹性增长flex-grow: 0

柔性收缩flex-shrink: 1

Flex 基础flex-basis: 3px |汽车

自动对齐自对齐-self: 自动| 对齐弹性启动|弯曲端|中心|基线|拉紧

010-1010 网格模板列grid-template-columns: 40px 50px auto 50px 40px

网格模板行grid-template-rows: 25% 100px auto

网格模板区域grid-template-areas: ‘a b c’ |没有任何

网格模板grid-template: ‘a a a’ 20% ‘b b b’ auto | 100 像素1fr/50 像素1fr

网格列间隙grid-column-gap: 10px

网格行间隙grid-row-gap: 10px

对齐项目justify-items: 开始|结束|中心|拉紧

对齐项目align-items:开始|结束|中心|拉紧

调整内容justify-content: flex-start |弯曲端|中心|之间的空格|周围空间|空间均匀

对齐内容align-content: flex-start | 对齐内容弯曲端|中心|之间的空格|周围空间|拉紧

网格自动列grid-auto-columns: 100px |最大内容|最小内容

网格自动行grid-auto-rows: 100px |最大内容|最小内容

网格自动流grid-auto-flow: 行|专栏|排密|柱密集

网格列开始grid-column-start: 2 |地区名称|跨度2 |跨区域名称|汽车

网格行开始grid-row-start: 2 |地区名称|跨度2 |跨区域名称|汽车

网格列grid-column: 3/跨度2

网格行grid-row: 3/跨度2

自我调整justify-self: 开始|结束|中心|拉紧

对齐自对齐-self: 开始|结束|中心|拉紧

010-1010 CSS 变量–variable-name: 值

变量用法var(–变量名)

计数器重置counter-reset: 计数器名称

计数器增量counter-increment: 计数器名称

计数器动态值内容：计数器（计数器名称）

属性动态值content: attr(属性名称)

010-1010

用户评论

掉眼泪

之前总是忘这忘那 CSS 语法，现在有了这个工具简直太棒了！一目了然，查找到需要的代码示例超级方便。

    有17位网友表示赞同！

苏莫晨

终于找到一个靠谱的 CSS 查询网站！页面简洁易懂，还能根据不同浏览器版本查询兼容性，真是良心做啊！以前找语法信息经常翻来覆去整个网页…

    有12位网友表示赞同！

关于道别

这个工具真不错，用来复习 CSS 语法简直太适合了！而且它包含了 CSS3 的语法，现在学习新技术也方便多了.

    有10位网友表示赞同！

青瓷清茶倾城歌

虽然功能强大，但我觉得网站布局有点乱。按主题分类固然重要，可以考虑加入关键词搜索快速定位的功能

    有9位网友表示赞同！

话扎心

用这个查询工具查过几次，感觉代码示例不太全面，有些比较常用但复杂的属性没有详细解释。

    有17位网友表示赞同！

北朽暖栀

学习网页开发的同学必备！有了它就不怕遇到 CSS 语法困扰了。网站页面简洁易懂，非常实用.

    有13位网友表示赞同！

残花为谁悲丶

网站设计挺好，信息也比较清晰。不过可以考虑加入一些案例讲解，这样更容易理解CSS语法。

    有19位网友表示赞同！

淡抹丶悲伤

这个工具挺好的，可以快速的查到需要的 CSS 语法代码。不过我建议添加更多浏览器兼容性信息，比如某些特性在不同浏览器中的应用情况

    有11位网友表示赞同！

信仰

网站更新速度较快，经常会添加新的 CSS3 教程和案例，学习起来很方便。好评啊！

    有10位网友表示赞同！

若他只爱我。

这个工具真的太帮用了！之前为了寻找特定 CSS 语法浪费了我无数时间。现在有了它，查询速度更快，更精准…

    有18位网友表示赞同！

空谷幽兰

我觉得网站有点过于追求简洁了，信息量可能要多一些，毕竟 CSS 比较常见的问题还是需要详细解释的。

    有7位网友表示赞同！

此刻不是了i

这个工具帮助我解决了无数 CSS 语法难题！学习网页开发变得轻松了许多。强烈推荐给所有想深入学习前端设计的同学！

    有15位网友表示赞同！

疯人疯语疯人愿

感觉这个网站有些偏理论，缺乏实际案例应用指导。如果可以添加一些实际项目代码片段，那会更有用吧。

    有5位网友表示赞同！

ー半忧伤

页面太凌乱了！希望开发者能改进网站界面，更容易浏览和查找信息

    有9位网友表示赞同！

花海

真是个好工具，终于可以不用再费尽心思去网上搜索各种 CSS 语法解释了。这个网站简洁明了，非常人性化…

    有12位网友表示赞同！