CSS3 Selector Research, case study

In the previous study of the CSS3 selector lists almost all of the CSS3 selectors, and pseudo-class selectors, when it is not done case study, I would like to write in that article, but think if the case is written in that article, for the search is not very convenient, all another to open an example of the case.

Property Selector

[Title]: Select an element with the title attribute

　　

[title= ' Hello ']: Select the element where the property is the title and the value is Hello

　　

[title~= ' Hello ']: Select the attribute is the title and part of the value is the element of hello, hello needs to be a separate value, separated by a space

　　
[title*= ' Hello ']: Select attribute is title and contains the element of Hello

　　
[title|= ' Hello ']: Select the attribute is the title and the value is any character that begins with Hello and allows Hello to be followed by-

　　
[title^= ' Hello ']: Property any character that begins with Hello

　　
[title$= ' Hello ']: Any character with a property ending with Hello

　　
[title^= ' Hello '] [title$= '. Py ']: Select the element whose property starts with Hello and ends with a. py

　　

Connector

H1~p: Selects all sibling p elements after the H1 element

　　

P~p: Selects all sibling p elements that follow the P element, except for the first P element

　　

H1+p: Select the first sibling p element after the H1 element

　　

If span is not in front of the first P label, because + is the first sibling element that is selected. If you do not want to restrict the type, just choose the first one, then you can.

　　

Pseudo class Selector

Nth Series, Digital

Nth-child (): Arithmetic by location

　　

Nth-of-type (): Arithmetic by type

　　

Nth-last-child (): Starts at the end by position

　　
Nth-last-of-type (): Arithmetic by type from end

　　
by (-n+number) to specify the first few elements to select

-N will increase to negative direction first starting from 0, -1,-2,-3 ...

　　

　　

Use: Nth-child (odd) or: Nth-child (even) for interlaced discoloration.

Odd

　　

Even

Single selection

First-child: Select the first element, by location

　　
First-of-type: Select the first element, by type

Last-child: Select the last element, by location

　　
Last-of-type: Select the last element, by type

Only-child: When there is no other sibling element, it will be selected.

　　
Only-of-type: can have sibling elements but different types

　　
Using Only-of-type allows you to pick an element from other types of elements, whereas only-child requires elements to exist separately. This certainly has a big role to be found.

Pseudo class

: Target

1. Simulate click events by: Target
2. <a href= "#a" id= "a" ></a>
3. Use target for tab bar switching
4. Using the target pseudo-class, it is easy to highlight comments that users want to read

With the tab switch made with target, there's still a lot of flaws, but you can extend it.

: Empty
Select an element that has no child elements and no text nodes

Use: Empty to give default hints.

　　

　　

But this has to pay attention, UL can not break the line must be written <ul></ul> if there is a line break can not match.

: Root
Select root element, in HTML root is always HTML element

: not
parameter supports passing an element and even other pseudo-class selectors, but does not support passing the linker and pseudo-elements
Select any element other than the specified parameter

: Optional

Select INPUT element that is not mandatory

That is, the element that gets the input without the required attribute

: Required

Select an element with the required attribute

: Read-write

Get the INPUT element that can read and write

: read-only

Gets a read-only INPUT element

: Out-of-range

Max and Min limits when the value of the input element is out of range

: Valid

Select all legitimate inputs that apply to table cells, such as maximum values for minimum input elements and attributes, e-mail messages that have legitimate e-mail messages, or numeric fields such as numbers.

Element State Pseudo-class

: Checked
When the checkbox is selected

:d isabled
When an element is banned

: Enabled
When the element is not banned

Pseudo element

:: First-line
Select the first line of text

:: First-letter
Select the first word

:: After
Add a pseudo-element at the end of an element

:: Before
Add a pseudo element at the beginning of an element

:: Selection
Apply to selected text

Reasonable use of these selectors, can help you solve a lot of problems, is still in the study, the content of the long-term update.

CSS3 Selector Research, case study