是否有可能使用内联样式的伪类?
例:
<a href="http://www.google.com" style="hover:text-decoration:none;">Google</a>
我知道上述HTML不能正常运行,但是有类似的东西吗?
附言:我知道我应该使用外部样式表,并且可以。我只是好奇是否可以使用内联样式来完成。
不,这是不可能的。在使用CSS的文档中,内联style
属性只能包含属性声明。样式表中每个规则集中出现的同一组语句。根据样式属性规范:
style属性的值必须匹配CSS 声明块(不包括定括号)的内容的语法,其声明的正式语法在以下CSS核心语法的术语和约定中给出:
declaration-list
: S* declaration? [ ';' S* declaration? ]*
;
选择器(包括伪元素),规则,任何其他CSS构造都不允许。
可以将内联样式视为应用于某些匿名超特定ID选择器的样式:这些样式仅应用于具有该style
属性的那个元素。(如果该元素具有该ID,则它们也优先于样式表中的ID选择器。)从技术上讲,它不会那样工作;这只是为了帮助您了解为什么该属性不支持伪类或伪元素样式(它更多地与伪类和伪元素如何提供文档树的抽象表示有关)文档语言)。
请注意,内联样式与规则集中的选择器参与同一级联,并且在级联中具有最高优先级(!important
尽管有)。因此,它们甚至优先于伪类状态。以内联样式允许伪类或任何其他选择器可能会引入新的级联级别,从而带来新的复杂性。
还要注意,样式属性规范的非常旧的版本最初确实建议允许这样做,但是由于上面给出的原因或者由于实施它不是可行的选择而被废弃了。
问题内容: 是否可以创建内联伪样式? 例如,我可以做以下事情吗? 这背后的原因是我正在开发一个创建UI元素的.NET库。我想生成无需设置外部样式表即可设置其悬停状态的HTML元素。 问题答案: 不幸的是,不能,您不能使用内联CSS来实现悬停效果。 此问题的(较差)解决方法是让控件在呈现时呈现样式块。例如,您的控件可以呈现为: 如果您可以强迫用户在页面顶部放置“样式控件”,则可以在其中渲染所有自定义
问题内容: 是否有CSS选择器通过其内联样式属性值选择此元素? 就像是 问题答案: 内联属性与任何其他HTML属性没有什么不同,并且可以与子字符串属性选择器匹配: 正是由于这个原因,它 非常脆弱 。由于属性选择器不支持正则表达式,因此只能执行与属性值 完全 匹配的子字符串。例如,如果属性值中的某处有空格,如下所示: 在您更改选择器以适应空间之前,它不会匹配。然后,它将停止匹配 不 包含空格的值,除
问题内容: 我知道将CSS样式直接嵌入到它们会影响的HTML标记中会破坏CSS的许多目的,但有时对于调试目的很有用,例如: 嵌入规则的语法是什么: 放入A标签的样式属性中?显然不是这个… …因为这将一直适用,而不是仅在悬停期间适用。 问题答案: 恐怕无法完成,伪类选择器无法内联设置,您必须在页面或样式表上进行设置。 我应该提到,从 技术上讲, 您 应该 能够按照CSS规范进行操作,但是大多数浏览器
问题内容: 我的一个朋友说,使用开头部分代替压缩的css文件可以提高性能。真的吗? 问题答案: 与使用CSS文件的性能提升(通过其他因素)相比,您的朋友提到的性能提升可能微不足道。 浏览器使用style属性,仅绘制该特定元素的规则,在这种情况下为元素。这样可以减少CSS引擎查找哪些元素与CSS选择器匹配的查找时间(例如或)。 但是,将样式置于元素级别将意味着您无法单独缓存CSS样式规则。通常,将样
问题内容: 我非常喜欢React中的内联CSS模式,并决定使用它。 但是,您不能使用和类似的选择器。那么,在使用内联CSS样式时实现悬停时高亮显示的最佳方法是什么? 该有一个状态,并将其作为道具的链接。但是,(我的方式来实现它)包裹的,以便它可以设置并给它。不过,这会使事情有些复杂(例如,包裹在行为上与有所不同)。 有没有更简单的方法? 问题答案: 我处于同样的情况。确实像在组件中保留样式的模式,