Css3 selector, css3 Selector

Css3 selector, css3 Selector

These selectors are relatively simple, so they are no longer used as examples. with the upgrade of various browsers, we will not discuss the compatibility and support for Attribute styles of browsers of various versions for a long time.

I. Attribute Selector

[Attr = val]: The attribute attr is val;
[Attr * = val]: The attribute attr contains val;
[Attr ^ = val]: The attribute attr starts with val;
[Attr $ = val]: The attribute attr ends with val;
Ii. Pseudo-class selector
: First-line: Use a style for the first line of text in an element.
: First-letter, used as the first letter of a text in an element (European and American characters) or the first word (Chinese or Japanese characters.
: Before, insert some content before an element.
Example:. gys: before {content: 'siss ';}
: After, insert content after an element.

: Root, valid text area, that is, html Area
Example: root {background: 'red ';}
Body {background: "yellow ";}
At this time, the background of the entire page turns yellow, and the background color of the text area is red.
: Not, exclude unnecessary child elements
For example: body *: not (h1) {color: red;} // all child elements in the body, excluding the h1 Element
: Empty. The style is used when the element content is blank.
: Target. After you jump to this link, run the style.
For example:
<A href = "# test1"> 111111111111 </a>
<A href = "# test2"> 222222222222222 </a>
<Div id = "test1"> 1111111111111111 </div>
<Div id = "test2"> 222222222222 </div>

# Test1: target {background-color: #000;} // the background color changes when the jump to id = test1

: First-child, the first child element
: Last-child, last child element
: Nth-child (n): Specifies the child element of nth in the parent element. If n is a child element of the even sequence of odd, the child element of the even technical sequence
: Nth-last-child (n), which specifies the child element of the last n in the parent element. If n is a child element of the even sequence of odd, the child element of the base sequence of even
: Nth-of-type (n), specifying n of the same type.
: Nth-of-last-type (n), which specifies the nth element of the same type.
: Nth-child (an + I), cycle style.
Example: li: nth-child (4n + 1) {color: red ;}
Li: nth-child {4n + 2} {color: bluee ;}
Li: nth-child (4n + 3) {color: yellow ;}
Li: nth-child (4n + 4) {color: black ;}
: Only-child, used when the parent element has only one child element.
Example: li: only-child {color: red ;}

3. Form pseudo-class selector
: The active element is activated (the mouse has not been lifted yet)
: When focus gets the focus,
: Hover, move the cursor over the element
Example: input [type = 'text']: active {color: # F00 ;}
Input [type = 'text']: focus {color: # F00; background-color: #960 ;}
Input [type = 'text']: hover {color: #0F0 ;}

: Enabled, the element is available,
: Disabled. The element is unavailable.
: Read-only. The element is read-only.
: Read-write. The element is not read-only.

: Checked, the style of the radio or checkbox check box in the form when it is selected
: Default. When the page is opened, the selected style of the single button or check box is selected by default.
: Indeterminate, used to specify the style of the entire lease order when the selected status is not set for any single region in a group of single regions when the page is opened. If the user selects any of the single regions, this style is not specified. currently, only opera is supported.
: Selection.

Selector added by CSS3

@ Media (min-width: 992px)
The minimum visible range of a browser is 992px. When the visible range of a browser is ≥992px, the maximum width of. container is 970px,
That is, no matter how large the browser is, as long as it is not less than 992px, the width of. container is always 970px.

When the visible range of the browser is smaller than 992px, the setting in. container is invalid.

Here, a default value should be set in container.

Another example:
@ Media (max-width: 1000px ){. similarly, the @ media {max-width: 970px ;}here means that if the maximum width of the browser is 1000px and its size is smaller than 1000px ,. the value in the container takes effect.

That is to say:
The value in @ media {} is the allowed condition. When this condition is set, the content in it takes effect.

Detailed translation is:

If the browser width is less than or equal to PX (Note: to understand the meaning of the maximum width, the minimum width is greater than or equal to this value ),. the maximum width of the container is 970px, no matter how much the browser is scaled ,. the container width is always 970px, but when it is greater than 1000px ,. the value in the container is invalid.

@ Media can also write a fixed width value, such:
@ Media (wdith: 1000px ){. when the width of the container {width: 970px} browser is PX ,. the container width is 970px. Obviously, this is definitely equal to the value, which is meaningless.

Above ~
Self-test results ......


I don't understand what the first-child and last-child values in the CSS 3 selector of html 5 use?

: First-child and: last-child
Used to select the first child element of an element.
// Enter ul li: first-child
// Enter ul li: last-child
There is just a video in this regard. The video series is named "Buid New World". The eighth episode is about the CSS3 selector. You have a chance to check it out.