zl程序教程

您现在的位置是:首页 >  前端

当前栏目

What does a CSS selector in square brackets select in HTML?

HTMLCSS in SELECT does What Selector Square
2023-09-11 14:14:18 时间

What does a CSS selector in square brackets select in HTML?

So I have seen this CSS rule-set in a library:

[text-uppercase] {
   text-transform: uppercase;
}

and I am not sure on how to use it in a div

<div class="text-uppercase | [text-uppercase]"></div>

I have tried both, but neither are working. I am seeing this in ionic2.

 

回答1

For the selector to work:
<div text-uppercase></div>

[text-uppercase] selector matches an attribute on a tag.

 

回答2

It's not a class, you encountered a so called attribute selector. It matches every html element that has got that attribute set, whatever the value. I.e. <section text-uppercase="true">, <div text-uppercase="something">, <nav text-uppercase>

Look at the reference provided on the link above for more advanced usage scenarios.

 

[text-uppercase] {
  text-transform: uppercase;
}
<span text-uppercase>hello</span>