Kidney Fun version CSS tutorial Chapter1 Selector

Chapter 1 Selector selector

Version	Update	Note
1.0	2016-5-28	Added for the first time. You are welcome to indicate errors in the comments, revise them as soon as they are verified, and indicate contributors.

Legend: CSS3 properties that are not universally supported in the browser-supported properties CSS3 inPrevious versions of CSS3

1. Element Selector

1.1 *

Wildcard character, representing all elements

1.2 element

2. Class and ID

2.1 . ClassName

2.2 #id

Specifies a unique element in a single document.

The ID can be used for anchor connection. For example:

<a href = "#hi" >click me</a>

<div id = "HI" ></div>

Clicking on the click Me, the page jumps to the anchor location, and the URL of the document is added #hi

File:///C:/Users/kidney/Desktop/demo.html#hi

At this point the div becomes the target element and can be selected by the Div: Target pseudo class.

3. Relationship Selector

3.1 E F

Select all f in the descendants of E

3.2 e>f

Select all f in the direct descendant of E

3.3 e~f

Select all f in the E-sibling element

3.4 e+f

Select the sibling element F immediately following E

4. Attribute Selector

4.1 selector[attrname], Selector[attrname = "value"]

This is the basic format. Attrname can be a custom property.

4.2 ~=

Select the element in the property value that contains the specified value, and value points to a complete word. ~= means "contains".

4.3 *=

Select the element in the property value that contains the string that specifies value.

<div name = "ABC Def" >

Div[*= "a"]//valid

div[*= "EF"]//valid

4.4 ^=

Select an element whose property value starts with a string that specifies value. ^= said "to ... Beginning ".

Note: Only for the first property value. For example:

<div name = "ABC def" ></div>

Div[name ^= "AB"]//Effective

Div[name ^= "de"]//invalid

Same below

4.5 $=

Select the element with the property value to end the string with the specified value. $= said "to ... End ".

4.6 |=

Select the element whose property value begins with the specified value and the-delimited string.

<div name= "Ab-c de-f" >

Div[name |= "AB"]//Effective

Div[name |= "a"]//invalid

Div[name |= "de"]//invalid

5. Pseudo-Class Selector

5.1 Sub-element sequence

E:first-child  E:last-child  e:nth-child (n)  e:nth-last-child (n) E:only-child

E:first-of-type  E:last-of-type  e:nth-of-type (n)  e:nth-last-of-type (n) E:only-of-type

N in Nth-child (n) can be positive integers, keyword even (even) and odd (odd), and n-expressions such as 2n, 2n+1, 3n-2, and so on. N is 1, 2, 3 ... Increment, if the calculated value is less than or equal to 0, it is automatically ignored. Nth-last-child (n) is just a sequence of indistinguishable from a child element.

Here the so-called child elements, simply require that E must have a parent element, and from the usage point of view they are more like the picker of the sibling element. -child is parsed as follows: first find the nth element in the sibling element, and then see if the element matches E. Matches, the selection succeeds, and the mismatch is discarded. -type parses the exact opposite, first finding all elements that match E in the sibling element, and then selecting Nth in it.

: The parsing rule for Only-child is that if E is the only child element of the parent element, the match succeeds;: Only-of-type The parsing rule is that E is the only child element of the class (element type) that is the parent element, then the match succeeds.

<div>

<p></p>

<span></span>

</div>

P:only-child//invalid

P:only-of-type//Effective

5.2 No Element

　　: empty selects null elements that have no descendants (including text nodes, &nbsp; placeholders, and spaces).

<p>

</p>

P:empty//invalid, cross-line indicates a space, space also belongs to text node

5.3 Hyperlinks Love hate four Gentlemen

　　: Link  : Visited  : Hover : Active

Represents the status of the before, accessed, MouseOver, and clicked of a element. Must be set in this order to extract the first letter, which can be précis-writers as love&hate.

: Hover is widely used on hover events of any element.

5.4 Form Status

　　: Focus indicates that the text box gets the input cursor event.

　　: Checked represents the selected event for radio buttons and check boxes.

　　: Enabled forms elements that represent the available states.

　　:d isabled represents a FORM element that disables state.

5.5 Exclusions

　　E:not (S) indicates that the elements remaining after the element matched by the S selector are excluded from the E element set.

6. Pseudo-Object selector (also called pseudo-element)

6.1 e::before e::after

Double colons are used in CSS3 to differentiate from pseudo-classes, but they are also supported with a single colon.

Before and after are used to generate new content before and after the content of E.

Their usage has long been beyond the mere addition of textual content, which can be used to generate almost any new HTML structure.

6.2 e::first-letter e::first-line

They apply only to block-level elements.

First-letter is often used to set the drop-down effect of text in traditional print media.

6.3 e::selection

Used to set the style when the text is selected.

6.4 e::input-placeholder E::p laceholder

The style used to set the placeholder text in the form. You need to add a browser prefix.

Only Firefox with placeholder, other browsers are used Input-placeholder

7. Selector hierarchy

The CCS full name is a cascading style sheet whose "cascade" is represented by the priority of the selector, with a high priority of overriding the priority level. The priority level is based on the "certainty, specificity" (specification), which follows the following three programs:

I. ORIGIN of the statement

User's important Statement > Developer's Statement > user's normal declaration > browser Default statement

Second, in the developer's statement by the cumulative weight value to determine the priority

Type (high to low)	Weight	Description
Important statement	Infinitely large	!important
Inline declaration	1000	Style
ID Selector	100	#id
class, attribute selection, and pseudo-classes	10
Elements and pseudo-objects	1
Wildcard characters	0
Inherited	No	0 is still small.

Third, if the cumulative weight value, the priority is determined in order

1. Internal style sheet (styles in <style> tags) > external style sheet

2. In the same style sheet: Back style > Previous style

Kidney Fun version CSS tutorial Chapter1 Selector