AMP HTML支持什么CSS规则？

Question

我已经阅读了https://github.com/ampproject/amphtml/blob/master/docs/create_page.md关于CSS的用法,但我不确定格式允许的CSS选择器.选择器/属性是否有任何限制？

样式声明可以放在任何地方<html>或仅放在<head>？

是否可以包含任何外部样式表？

Answer 1

您可以在DOM中包含1个 <style>标记<head>.您必须像这样附加amp-custom到<style>标记:<style amp-custom>your style rules here</style>
您不能更改元素的margin属性body.
您可能无法加载外部样式表或导入一个 @import
您可能无法向元素添加样式属性.
您不能使用!important限定符.
您可能永远不会使用以下任何属性:
- behavior:
- overflow: scroll
- overflow: auto
- transition:
- filter
- animation
- -moz-binding
您可以使用以下选择器:
- .class 例如 .row
- #id 例如 #sidebar
- tag-name 例如 section
- 选择器,选择器,例如.row, .clearfix或#sidebar, #main-body, article
- 媒体查询,例如 @media (max-width:48em){}
您可以使用以下伪选择器:
- :hover
- :active
- :visited
input除了button(因为它们用于与AMP Web Components交互)之外,您不能使用任何元素.
您有义务避免使用带有前缀的类名-amp或-amp-避免与AMP组件冲突.如果您愿意,可以覆盖这些组件的样式.
您的样式规则不得超过50KB.
您可以通过白名单字体供应商(... Google字体)获取字体资产,也可以通过HTTP/HTTPS通过@ font-face获取字体 - 即不通过data:或插入JavaScript(因为JS被禁止).

这是轶事,因为AMP验证器是一块垃圾,但在花了一些时间取消一些无效的选择器后,我可以确认`:first-child`,`:last-child`,`:before`,` :after`伪元素和直接后代(`>`)选择器都通过验证. (2认同)