这样写css符合w3c标准吗

ziluopao 发布于 2015/10/30 11:31
阅读 190
收藏 0

即关于html标签嵌套的问题。感觉网上很多介绍说的很模糊,或者说不严谨!

有一个常识性的东西可能大家都知道,即内联元素不能嵌套块级元素!

但,如一个内联元素转成了块级元素后,此时它能不能嵌套块级元素呢?

如,a 变成了block后,是不是能套div呢,还是说,要把div转成inline才能放入a中呢?

加载中
1
frantic1048
frantic1048

在听到这些”常识“的时候,先确定它们到底是在说 HTML 还是 CSS 还是其它东西你就不会感到模糊了。

HTML 的标签怎么嵌套算是正确是 HTML 规范上的事情,这个你可以参考 HTML Content Models 相关的文档,各种标签被分类为了几种 Content,并说明了 Content 之间的包含关系和一些例外标签的规定。在 HTML 这边是没有块级元素概念的,和前面 HTML 标准当中的嵌套规则不是一回事。


MDN https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories

W3C http://www.w3.org/TR/2011/WD-html5-20110525/content-models.html

而你说的 a 变成 block,是指的 CSS 里面写了 a { display: block;} 这种事情吧,这个和 HTML 就没啥关系了,这样做只是改变了 a 的渲染结果,这个 block 是 CSS 的 display 属性下定义的东西,它描述的是渲染(样式)那边的事情。不同 display 属性的元素怎么嵌套,产生什么结果,这也统统都是 CSS 的事情。

MDN https://developer.mozilla.org/en-US/docs/Web/CSS/display

W3C http://www.w3.org/TR/CSS2/visuren.html#display-prop

---

就拿你给的 a 标签来说:

在 HTML 这边,它可以是 Flow content,Phrasing content,规范上来说它可以包含 div 在里面的。跟 inline 不 inline 没啥关系,放心写。你可以到这里亲自验证 https://validator.w3.org/#validate_by_input+with_options


在 CSS 那边,你看到的结果是它被渲染成 inline,因为 inline 是 display 属性的默认值,而浏览器的默认样式一般不会给 a 标签指定其它的 display 属性。结果就是你不写额外 CSS 的话,结果它渲染出来就是个 inline 的元素了。
0
Canrz
Canrz

直接套。

规矩是死的,人是活的!

返回顶部
顶部