CSS Selection Operator details, css Operator details

CSS Selection Operator details, css Operator details

1. Type Selector

What is a type selector? The identifier that uses the existing tag type in the webpage as the name. Body is a tag type in a webpage. div, p, and span are all.
As follows:

1. Body {}
2. Div {}
3. P {}
4. Span {}

 
2. group selection operator

For XHMTL objects, you can assign the same style to a group at the same time.
The selector is separated by commas (,). The advantage of this method is that you only need to write the same style once to reduce the amount of code and improve the CSS code structure.
Note that "comma" is in halfwidth mode, not Chinese fullwidth mode.
As follows:

1. H1, h2, h6, p, span
2. {
3. Font-size: 12px;
4. Color: # FF0000;
5. Font-family: Arial;
6. }

3. Include Selector
Specify the style of the sub-objects in an object, so that the selection method plays a role.
Note that only the sub-Object Label of this object is valid. This style setting is not applied to other sub-objects that exist independently or are not located in this object.
This helps us avoid too many id and class settings and define the required elements directly.
As follows:

1. H2 span
2. {
3. Color: Red;
4. }

As follows:

1. Body h1 span strong
2. {
3. Font-weight: Bold;
4. }

 
4. id Selector

According to the selection character of the DOM Document Object Model Principle, For An XHTML file, each tag can be assigned a name in the form of an id = "", but note that, in An XHTML file, IDs are unique and cannot be repeated.
In a webpage with div css layout, you can name different purposes, such as headers and footer at the bottom.
XHTML:

1. <Div id = "content"> </div>

 

CSS:

1. # Content
2. {
3. Font-size: 14px;
4. Line-height: 120%;
5. }

 
5. class selector

In fact, id is an extension of XHTML labels, while class is a combination of multiple labels in SHTML. class literal translation means class or category.
Use class = "" to assign names to XHTML labels. Unlike id, the class can be used repeatedly. For Multiple elements with the same style, it can be directly defined as a class.
The advantages of using class are self-evident. It demonstrates the reusability of CSS code. Many labels can be defined using a style without writing a style code.
XHTML:

1. <P class = "he"> </p>
2. <Span class = "he"> </span>
3. <H5 class = "he">

 

CSS:

1. . He
2. {
3. Margin: 10px;
4. Background-color: Red;
5. }

 
6. Tag-specific Selector

If you want to use both id and class and tag selector, you can use the following method:

1. H1 # content {}
2. /* Indicates all h1 tags whose IDs are content */
3. H1.p1 {}
4. /* Indicates all h1 labels whose class is p1 */

 
The accuracy of the tag-specific selector is between the tag selector and the id/class selector. It is a common selector.

VII. Combination Selector

For all the above Selection Characters, use them in combination. As follows:

1. H1. p1 {}
2. /* Indicates all class p1 labels under h1 */
3. # Content h1 {}
4. Indicates that the id isContentAll h1 labels under
5. H1. p1, # content h1 {}
6. /* Indicates all h1 labels whose class is p1 and whose id is content */
7. H1 # content h2 {}
8. /* H2 tag under the h1 tag whose id is content */

 
CSS selector is very free and flexible. You can use various selector based on the needs of the page to structure and optimize CSS files as much as possible.

 

######################################## ####################

 

1. Select the Character Mode

Mode/meaning/Content Description

*

Match any element. (General selector)

E

Matches any element E (for example, an element of the E type ). (Type selector)

E F

Matches any descendant element F of Element E. (Descendant selector)

E> F

Matches any child element F of Element E. (Sub-Selector)

E: first-child

When Element E is the first child element in its parent element, it matches Element E. (: First-child pseudo class)

E: link E: visited

If E is the source anchpoint of a hyperlink that has not been accessed (: link) or has been accessed (: visited), it matches Element E. (Link pseudo class)

E: active E: hover E: focus

Matches E in the specified user action. (Dynamic pseudo class)

E: lang (c)

If an element of Type E uses (human) Language c (document language determines how the language is determined), it matches the element. (: Lang () pseudo class)

E + F

If an element E is directly before element F, it matches element F. (Near selector)

E [foo]

