Manwal ng Sanggunian ng Selector ng CSS

CSS Selectors

CSS selectors are used for "finding" (or selecting) the HTML elements you want to style.

Use our CSS selector tester to demonstrate different selectors.

CSS Simple Selector

Simple selectors select elements based on element name, id, and class. In addition, there are universal selectors (*)

Selector Example Description of example
element p Select all <p> elements.
#id #firstname Select the element with id="firstname".
* * Select all elements.
.class .intro Select all elements with class="intro".

CSS Attribute Selector

Attribute selectors select HTML elements that have a given set of attributes.

Selector Example Description of example
[attribute] [target] Select all elements with the attribute target.
[attribute=value] [target=_blank] Select all elements with the attribute target="_blank".
[attribute~=value] [title~=flower] Select all elements whose title attribute contains the word "flower".
[attribute|=value] [lang|=en] Select all elements whose lang attribute value starts with "en".
[attribute^=value] a[href^="https"] Select each <a> element whose src attribute value starts with "https".
[attribute$=value] a[href$=".pdf"] Select all <a> elements whose src attribute ends with ".pdf".
[attribute*=value] a[href*="codew3c"] Select each <a> element whose href attribute value contains the substring "abc".

CSS 嵌套选择器

Selector Example Description of example
& & Apply style to an element in the context of another element