2011-03-13 76 views
99

是否可以使用内联样式具有伪类?具有内联样式的CSS伪类


例子:

<a href="http://www.google.com" style="hover:text-decoration:none;">Google</a> 

我知道上面的HTML将无法正常工作,但有没有类似的东西,将?

P.S.我知道我应该使用一个外部样式表,而且我会。我只是好奇,如果这可以使用内联样式完成。

+1

问得好。这是不可能的,但这不是我以前想过的限制。 – mwcz 2011-03-13 23:47:01

+4

[Is可以创建内联伪类型?](http:// stackoverflow。com/questions/986618/is-is-possible-to-create-inline-pseudo-styles) – Synetech 2012-11-20 02:21:05

回答

94

不,这是不可能的。在使用CSS的文档中,内联style属性只能包含属性声明;样式表中每个规则集中出现的同一组语句。从Style Attributes spec

样式属性的值必须的CSS declaration block(不包括定界大括号),其正式的语法在CSS core grammar的条款和约定如下内容的语法匹配:

declaration-list 
    : S* declaration? [ ';' S* declaration? ]* 
    ; 

无论选择器(包括伪元素),也不在规则,也没有任何其它CSS构建体是允许的。

将内联样式视为应用于某个匿名超特定ID选择器的样式:这些样式仅适用于具有style属性的那个非常元素。 (如果该元素具有该ID,则它们优先于样式表中的ID选择器。)从技术上讲,它不起作用;这只是为了帮助您理解为什么该属性不支持伪类或伪元素样式(它与伪类和伪元素如何提供无法在文档树中抽象表示的更多关系文档语言)。

请注意,内联样式与规则集中的选择器参与相同的级联,并且在级联中占据最高优先级(尽管存在!important)。所以它们甚至优先于伪类国家。允许内联样式中的伪类或任何其他选择器可能会引入新的级联级别,并带来一系列新的复杂性。

还要注意风格属性spec did originally propose allowing this的很旧的版本,但它被废弃了,大概是出于上述原因,或者因为实现它不是一个可行的选择。

34

不是CSS,但在线:

<a href="#" 
    onmouseover = "this.style.textDecoration = 'none'" 
    onmouseout = "this.style.textDecoration = 'underline'">Hello</a> 

See example →

+2

只适用于':hover'伪类当然:) – BoltClock 2011-03-14 00:18:05

+2

是的,我想这是另一种选择。它不是CSS,但它适用于:使用鼠标悬停和鼠标悬停,:使用onfocus和onblur进行焦点,以及:使用onclick进行活动。 – 2011-03-14 01:03:49

+1

这算作javascript吗?我有一个项目,需要内联CSS和没有Javascript。 – 2013-03-19 14:04:17

16

,而不需要在线,你可以使用内部CSS

<a href="http://www.google.com" style="hover:text-decoration:none;">Google</a> 

你可以有:

<a href="http://www.google.com" id="gLink">Google</a> 
<style> 
    #gLink:hover { 
    text-decoration: none; 
    } 
</style> 
+0

使用内部css外头元素可以接受吗? – Thaina 2016-11-18 07:56:18

+2

@Thaina现在,在HTML5中:http://html5doctor.com/the-scoped-attribute/ – LGSon 2016-12-17 07:34:51

+1

@Thaina滑稽,遇到了另一个问题,我决定做这样的事情,发现'scoped'属性有已从规格中删除.... https://developer.mozilla.org/en/docs/Web/HTML/Element/style – LGSon 2016-12-17 09:09:38