Matches any element E with the "foo" attribute set (regardless of its value. (Attribute selector)

E [foo = "warning"]

Matches any element E whose "foo" attribute value is strictly equal to "warning. (Attribute selector)

E [foo ~ = "Warning"]

Matches the list of values whose "foo" attribute values are separated by spaces, and one of them is strictly equal to any element E of "warning. (Attribute selector)

E [lang | = "en"]

Any element E that matches its "lang" attribute with a list of values starting with "en" (from the left. (Attribute selector)

DIV. warning

Only HTML. The usage is the same as that of DIV [class ~ = "Warning"]. (Class selector)

E # myid

Matches any element E whose ID is equal to "myid. (ID selector)

The following example is used to explain "[s] parent element [/s]", "[s] child element [/s]", and "[s] parent/child [/ the concepts of "s]" and "[s] adjacent [/s.

<Div title = "this is a div">

<H1> This is h1 content

<P> This is the content of paragraph p! <Strong> here is the content of strong </strong> This is the content of paragraph p! </P>

</Div>

From the above code, we can find the relationship as follows:

H1 and p are the "Sons" of div, and they form a "parent/child" relationship with div respectively.

H1, p, and strong are all "child elements" of div ". (All three are included in the div)

Div is the "parent element" of h1 and p ".

Strong and p form a "parent/child" relationship. strong's "parent element" is p.

However, strong and div are not "parent/child", but "grandparents", but strong is still the "Child (Sun) element" of div ".

Div is the "ancestor" of h1 p strong, and the three are the "child" element of div ".

H1 and p are adjacent.

Inherit the above example to demonstrate the relationship between e f: if we need to change the content of strong to green, what can we do?

Div strong {color: green;}/*-correct. Strong is the "Child element" of div "*/

P> strong {color: green;}/*-correct. The relationship between strong and p is "parent/child */

Div> strong {color: green;}/*-error! Strong is the "Child (Sun) element" of div, but the two are the "grandparents", rather than the "parent/child" relationship. Therefore, it cannot be connected by> symbol */

Near selector and general selector: The general selector is represented by the star number "*" and can be used to replace any tag.

Instance:

H2 + * {color: green}/* all text in the element following h2 will be red */

II. Introduction to selector categories

1. wildcard Selection

Syntax:

* {SRules}

Note:

Wildcard character. Select all types of single objects in the document directory tree (DOM.

If the wildcard character is not the only component of a single character, "*" can be omitted.

Example:

* [Lang = fr] {font-size: 14px; width: 120px ;}

*. Div {text-decoration: none ;}

2. Type Selector

Syntax:

E {sRules}

Note:

Type selector. Take the document language object (Element) type as the selector.

Example:

Td {font-size: 14px; width: 120px ;}

A {text-decoration: none ;}

 

3. Attribute Selector

Syntax:

E [attr] {sRules}

E [attr = value] {sRules}

E [attr ~ = Value] {sRules}

E [attr | = value] {sRules}

Note:

Attribute selector.

Select E with the attr attribute

Select E with the attr attribute and the attribute value is equal to the value

Select a word list with the attr attribute and the attribute value is separated by spaces. One of the words is equal to the value of E. The value here cannot contain spaces

Select a word list that has the attr attribute and the attribute value is separated by a hyphen.

Example:

H [title] {color: blue ;}

/* All h objects with the title attribute */

Span [class = demo] {color: red ;}

Div [speed = "fast"] [dorun = "no"] {color: red ;}

A [rel ~ = "Copyright"] {color: black ;}

4. Include the selector

Syntax:

E1 E2 {sRules}

Note:

Contains the selector. Select All E2 contained by E1. That is, E1.contains (E2) = true.

Example:

Table td {font-size: 14px ;}

Div. sub a {font-size: 14px ;}

5. subobject Selector

Syntax:

E1> E2 {sRules}

Note:

Sub-object selector. Select E2 for all E1 sub-objects.

Example:

[Copy to clipboard] [-] CODE:

Body> p {font-size: 14px ;}

/* The font size of all p objects as sub-objects of the body is 14px */

Div ul> li p {font-size: 14px ;}

6. ID Selector

Syntax:

# ID {sRules}

Note:

ID selector. Take the ID of the object as the unique identifier in the document directory tree (DOM) as the selector.

Example:

# Note {font-size: 14px; width: 120px ;}

7. class selector

Syntax:

E. className {sRules}

Note:

Class selector. You can use this selector in HTML. The effect is equivalent to E [class ~ = ClassName]. See Attribute Selectors ).

In IE5 +, you can specify more than one value for the class attribute (feature) of the object (className) by specifying the class name of a group of style sheets separated by spaces. For example, <div class = "class1 class2">.

Example:

Div. note {font-size: 14px ;}

/* The font size of all div objects whose class property values are equal to (including) "note" is 14px */

. Dream {font-size: 14px ;}

/* The font size of all objects whose class property values are equal to (including) "note" is 14px */

8. Select character groups

Syntax:

E1, E2, E3 {sRules}

Note:

Character group. Apply the same definition to multiple delimiters. You can use commas to separate the delimiters and group them.

Example:

. Td1, div a, body {font-size: 14px ;}

Td, div, a {font-size: 14px ;}

9. Selection of pseudo classes and pseudo objects

Syntax:

E: Pseudo-Classes {sRules}

E: Pseudo-Elements {sRules}

Note:

Pseudo class and pseudo object selector.

Pseudo-class selector. See Pseudo-Classes (Pseudo-Classes) [: link: hover: active: visited: focus: first-child: first: left: right: lang].

Pseudo object selector. See Pseudo object (Pseudo-Elements) [: first-letter: first-line: before: after].

Example:

Div: first-letter {font-size: 14px ;}

A. fly: hover {font-size: 14px; color: red ;}