The basic selectors of CSS are used to match elements in HTML documents, including: type selector (matching element name); class selector (matching class name); ID selector (matching ID); descendant selector (matches descendant elements within ancestor elements); child element selector (matches direct child elements); adjacent sibling selector (matches directly adjacent sibling elements); universal sibling selector (matches all sibling elements); attribute selector (matches elements with the specified attribute).
Basic selectors in CSS
Basic selectors in CSS are used to match elements in an HTML document. By using these selectors, you can specify styles for specific elements.
Type selector
#element
: Matches all elements with the specified element name, such as p
means all paragraphs. Class selector
.class-name
: Matches all elements with the specified class name, such as .example
represents all elements with class example
. ID selector
#id-name
: Matches a single element with the specified ID, such as #header
represents an element with the ID header
. Descendant selector
ancestor descendant
: Matches descendant elements located within ancestor elements, such as ul li
represents all li
elements located within the ul
element. Child element selector
: Matches child elements that are direct children of the parent element, For example,
div > p means all
p elements directly located within the
div element.
Adjacent sibling selector
: Match adjacent elements that appear directly after the specified element, For example,
p h2 means all
h2 elements directly following the
p element.
Universal sibling selector
: Matches all sibling elements that appear after the specified element, including Adjacent elements and further elements, for example
h1 ~ p means all
p elements that follow the
h1 element.
Attribute selector
: Match elements with specified attributes, such as
[href ] represents all elements with the
href attribute.
: Matches elements with the specified attribute and with the specified value, for example
[href="example.com"] means all
href Element with attribute value "example.com".
The above is the detailed content of What are the basic selectors of css?. For more information, please follow other related articles on the PHP Chinese website!