Css3 selector and css Selector

Css3 selector and css Selector

Wildcard Selector
The wildcard selector takes effect for all elements on the page,
All the tags on the page will display the style set by the wildcard selector.
The disadvantage is that it affects the page rendering time. Therefore, it is not recommended to directly use the wildcard selector.
Instead, put the elements that need to be set together and use the [group selector]
One-time setting.


For beginners, you don't need to worry too much about the speed and performance of webpage opening.
What about the wildcard selector? You can use it directly when you need it. The following code is used.
Example: code1

Another usage of wildcard is to set the same style for the descendant of an element. Example: code3
Used in combination with the class selector.
Code1
{
Margin: 0;
Padding: 0;
}

-------------------

Group selector (Union selector)
Html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img {
/* Code2 */
Margin: 0;
Padding: 0;
}

--------------------

Tag Selector
H1 {
Color: blue;

}
P {
Font-family:;
Color: cadetblue;
}

--------------------

Class selector: The most common Selector
Separate use of class selector
. Desc {
Border: dashed;
}
Class selector and other forms used in combination
. Desc p {
Color: deeppink;
Font-size: 20px;
}

. Desc *{
/* Code3 */
Color: deeppink;
}

--------------------

ID Selector

Note that it is case sensitive.

The word list cannot be used. See difference 2. The error code is as follows:
# Title name {
Font-size: 30px;
}
Can be used with other selectors

# Title {
Font-size: 30px;
}
# Title. name {
Color: #000;
}

--------------------

Descendant selector (including selector)
. Desc p {
Color: deeppink;
Font-size: 20px;
}

. Descendant em {
Font-weight: bold;
}

--------------------

Child element Selector
. Child> p> em {
Font-size: 30px;
}

--------------------

Adjacent Selector
Can be used with other selectors

Note that the adjacent selector must have a common parent element.

. Adjacent h5 + p {
Margin-top: 50px;
}
Sibling Selector
. Adjacent h5 ~ P {
Font-size: 30px;
}

--------------------

Attribute Selector
The color of all hyperlink labels on the page turns red, and can be used together with other selectors.

Select an attribute
. TestA a [href] {
Color: red;
}

A [href] {
Color: red;
}

Select Based on Multiple Attributes
It can also be used in combination with other selectors.
A [href] [title] {
Font-size: 25px;
}

Select based on the specific property value. The case is as follows:
A [href = '#'] [title = 'test'] {color: deeppink ;}

Attribute and attribute value must match
A [class = 'aaa bbb '] {
Color: chartreuse;
}

Select based on some property values, that is, as long as the specified value element exists in the property, it will be selected

If the Tilde is ignored, it indicates that full value matching is required.

P [class ~ = 'Portable'] {
Color: red;
}

Substring matching attribute selector: divided into three types
In the selected attribute, the attribute value starts with the specified attribute value.
A [href ^ = 'HTTP: // www. apple'] {
Color: deeppink;
}
In the selected attribute, the attribute value ends with the specified attribute value.
A [href $ = 'Microsoft. com'] {
Color: cadetblue;
}
The specified property value exists in the selected property.
A [href * = 'www .w3school.com '] {
Color: red;
}

Select a type for a specific attribute

The most common purpose of the attribute selector is to match the language value.

P [lang | = 'en'] {
Color: red;
}

--------------------

Pseudo class
The pseudo-class name is case insensitive;
: Active takes effect only after: hover;
: Hover takes effect only after link: visited;

In addition, pseudo classes can be used with other selectors.

A: link {color: # FF0000} unaccessed link
A: visited {color: #00FF00} accessed Link
A: hover {color: # FF00FF} move the cursor over the link
A: active {color: # 0000FF} selected Link

: First-child pseudo-class to select the first child element of an element
. Wl p: first-child {
Color: red;
} Is easy to misunderstand! Reading method: select the first p tag under the element of the. wl class. It is not the first element in the p tag. It is compared with the style below.

. Wl p I: first-child {
Font-size: 30px;
} Reading method: the first I tag in all p tags under. wl class

. Wl p: first-child I {
Color: # FF00FF;
} Reading method: All I tags in the first p tag under. wl

. Wl li: first-child {
Font-family: monospace;
}

--------------------

Pseudo element Note: it can also be used with other selectors
: First-line pseudo element: used to set a special style for the first line of text
: First-line can only be used for block-level elements, view page styles

Note: The following attributes can be used for pseudo elements: first-line
Font
Color
Background
Word-spacing
Letter-spacing
Text-decoration
Vertical-align
Text-transform
Line-height
Clear

. Wl p: first-line {
Color: # ff0000;
Font-variant: small-caps;
}

: First-letter: process the first letter
: First-letter can only be used for block-level elements, view page styles

Note: The following attributes can be used for pseudo elements: first-letter
Font
Color
Background
Margin
Padding
Border
Text-decoration
Vertical-align (only when float is none)
Text-transform
Line-height
Float
Clear

. Wl p: first-letter {
Color: chocolate;
}
The preceding two elements constitute multiple pseudo elements.

: Before pseudo element: new content can be inserted before the Element Content
. Wl p: before {
Content: url ("");
}
. Wl p: after {
Content: url ("");
}

********
Question about the selected priority

Id selector priority> class selector priority> label selector priority