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:
The code is as follows: |
Copy code |
Li strong { Font-style: italic; Font-weight: normal; } |
Note the context of the blue code marked as <strong>:
The code is as follows: |
Copy code |
<P> <strong> I am in bold or not, because I am not in the list, 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:
The code is as follows: |
Copy code |
Strong { Color: red; } H2 { Color: red; } H2 strong { Color: blue; } |
The following is the HTML that it influences:
The code is as follows: |
Copy code |
<P> The stronugly emphasized word in this paragraph is <strong> red </strong>. </p> <H2> This subhead is also red. <H2> The stronugly emphasized word in this subhead is <strong> blue </strong>. |
Example 1
The code is as follows: |
Copy code |
<Styletype = "text/css"> Ollistrong { Font-style: italic; Font-weight: normal; } Olli { Color: blue; } </Style> <Body> <P> <strong> I am in bold or not, because I am not in the list, 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> </Body> |
Specify the style according to the element position.
Example 2
MeThis problem occurs when learning a drop-down menu.
The entire menu cannot be centered.
The code is as follows: |
Copy code |
<Div class = "center_holder"> <Div style = "margin: 0 auto; width: Pixel px; text-align: center;"> <Ul class = "menu"> <Li> <a href = "#"> homepage </a> <Ul> <Li> <a href = "#"> test </a> </li> <Li> <a href = "#"> test </a> </li> <Li> <a href = "#"> test </a> </li> </Ul> </Div> </Div>
. Center_holder { Padding-top: 20px; Margin: 0 auto; Min-width: 500px; Max-width: 1100px; Text-align: center; } . Menu { Height: 40px; Width: 610px; Background: # 4c4e5a; Background:-webkit-linear-gradient (top, # 4c4e5a 0%, #2c2d33 100% ); Background:-moz-linear-gradient (top, # 4c4e5a 0%, #2c2d33 100% ); Background:-o-linear-gradient (top, # 4c4e5a 0%, #2c2d33 100% ); Background:-ms-linear-gradient (top, # 4c4e5a 0%, #2c2d33 100% ); Background: linear-gradient (top, # 4c4e5a 0%, #2c2d33 100% ); -Webkit-border-radius: 5px; -Moz-border-radius: 5px; Border-radius: 5px; } . Menu ul { Position: absolute; Top: 40px; Left: 0; Opacity: 0; Background: #1f2024; -Webkit-border-radius: 0 0 5px 5px; -Moz-border-radius: 0 0 5px 5px; Border-radius: 0 0 5px 5px; -Webkit-transition: opacity. 25 s protocol. 1 s; -Moz-transition: opacity. 25 s limit. 1 s; -O-transition: opacity. 25 s priority. 1 s; -Ms-transition: opacity. 25 s priority. 1 s; Transition: opacity. 25 s priority. 1 s; } |
Then I tried to add margin-left: auto; margin-right: auto; to the menu.
Try to add in center_holder.
Finally, I tried to use it in menu ul, but it was still fruitless.
At last, add the. menu {with margin: 0 auto;
For example
The code is as follows: |
Copy code |
<Div class = "center_holder"> <Div style = "margin: 0 auto; width: Pixel px; text-align: center;"> <Ul class = "menu"> <Li> <a href = "#"> homepage </a> <Ul> <Li> <a href = "#"> test </a> </li> <Li> <a href = "#"> test </a> </li> <Li> <a href = "#"> test </a> </li> </Ul> </Div> </Div> |
The problem is solved.