属性值选择符没出现效果

0

TypeScript代码 import {Component} from "angular2/core"; import {bootstrap} from "angular2/platform/browser";

@Component({ selector : "[ez-four=123]", template : "ATTRVAL-SELECTOR" }) class EzFour{}

bootstrap(EzFour);

HTML代码: <!doctype html> <html> <head> <meta charset="utf-8"> <title>ComponentMetadata.selector</title> </head> <body> <P ez-four='123'></P> <script type="text/javascript" src="lib/angular2.beta.stack.min.js"></script> </body> </html>

  • 0
    ciga 86个月前 回答

    根据W3C标准,属性选择符的值应当是标识符或者字符串。按照你的写法:

    [ez-four=123] 

    document.querySelector()会认为123是一个标识符(因为你没加引号),但是根据标准,标识符不可以数字开头(参考:https://www.w3.org/TR/CSS2/syndata.html#value-def-identifier)。所以是错误的。

    解决的方法有两种:

    1. 使用合法的标识符名称

    合法的标识符需要使用字母开头,不能以数字,或者连接符(-)开头。改成a123即可:

    [ez-four=a123]

    2. 使用字符串

    在属性选择符里使用单引号或双引号来标明这个属性值是一个字符串而非标识符。下面的书写方法是正确的:

    [ez-four="123"]

    [ez-four='123']

    关于属性标识符的标准约定,详细可参考:https://www.w3.org/TR/CSS2/selector.html#attribute-selectors