我有一个名为的自定义HTML5标签<scroll-content>。实际上,此标记是由框架在HTML文件内部的某些位置为我创建和插入的。现在,我想修改此标记的CSS,以便在我的CSS文件中:
<scroll-content>
scroll-content{ overflow: hidden; }
它确实完成了预期的工作,但这是自定义标签样式的正确方法吗?
我不能向它们添加类,因为我没有创建标签,框架却没有,因此我无法在代码中访问它们,并且我想避免使用Javascript查找这些标签并以这种方式添加类。
我想知道修改自定义标签的标准/最安全的方法。
您可以将CSS应用于自定义元素,就像将其应用于标准HTML元素一样。
scroll-content { ... }正如您的代码所写,没什么问题。
scroll-content { ... }
一点背景
在基本级别上,浏览器不知道存在哪些元素。它无法识别任何内容, 直到将其暴露给默认样式表(sample) 为止 。
默认样式表将浏览器引入HTML元素。
因此,可以将自定义元素定义为默认样式表中未包含的元素。(存在但浏览器不支持的元素可以共享此定义。)
但是,可以以作者样式将自定义元素引入浏览器。
这里有一些重要的考虑因素:
如果浏览器无法识别元素(即,它不在默认样式表中),它将应用CSS 初始值 。
6.1.1指定值 用户代理必须首先根据以下机制(优先顺序)为每个属性分配一个指定的值: 如果级联产生一个值,请使用它。 否则,如果该属性被继承并且该元素不是文档树的根,请使用父元素的计算值。 否则,请使用属性的初始值。每个属性的初始值在属性的定义中指示。
6.1.1指定值
用户代理必须首先根据以下机制(优先顺序)为每个属性分配一个指定的值:
如果级联产生一个值,请使用它。
否则,如果该属性被继承并且该元素不是文档树的根,请使用父元素的计算值。
否则,请使用属性的初始值。每个属性的初始值在属性的定义中指示。
如上所述,如果无法识别元素(#1和#2不适用),请使用属性定义中的初始值(#3适用)。
因此,在您的情况下:
您的自定义元素是: <scroll-content>
您的CSS是: scroll-content { overflow: hidden; }
scroll-content { overflow: hidden; }
您在问题中说这段代码可以实现预期的功能。但是,除非您提到的框架为自定义元素提供其他样式,否则它将无法工作(demo)。
原因如下:
由于<scroll-element>不在默认样式表中,因此它将使用CSS初始值。
<scroll-element>
好,该display属性的初始值为inline。
display
inline
但是该overflow属性仅适用于块元素
overflow
因此,有没有办法这个HTML / CSS组合可以工作- overflow属性将被忽略,因为会height,width并且不适用任何其他属性内联元素。
height
width
需要自定义元素才能display:block申请overflow工作(demo)。
display:block
类似地,唯一的原因body,div,h1,p,ul的形式存在的块元素是因为它们被以这种方式定义的默认的样式表(样品)。
body
div
h1
p
ul
因此,撇开支持和反对自定义元素的参数,这是底线:
添加display: block到您的自定义元素,您就可以做到。
display: block