Question

在css中我想选择具有属性wd的元素，并且我想从属性wd的值设置width的值。

DTD:
<!ELEMENT square EMPTY>
<!ATTLIST square wd CDATA "0">

Valid XML:
<square wd="100" />

我想要一些像

这样的东西

square[wd="IntegerValue"]{
  width=IntegerValue
  }

Answer 1

试试这个：

var wd = document.querySelectorAll('[wd]')


for(var i = 0; i < wd.length; i++){
      wd[i].style.width = wd[i].attributes.wd.value +'px'
}

square{
  display:block;
  height:50px;
  background:red;
  margin-bottom:10px
}

 <square wd="100"></square>
 <square wd="200"></square>
 <square wd="300"></square>

如果您具有特定范围的可能width，则可以使用square[wd='100']{width:100px}直接定位（CSS解决方案）

square{
  display:block;
  height:50px;
  background:red;
  margin-bottom:10px
}
square[wd='100']{width:100px}
square[wd='200']{width:200px}
square[wd='300']{width:300px}

 <square wd="100"></square>
 <square wd="200"></square>
 <square wd="300"></square>

Answer 2

这可以通过以下方式实现：

 /* All spans with a "lang" attribute are bold */
 span[lang] {font-weight:bold;}

/* All spans in Portuguese are green */
span[lang="pt"] {color:green;}

/* All spans in US English are blue  */
span[lang~="en-us"] {color: blue;}

/* Any span in Chinese is red, matches simplified (zh-CN) or traditional (zh-TW) */
span[lang|="zh"] {color: red;}

/* All internal links have a gold background */
a[href^="#"] {background-color:gold}

/* All links to urls ending in ".cn" are red */
a[href$=".cn"] {color: red;}

/* All links to with "example" in the url have a grey background */
 a[href*="example"] {background-color: #CCCCCC;}

取自https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

所以在你的例子中它将是

square[wd="100"] {
    width: 100px;
}

CSS3：CSS中的整数属性选择器

2 个答案: