[CSS] How to use four basic selectors in a stacked style sheet

1. Derivative Selector
You can define a style based on the context of the element in its position to make the tag more concise.
In css1, the selectors that apply rules are called contextual selectors because they depend on context relationships to apply or avoid a rule. In css2, they are called derivative selectors, but whatever you call them, they all play the same role.
The derived selector allows you to determine the style of a tag Based on the context of the document. By properly using the derived selector, we can make HTML code more clean.
For example, if you want the strong element in the list to become italic, rather than the regular italic, you can define a derived selector as follows:

li strong {    font-style: italic;    font-weight: normal;  }

<P> <strong> I am a bold Chinese character, not a italic, because I am not in the list, therefore, this rule does not work for me </strong> </P> <ol> <li> <strong> I am a italic. This is because the strong element is located in the Li element. </Strong> </LI> <li> I am a normal font. </LI> </OL>

In the above example, only the style of the strong element in the Li element is italic, and no special class or ID needs to be defined for the strong element. The code is more concise.

Let's look at the following CSS rules:

strong {     color: red;     }h2 {     color: red;     }h2 strong {     color: blue;     }

The following is the HTML that it influences:

<p>The strongly emphasized word in this paragraph is<strong>red</strong>.</p>

Ii. ID Selector
The ID selector can specify a specific style for HTML elements labeled with a specific ID.
The ID selector is defined.
The following two ID selectors can be used to define the color of the first element as red, and the color of the second element as Green:
#red {color:red;}#green {color:green;}
In the following HTML code, the P element whose ID attribute is red is displayed in red, while the P element whose ID attribute is green is displayed in green.
<P id = "red"> the paragraph is red. </P> <p id = "green"> the section is green. </P>
Note: The ID attribute can only appear once in each HTML document.



Id selector and derived Selector
In modern la S, the ID selector is often used to create a derived selector.

#sidebar p {    font-style: italic;    text-align: right;    margin-top: 0.5em;    }
The above style will only apply to paragraphs that appear in the element where ID is sidebar. This element may be a div or table unit, although it may also be a table or other block-level element. It can even be an inline element, such as <em> </em> or <span> </span>. However, this method is invalid, because <p> cannot be embedded in the inline element <span> (if you forget the reason, see XHTML: website reconstruction ).
One selector for multiple usage
Even if the element labeled as sidebar appears only once in the document, this ID selector can be used many times as a derived selector:
#sidebar p {    font-style: italic;    text-align: right;    margin-top: 0.5em;    }#sidebar h2 {    font-size: 1em;    font-weight: normal;    font-style: italic;    margin: 0;    line-height: 1.5;    text-align: right;    }

Here, unlike other P elements on the page, the P elements in the sidebar get special processing, and, unlike all other H2 elements on the page, the H2 elements in the sidebar get different special processing.


Separate Selector
The ID selector can be used independently even if it is not used to create a derived selector:
#sidebar {    border: 1px dotted #000;    padding: 10px;    }
According to this rule, the element with the ID of Sidebar will have a black dot border with a pixel width, and there will be a 10 pixel width padding (padding, internal blank) around it ). Earlier versions of Windows/ie may ignore this rule unless you specifically define the elements to which this selector belongs:
div#sidebar {    border: 1px dotted #000;    padding: 10px;    }
Iii. class selector
In CSS, the class selector is displayed with a dot:
.center {text-align: center}
In the preceding example, all HTML elements with the center class are centered.
In the following HTML code, both H1 and P elements have center classes. This means both of them will comply with the rules in the ". Center" selector.

Note: the first character of the class name cannot contain numbers! It does not work in Mozilla or Firefox.
Like ID, class can also be used as a derivative selector:

.fancy td {    color: #f60;    background: #666;    }
In the above example, the table cells inside the larger element of the class named fancy will display orange text with a gray background. (A bigger element named fancy may be a table or Div)
Elements can also be selected based on their classes:

td.fancy {    color: #f60;    background: #666;    }
In the above example, the table unit named fancy will be orange with a gray background.
<td class="fancy">

You can allocate the fancy class to any table element for any number of times. Cells marked with fancy will all be orange with a gray background. Cells that are not assigned a class named fancy will not be affected by this rule. It is worth noting that paragraphs with a class of fancy will not be orange with a gray background. Of course, any other elements marked as fancy will not be affected by this rule. This is because of the way we write this rule. This effect is limited to the table units labeled as fancy (that is, using TD elements to select the fancy class ).



Iv. Attribute Selector
Set styles for HTML elements with specified attributes.
You can set styles for HTML elements with specified attributes, not limited to class and ID attributes.
Note: Internet Explorer 7 (and later) is specified! Doctype supports attribute selectors. Attribute selectors are not supported in IE6 and earlier versions.
The following example shows how to set a style for all elements with the title attribute:

[title]{color:red;}


Attribute and value Selector
The following example shows how to set a style for all the elements of Title = "why:

[title=WHY]{border:5px solid blue;}

Attribute and value selector-multiple values
The following example sets a style for all elements that contain the title attribute of the specified value. Applicable to attribute values separated by spaces:
[title~=hello] { color:red; }
The following example shows how to set a style for all elements with the lang attribute containing the specified value. Applicable to attribute values separated by hyphens:
[lang|=en] { color:red; }

Set the Form Style
Attribute selectors are particularly useful when setting styles for forms without a class or ID:
input[type="text"]{  width:150px;  display:block;  margin-bottom:10px;  background-color:yellow;  font-family: Verdana, Arial;}input[type="button"]{  width:120px;  margin-left:35px;  display:block;  font-family: Verdana, Arial;}