CSS selector and css3 Selector

CSS selector and css3 Selector

Original address:

Http://www.w3.org/TR/css3-selectors/

Test demo URL:

Http://www.w3.org/Style/CSS/Test/CSS3/Selectors/current/reports/implementreportTEMPLATE.html

 

 

Abstract

Selector is a matching mode in the tree structure, similar to the technology for reading nodes in XML documents. After Selector's processing of HTML and XML is optimized, It is designed as the key code for efficiency.

CSS is a language for rendering HTML and XML.

 

6 Simple selector6.1 Type selector6.1.1 Type selectors and namespaces

Type selector allows you to select namespace components: pre-defined naming prefixes, pre-defined element names separated by vertical bars.

A naming element may be left empty (the front side of the naming element has no prefix), indicating that this Selector only represents the element without namespace.

Ns | Eelement in the namespace of E ns

* | E Eelement, any namespace, including no namespace

| E does not have an Eelement of namespace

E. If no default namespace exists, it is the same as * | E, otherwise it is the same as ns | E

 

6.2 Universal selector6.3 Attribute selectors

[Attr] indicates that an element includes this attribute, regardless of its value.

H1 [title] h1 tag with title attribute

[Attr = val] the attr value of an element's attribute val

Span [class = "example"]. span whose class attribute is example

[Attr ~ = Val] indicates a value separated by a blank character.

A [rel ~ = "Copyright"] {...}, matching the element of rel = "copyright copyleft"

[Attr | = val] indicates that the value of the attr attribute of an element is val or starts with val-(val -)

A [hreflang! = "En"] can match the attribute en, en-US...

 

[Attr ^ = val] indicates that the attr attribute value of an element starts with val.

[Attr $ = val] indicates that the attr attribute of an element ends with val.

A[href$=".html "] href a tag ending with .html

[Attr * = val] indicates the value of the attr attribute of an element, including val.

 

6.4 Class selectors

Use vertices to represent classes in Css

*. Pastoral or. pastoral search elements include class = "pastoral"

 

6.5 ID selectors

# Chapter1 query element ID = "chapter1" whose id is chapter1"

 

6.6 Pseudo-classes

: Links that link applications have not accessed

: The access link of the visited Application

: Hover user hovers

: The active element has been activated by the user (active links)

: Focus

: # Anchor in target URI

 

: Enabled

: Disabled

: Checked single-choice or multi-choice box selection status

 

: Root

: Nth-child () an + B a, B is an integer

Tr: the odd number of rows in the nth-child (2n + 1) table

Tr: nth-child (odd) Same as above

Tr: nth-child (2n + 0) an even row of the table

Tr: nth-child (even) Same as above

: Nth-child (10n-1) indicates rows 9, 19, 29...

: Nth-child (10n + 9) Same as above

: Nth-child (10n +-1) syntax error, ignore

Foo: nth-child (0n + 5) 5th foo

Foo: nth-child (5) Same as above

: Nth-last-child () an + B

Tr: The last two rows of the nth-last-child (-n + 2) Table

Tr: the odd number of rows in the nth-last-child (odd) table.

: Nth-of-type () an + B

: Nth-last-of-type ()

Body> h2: nth-of-type (n + 2): h2 in the nth-last-of-type (n + 2) body, except for the first and last

Body> h2: not (: first-of-type): not (: last-of-type) Same as above

: First-child

Div> p: the first element in the first-child div element and it is a p element.

Last-child

Ol> li: The last li in last-child ol

: First-of-type

: Last-of-type

: Only-child: the parent element of this element has only one child element.

: Only-of-type

: Empty

 

: Not

Button: not ([DISABLED])

 

7. Pseudo-elements

: First-line

P: The first line under the first-line p element

: First-letter

: Before

: After

 

8 Combinators8.1 Descendant combinator

B label under a B A label

Em tag under h1 em h1 tag

Div * p

Div p * [href]

8.2 Child combinators

A> B child combinators

Body> p

Div ol> li p label needs the child of li, li needs the child of ol, ol needs to be the child of div

8.3 Sibling combinators

A + B a near brother Label B

P tag after math + p math tag

A ~ B

H1 ~ Pre h1 labels pre labels under the same parent label

9 Calculating a selector's specificity10 The grammar of Selectors10.1 Grammar

* 0 or more

+ 1 or more

? 0 or 1

| Separates alternatives

[] Grouping

 

10.2 Lexical transaction

"~ = "Return regiondes;

"| =" Return DASHMATCH;

"^ =" Return PREFIXMATCH;

"$ =" Return SUFFIXMATCH;

"* =" Return SUBSTRINGMATCH;

{Ident} return IDENT;

{String} return STRING;

{Ident} "(" return FUNCTION;

{Num} return NUMBER;

"#" {Name} return HASH;

{W} "+" return PLUS;

{W} ">" return GREATER;

{W} "," return COMMA;

{W }"~ "Return TILDE;

":" {N} {O} {T} "(" return NOT;

@ {Ident} return ATKEYWORD;

{Invalid} return INVALID;

{Num} % return PERCENTAGE;

{Num} {ident} return DIMENSION;

"<! -- "Return CDO;

"-->" Return CDC;

 

11 Profiles