Get the App
SLTechnology News&Howtos  ›  Development  › 

What are the basics of Css3 selector

Shulou Source: shulou.com Published: 2022-06-01 06:55:30 10月03日 Update

This article mainly introduces the relevant knowledge of "what are the basics of Css3 selector". The editor shows you the operation process through an actual case. The method of operation is simple and fast, and it is practical. I hope this article "what are the basics of Css3 selector" can help you solve the problem.

Div > p selects all child elements whose parent element is div.

Div + p selects all child elements immediately after div.

[target] Select the element a [target] {...} with the target attribute

[target=_blank] Select all child elements whose target is _ blank.

[title~=flower] Select the element whose title attribute contains the word flower.

[lang | = en] Select all elements whose lang attribute begins with en.

[p:first-letter] Select all initials at the beginning of the p element.

[p:first-line] Select the first line of each p element.

[p:first-child] Select each of the first child elements that belong to its parent element

An element is the first p that must be declared compared to all p elements under a parent element.

[p:before] insert the content p:before {content: "Line:";}:: css3: css2 before each p element.

[p:after] insert content after each p element.

[p:lang (it)] Select each with the value of the lang attribute starting with "it"

element.

[p~ul] Select the front

Each element of the element.

A [src ^ = "https"] Select all an attributes where src begins with the ^ representation that begins with https.

A [src$= ".pdf"] Select all the attributes in a, src, that ends with a $ending with pdf.

A [src*= "abc"] Select all elements in a where the attribute src contains abc.

The first p element p under div p:first-of-type div may not be the first.

The last p element under div p:last-of-type div.

Only one p element in div p:only-of-type div can contain other elements.

There is only one p element in div p:only-child div that cannot contain other elements. Ie is not supported.

The second p element under div p:nth-child (2) div.

The penultimate p elements Odd and even under div p:nth-last-child (2) div are keyword usage formulas (an + b) that can be used to match child elements where the subscript is odd or even. Description: indicates the length of the period, n is the counter (starting at 0) and b is the offset value.

Under div p:nth-of-type (2) div, the second p 2 can be used with odd and even numbers or formulas.

Div p:nth-last-of-type (2) div is the penultimate p.

The last p under div p:last-child div is equivalent to div p:nth-last-child (1).

P:empty selects each that does not have child elements

Elements (including text nodes).

# news:target Select the currently active # news element.

Input:enabled input:disabled input:checked (only Opera supports: checked selector.

Input [type= "text"]: enabled sets the background color for all enabled input elements of type= "text".

This is the end of the introduction to "what are the basics of Css3 selectors". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

Tags: Elements selections attributes knowledge beginnings basics basics content only formulas writing industry support different practical subscript number even key keyword Apple Docker Huawei Linux macOS MariaDB Microsoft MySQL NVidia OPPO Reno Shulou Technology Docker Microsoft Shulou Tech Info Redmi