Introduction to css selectors

Tag selector

For example:

`p`、`a`、`h[1,6]`、`span`、`div`、、、

Class selector(class)

class selector is defined with ".".

For example:

.id1{样式属性：值;}

Try not to use underscores in naming, as this may cause compatibility issues. Underscores are generally used in JS, and do not use pure numbers or Chinese names.

For example:

<div class="class1"></div>

Note:

The class selector also includes the multi-class name selector

<div class="class1 class2.."></div>

(Video tutorial recommendation: css video tutorial)

ID selector

id selector is defined with "#". For example: #id1{Style attribute: value;} naming method such as class selector

For example:

<div id="id1"></div>

Wildcard selector

*{样式属性：值;}

Pseudo-class selector

Link pseudo-class selector (mainly for a tag that can be absent but the order cannot be reversed)

:link  /*未访问的链接*/:visited  /*已访问的链接*/:hover  /*鼠标移动到链接上*/     
最常用的链接伪类选择器:active  /*选定的链接 别松开的状态*/

Structure (position) pseudo Class selector CSS3

:first-child Selects the specified selector that belongs to the first child element of its parent element

:last-child Selects the last child element that belongs to its parent element The specified selector

:nth-child(N) matches every element that is the Nth child element of its parent element, regardless of the element's type, counting from the last child element. N can be a number, keyword or formula

Keyword: odd is an odd number even is an even number

Expression: 2n even number 2n 1 odd number n is a multiple

:nth- last-child() is the number starting from the last child element. The default is the first element

target pseudo-class selector

:target target pseudo-class selector The selector can be used to select the currently active target element

Child element selector

The child element selector can only select elements that are child elements of an element.

Writing:

The parent comes first, the subset comes after, and the middle is connected with >

Note:> There must be a space on both sides, excluding grandchildren. Descendants set, only the son set does not use >, you can select all descendants

Attribute selector

The selector with certain special attributes can select the tag Use attribute selector

Writing: a[title] {} The attribute selector is represented by square brackets div[class^=font] { } div[class$=font] { } starting with font The ending div[class*=tao] { } means that tao can be in any position.

Pseudo-element selector (CSS3)

.dome Class selector: first-child Pseudo-class selector::first-letter Pseudo-element selector

E::first-letter The first word or character of the text

E::first-line The first line of the text

E::selection Can change the selected text Style (mouse)

E::before{ content: "Text" } Inside the box in front (add font)

E::after{ content: "Text" } Inside the box behind ( Add font)

Recommended tutorial: css quick start

The above is the detailed content of Introduction to css selectors. For more information, please follow other related articles on the PHP Chinese website!