CSS learning notes: Selection Operator

1. Simple selection operator
Type Selector Based on HTML tags and class or ID Selector Based on HTML attributes
Example:
A: select the type of the HTML Tag (Save the name of the <> HTML Tag)
P {...}, body {...}, input {...}

B: class or ID Selector Based on HTML attributes
<Input type = "text" name = "item" class = "B"/>
. B {...}
,
<Label id = "item">... </label>
# Item {...}

2. Common Selector
CSS defines a common selector. It applies to all labels and content on the page. It is represented by an asterisk.
Example:
*{...}
*. B {...}

Note:
If some other content (class, Id selector) is included in the general selection rules, the asterisks can be omitted. in fact, the common method of class selector is to omit the General selector of an asterisk.

3. Combine simple Selector
To maximize the effect of CSS rules, you need to write a combination rule (extract the common part). You can list the selector in a set and separate them with commas (,) to join the rule.
. B, # item {...}

4. subselector
In HTML and XML, the child is an element completely included in the content of another element. combine simple Selection Characters and separate them with spaces. the sub-Selector defines the rules for a given tag to appear on the page.
Example:
<Div id = "item">
<Ul>
<Li> 1 </LI>
<Li> 2 </LI>
</Ul>
</Div>
# Item ul Li {...}

5. pseudo classes and pseudo elements
5.1: pseudo element
A pseudo-class selector is a set of predefined attributes. HTML elements can possess these predefined attributes. in fact, these attributes have the same functions as the class attributes. in css terminology, it is called a pseudo class.
A pseudo-Selector identifies a virtual element, that is, the element that does not exist in the tag, but the browser can reason and apply the style to the element. In the pseudo-class, there is no tag corresponding to the pseudo element.
Example:
: Link {...}
A: link {...}

Note:
Put the pseudo classes together with the real classes or even other pseudo classes. There is no space in the middle, and only the. And: indicators can be combined.
Example:
<A href = "4.html" class = "nav1"> 4 </a>
...
<A href = "n.html" class = "navn"> n </a>

A: link. nav1 {...}
A. navn: link {...}
Commonly used:
A: link {...}
A: visited {...}
Note:
Link and visited are mutually exclusive. A given connection can only be one of them at a given time point. It cannot be two at the same time. You can also write as follows:
A: Link, A: visited {...}

Here we will not list the pseudo elements one by one! You can go to W3C to see the document or prepare a <CSS authoritative guide>.

5.2: pseudo element
Cascading Style Sheets define four pseudo elements, also known as virtual elements. They are created from the content. These elements are stored in documents related to basic elements.
: Before-content before the element is inserted
: After-insert element content
: First-letter-the first letter of the Block Element
: First-line-the first line of the Block Element

Example:
<Div id = "item">
This is <p> Car </P>
</Div>
# Item P: first-line {...}
# Item P: first-line: First-letter {...}

6. Attribute Selector
Attribute selector tests the existence of all special HTML attributes set on the element.
Example:
Input [type = "checkbox"] {...}
Input [type = "Submit"] {...}
Option [value = "A"] {...}
HR [noshade] {...}

Use the common selector:
* [Title] {...}
[Title] {...}

In addition to verifying the existence of attributes, you can also use attribute values for selection.

6.1 element [attribute = "value"] {...}
Note: To specify exact match, select only the elements with the given attribute values.
Example:
<Table Summary = "layout">
Table [summary = "layout"] {...}

6.2 element [attribute ~ = "Value"] {...}
Note: Record matching. If the value in the rule is one of the given values in HTML, separate them with spaces.
Example:
<Div class = "foo bar">... </div>
Div [class ~ = "Bar"]

6.3 element [attribute | = "value"] {...}
Note: The format matches the value of the rule and the value of HTML, and compares the characters before the font size.
Example:
<SPAN lang = "En-us">... </span>
* [Lang | = "en"]

7. Family Relationship
In CSS, family-based delimiters are selected based on the relationship between HTML tags.
7.1 subselector
A child selector is a special type of child selector. child selector only refers to the elements that belong to the immediate children of other elements, and does not refer to any "grandchildren" or their descendants. the child selector is indicated by the greater than symbol (>) between the parent element and the child element.
Example:
<Div class = "item">
<P> Yes </P>
<P> NO </P>
</Div>

. Item> P {...}
Only the first P application rule

7.2 kinship Selector
If two HTML tags have the same parent element. they are compatriots. by listing the first compatriot, a plus sign (+), and then the second compatriot, you can write the kinship rule. see the following example:
<Ul>
<Li> Yes </LI>
<Li> NO </LI>
<Li> define </LI>
</Ul>
Li + Li {...}

Note:
The kinship selector makes a choice based on the two relatives, but it applies the rule only to the second of the two, the first is not affected by the rule. This is very important.

Compatriot means that the flow direction is visualized, while the near-relative selector is useful for adding, deleting edge moments, borders, and filling.
Example:
<DL>
<DT> CSS </DT>
<DD> Cascading Style Sheets </DD>

<DT> HTML </DT>
<DD> hypertext markup language </DD>
<DD> see also: <cite> XHTML </CITE> </DD>

<DT> Wai </DT>
<DD> Web Accessibility Initiative </DD>
<DD> see also: <cite> W3C </CITE> </DD>

<DT> wcag </DT>
<DD> Web Content Accessibility Guidelines </DD>

<DT> WWW </DT>
<DD> World Wide Web </DD>

<DT> W3C </DT>
<DD> World Wide Web Consortium </DD>
<DD> see also: <cite> WWW </CITE> </DD>

<DT> XHTML </DT>
<DD> extensible HTML </DD>
<DD> see also: <cite> HTML </CITE> </DD>
</Dl>

Dt {...}
DT + dt, DD + dt {...}
DT + dd {...}
Dd + dd {...}