?純CSS無法根據(jù)文本內(nèi)容選擇元素，因?yàn)镃SS標(biāo)準(zhǔn)不支持基於文本內(nèi)容的選器如:contains()；?應(yīng)使用類或?qū)傩詠砭珳?zhǔn)定位元素，這是語義化且高效的做法；?若必須按文本選擇，可藉助JavaScript或jQuery實(shí)現(xiàn)；??儘管現(xiàn)代瀏覽器支持:has()偽類，但它不能直接匹配純文本內(nèi)容，僅能通過子元素或?qū)傩蚤g接匹配，因此合理使用HTML結(jié)構(gòu)與樣式分離原則才是最佳實(shí)踐。

You can't directly select an element by its text content using pure CSS .

CSS is designed to style elements based on attributes like tag names, classes, IDs, states (like :hover ), and structural relationships — but it does not have a selector that matches elements based on their inner text (like "find me the <p></p> that contains 'Hello World'").

Why CSS Can't Do This

CSS lacks a selector such as :contains("text") in standard specifications. While jQuery has a :contains() selector, it's not part of standard CSS and won't work in regular stylesheets.

Example (this won't work in CSS):

 /* ? Invalid in standard CSS */
p:contains("Submit") {
  background: yellow;
}

Workarounds and Alternatives

1. Use Classes or Attributes Instead

The best practice is to add a class, data attribute, or ID to the element you want to target.

 <button class="btn-submit">Submit</button>

 .btn-submit {
  background: blue;
  color: white;
}

This is clean, efficient, and maintainable.

2. Use :has() with Text (Limited Support)

In some modern browsers (like Chrome 105 ), you can use the * ` :has()` selector with certain conditions. However, you still can't match exact text content* , but you can* check for elements that contain specific child elements or attributes.

But if the text is inside a child (eg, via ::before with content ), you can sometimes work around it:

 /* Example: Match a label that contains a span with text */
label:has(span[aria-label="required"]) {
  font-weight: bold;
}

Still, this doesn't help for direct text content matching.

3. Use JavaScript When Necessary

If you absolutely need to select an element by its text, use JavaScript:

 // Find a button with the text "Submit"
const submitButton = [...document.querySelectorAll('button')]
  .find(btn => btn.textContent.trim() === 'Submit');

if (submitButton) {
  submitButton.style.backgroundColor = 'yellow';
}

Or with :contains in jQuery (if you're using it):

 $('p:contains("Hello")').css('color', 'red');

Summary

• ? No native CSS selector can select elements by text content.
• ? Use classes or attributes — it's the proper semantic way.
• ? Use JavaScript or jQuery for dynamic text-based selection.
• ?? :has() is powerful but doesn't solve text-content matching directly.

So while the answer might feel limiting, relying on proper HTML structure with meaningful classes is usually cleaner and more performant anyway.

以上是如何通過CSS中的文本內(nèi)容選擇一個(gè)元素？的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！