Home > Web Front-end > HTML Tutorial > Differences between CSS attribute selectors_html/css_WEB-ITnose

Differences between CSS attribute selectors_html/css_WEB-ITnose

WBOY
Release: 2016-06-24 11:47:43
Original
1186 people have browsed it

ele[attribute] matches ele elements with attribute attribute.

ele[attribute = value] matches elements with attribute attribute and value value.

ele[attribute ~= value] matches elements with attribute attribute and one of its values ​​being value. (Multiple values ​​are separated by spaces)

ele[attribute |= value] matches elements with attribute attribute and one of the values ​​​​is value or ele elements starting with value followed by a "-" hyphen.

ele[attribute ^= val] matches elements with attribute attribute and value starting with val.

ele[attribute $= val] matches elements with attribute attribute and value ending in val.

ele[attribute *= val] matches elements with attribute attribute and value containing val.

See code:

<!DOCTYPE html><html><head><style>[lang~=china]{background:yellow;}[lang|=english]{background:red;}[lang^=au]{background:green;}[lang$=en]{background:gray;}[lang*=lo]{background:blue;}</style></head><body><p lang="china">Hello!</p><p lang="english-1">Hi!</p><p lang="aus">Ello!</p><p lang="us-en">Hi!</p><p lang="color">nihao!</p><p><b>注释:</b>对于 IE8 及更早版本的浏览器中的 [attribute|=value],必须声明 <!DOCTYPE>。</p></body></html>
Copy after login
Rendering:



Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template