4. ID Selector
The ID parameter in the HTML page specifies a single element, and the ID selector is used to define a separate style for this single element.
The ID selector is similar to the class selector, as long as the class is replaced with an ID. Replace the class in the previous example with an ID:
<p id= "Intro" >
This paragraph is aligned to the right
</p>
Define the ID selector to precede the ID name with a "#" number. The same as the class selector, there are two ways to define the properties of the ID selector. In the following example, the id attribute matches all elements of the id= "Intro":
#intro
{
font-size:110%;
Font-weight:bold;
Color: #0000ff;
Background-color:transparent
}
(font size is 110% of the default size; bold; blue; background color transparent)
In the following example, the id attribute only matches the paragraph element of id= "Intro":
P#intro
{
font-size:110%;
Font-weight:bold;
Color: #0000ff;
Background-color:transparent
}
NOTE: The ID selector is so restrictive that you can only define the style of an element individually, which is typically used only in special cases.
5. Include Selector
You can separate the stylesheet of a relationship definition for some element, and element 1 contains element 2, which is defined only for element 2 in element 1, not for individual element 1 or element 2, for example:
Table A
{
font-size:12px
}
The links in the table change the style, the text size is 12 pixels, and the linked text outside the table is still the default size.
6. Cascading of Style sheets
Cascading is inheritance, and the style sheet's inheritance rule is that the external element style is preserved and inherited to the other elements contained in the element. In fact, all elements nested within an element inherit the property values specified by the outer element, sometimes adding many layers of nested styles together, unless otherwise changed. For example, to nest a P tag in a div tag:
div {color:red; font-size:9pt}
......
<div>
<p>
The text of this paragraph is red 9th
</p>
</div>
(The content in the P element inherits the div-defined attribute)
Note: In some cases the inner selector does not inherit the value of the surrounding selector, but theoretically these are special. For example, the upper boundary property value is not inherited, and intuitively, a paragraph does not have the same upper boundary value as the body of the document.
In addition, when a style sheet inheritance encounters a conflict, it always takes the last-defined style as the standard. If the color of P is defined in the example above:
div {color:red; font-size:9pt}
p {Color:blue}
......
<div>
<p>
The text of this paragraph is blue 9th Word
</p>
</div>
We can see that the text size of paragraph 9th is inherited Div attribute, and the color attribute is defined as the last.
When different selectors define the same elements, consider the precedence between different selectors. ID selector, class selector, and HTML tag Selector, because the ID selector is the last element, so the priority is highest, followed by the class selector. If you want to go beyond the relationships between these three, you can use!important to elevate the style sheet's precedence, for example:
p {color: #FF0000!important}
. Blue {color: #0000FF}
#id1 {color: #FFFF00}
We also add these three styles to one of the paragraphs in the page, which will end up with the red text in accordance with the!important-declared HTML tag Selector. If you remove!important, the highest priority ID selector is the yellow text.
7. Note
You can insert a comment in the CSS to illustrate the meaning of your code, which helps you or others to understand the meaning of the code when editing and changing the code later. In the browser, the comment is not displayed. CSS comments start with "/*" and End with "* *", as follows:
/* Define paragraph style sheet * *
P
{
Text-align:center; /* Text Center arrangement/*
Color:black; /* Text is black * *
Font-family:arial/* font is Arial * *
}
