CSS “inner-html” technique? [duplicate]

问题

This question already has answers here:

How to CSS: select element based on inner HTML [duplicate] (7 answers)

Closed 4 years ago.

I was wondering if there was a way to query elements according to the word it contains. So, if I have:

<div id="globalPageHeader">
    <h1>Home</h1>
</div>

I want any #globalPageHeader h1 that has the word Home in it, to have a display property of none.

Obviously this example wouldn't work, but I was wondering if there's something like it:

#globalPageHeader h1(innerHTML == "Home") {
     display: none;
}

I don't want to use JavaScript's innerHTML because I have no access to the javascript parts of the admin.

Any help is much appreciated!

回答1:

With pure CSS, that’s impossible.

回答2:

This is not possible using CSS. You can, however, do it using jQuery. Why not just add a class to the desired h1 tags?

回答3:

I had a similar problem. What you can do is to add an attribute to the <h1> element. For example title :

<div id="globalPageHeader">
    <h1 title='Home'>Home</h1>
</div>

And then in the CSS:

#globalPageHeader h1[title = 'Home'] {
     display: none;
}

It worked for me.

来源：https://stackoverflow.com/questions/15628083/css-inner-html-technique