CSS3 Learning Summary 1--CSS3 Selector

The CSS3 property selector mainly includes the following types of properties:

• 1. E[attr^= "Value"]: The property name is specified, and there is a property value, and the value of the property begins with value;

• 2. E[attr$= "Value"]: The property name is specified, and there is a property value, and the value of the property is terminated with value;

• 3. E[attr*= "Value"]: The property name is specified, and there is a property value, and the value contains value;

Example

. classnamea[href^= "/http"]{background:orange;color:blue;}
. Classnamea[href$="png"]{background:green;  Color:black;}
. classnamea[title*= "Hubwiz"]{background:black;color:white;}

CSS3 selector, or CSS3 struct class, first lists the options he has:

• 1.: First-child Select the first child element of an element;
• 2.: Last-child Select the last child element of an element;
• 3.: First-of-type Select a parent element under the first homogeneous sub-element;
• 4.: Last-of-type Select the last homogeneous sub-element of a superior element;

Example:

. classnameli:first-child {background:green; border:1px dashed blue;}
. classnameli:last-child {background:green; border:2px dashed blue;}
.classname> p:first-of-type {background:green;}

. className> P:last-of-type {          background: green;    }

• 5.: Nth-child () Select one or more specific child elements of an element;

Example:

1. Simple numeric notation: nth-child (number), directly matches the first digit element. The parameter number must be an integer greater than 0.

As below, set the background of the 3rd p to green:

P:nth-child (3) {Background:green;}

2. Multiple notation: Nth-child (an), matching all elements of a multiples of a. Where the letter N in the parameter an is not the default, it is a multiple notation, such as 3n, 5n.

as follows, the 2nd, 4th, 6th 、...、 All multiples of 2 of P's background is set to blue:

P:nth-child (2n) {background:blue;}

　　

3. Multiple grouping matching: nth-child (an+b) and: Nth-child (An-b), the first group of elements, each group has a, B is the number of members within the group, where the letter N and plus + is not the default, the position is not interchangeable, this is the notation, where a, B is a positive integer or 0.

as follows, match 1th, 4th, 7th 、...、 1th p elements for each group of 3

P:nth-child (3n+1) {background:orange;}

As below, match the multiples of 3-1=2, 6-1=5 、...、 3rd minus 1 p elements

P:nth-child (3n-1) {background: #33FF33;}

　　

4. Parity match: Nth-child (odd) and: Nth-child (even) respectively match the number of odd and even elements. The odd (odd) is the same as the (2n+1) result; even (even) is the same as (2n+0) and (2n) results.

Here, we specify two different background colors for the odd and even p elements:

P:nth-child (odd) {background: #ff0000;}
P:nth-child (even) {background: #0000ff;}

• 6.: Nth-last-child () selects one or more specific child elements of an element, starting from the last child element of the element;

. ClassName P:nth-last-child (4) {background:red;}

　

• 7.: Nth-of-type () select the specified element;

: Nth-of-type similar to: Nth-child, the difference is that he only calculates the element specified in the selector, in fact, our previous instance has specified a specific element, the selector is mainly used to locate the element contains a lot of different types of elements is very useful.

• 8.: Nth-last-of-type () selects the specified element, starting from the last of the element;

: Nth-last-of-type (n) The selector matches each element of the nth child element of a particular type that belongs to the parent element, counting from the last child element (n can be a number or formula).

• 9.: Only-child The selected element is the only element of its parent element;

E:only-child that match the e element that is the only child element of its parent element. Simply, a type element that matches only one child element in the parent element. To be blunt is that the E element's parent is only a child element of its own.

• Ten.: Only-of-type Select an element that is the only child of the same type as its ancestor element;

: Only-of-type is an element he has many child elements, and only one child element is unique.

So we can use this selector to select the element's unique child element.

The only way to choose one of its various sub-elements

Div:only-of-type{background-color:green;}

　　

• One.: Empty selects an element without any content.

Empty is used to select elements that do not have any content, and nothing here refers to a little bit of content, even if it is a space.

CSS3 Learning Summary 1--CSS3 Selector