Question

一位同事和我进行了一些辩论。我们假设我们有一个带有属性type="a"的有序列表：

<ol type="a">
    <li>First</li>
    <li>Second</li>
    <li>Third</li>
</ol>

属性的存在将列表的样式从数字编号列表更改为按字母顺序编号的列表。我的同事想知道这是否构成CSS。

我认为它显然没有，因为type="a"是标签的属性，而CSS是样式表语言。

但是，我的同事辩称，只要添加或更改属性会改变元素的外观，就应该将其构成为添加或更改CSS。

他们还认为

中的width和height属性

<img src="..." width="100" height="100">

也应该构成CSS。

他们通过解释每个元素，网络浏览器都有它自己的样式表来扩展他们的论证。

ol {
    display: block;
    list-style-type: decimal;
    margin-top: 1em;
    margin-bottom: 1em;
    margin-left: 0;
    margin-right: 0;
    padding-left: 40px;
}

添加type="a"有效地将ol { list-style-type: lower-alpha; }添加到网络浏览器的样式表中。因此，由于添加属性会改变Web浏览器的CSS，因此该属性也应该构成CSS。

然而，这个论点对我来说仍然没有意义，但我无法想出任何解释为什么这是错误的方法。

所以我的问题是：谁是正确的？ CSS和属性是完全不同的概念吗？或者我的同事是正确的，因为type="a"等属性应该构成CSS（以及为什么）？

Answer 1

渲染和修改存在的唯一真实内容是DOM，它不是HTML或CSS。它是HTML，CSS，JavaScript和浏览器提供的默认值的计算表示。

设置属性时，会修改DOM以修改其样式表示。 WebKit让人们很容易看到并理解这一点。

使用属性时 - 这是在WebKit中完成的：

void HTMLOListElement::collectStyleForPresentationAttribute(const QualifiedName& name, const AtomicString& value, MutableStyleProperties& style)
{
    if (name == typeAttr) {
        if (value == "a")
            addPropertyToPresentationAttributeStyle(style, CSSPropertyListStyleType, CSSValueLowerAlpha);
        else if (value == "A")
            addPropertyToPresentationAttributeStyle(style, CSSPropertyListStyleType, CSSValueUpperAlpha);
        else if (value == "i")
            addPropertyToPresentationAttributeStyle(style, CSSPropertyListStyleType, CSSValueLowerRoman);
        else if (value == "I")
            addPropertyToPresentationAttributeStyle(style, CSSPropertyListStyleType, CSSValueUpperRoman);
        else if (value == "1")
            addPropertyToPresentationAttributeStyle(style, CSSPropertyListStyleType, CSSValueDecimal);
    } else
        HTMLElement::collectStyleForPresentationAttribute(name, value, style);
}

来源：https://github.com/WebKit/webkit/blob/d055853e59dd6cc4cfd835b143e79258bb13c552/Source/WebCore/html/HTMLOListElement.cpp

标签的属性是否与CSS相关？

1 个答案: