1, learned Java and C + + Note that the protected field or method belonging to the father will certainly be inherited by the child, and CSS has this feature, see the following example:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/>
<title>css's Inheritance demo </title>
<style type= "Text/css" >
Body
{
color:red;
}
</style>
<body>
<div>
The inheritance of CSS presentation
<ul>
<li> Home </li>
<li> Introduction </li>
<li> Contact </li>
</ul>
</div>
</body>
2, for this HTML, Div is the son of the body, UL is the son of Div, Li is the son of UL, whether Div, UL or Li are the descendants of the body, its hierarchical relationship such as:
Body
|
|--div (ITS content: CSS inheritance demo)
|
|--ul
|
|--li (Its contents: Home, Introduction, contact)
3, for this file defines a body tag Selector, the color value is set to red, as follows:
Body
{
color:red;
}
4, using the browser to open this HTML file, you will find whether the content of the div (CSS inheritance) or Li's content (home page, Introduction, contact) are displayed in red font, which also shows that the body's descendants automatically inherit its characteristics.
5, the effect of HTML is as follows, where the virtual box is the scope of the DIV:
Second, cascading characteristics:
1, the Web page of an element is likely to be modified by a number of selectors, which caused the collision of selectors, then in the end is whichever selector? Just remember the following priority: Inline selector > ID selector > class selector > tag Selector
2. For example:
(1) Define MYCSS.CSS file
. Red
{
color:red;
}
. Purple
{
Color:purple;
}
#blue
{
Color:blue;
}
#yellow
{
Color:yellow;
}
(2) Define the myhtml.htm file, some of the main contents are as follows:
<link href= "Mycss.css" rel= "stylesheet" type= "Text/css"/>
<body>
<p> This is a text </p>
<p class= "Red" > This is the text with the category selector </p>
<p id= "Blue" class= "Red" > This is the text with ID and category selector </p>
<p style= "Color:orange;" id= "Blue" > this is text with inline and ID selectors </p>
<p class= "Purple red" > This is text with two category selectors </p>
<p id= "Yellow Red" > This is the text with two ID selectors </p>
</body>
(3) Effect:
(4) Explanation:
The first p does not use a selector, so the HTML default display color (black)
The second p uses the class selector, so the color of the class selector takes precedence (red)
The third p uses the ID and class two selectors, because the ID selector has a higher precedence than the class selector, so the color is displayed in blue
The fourth p uses the inline selector and the ID selector, because the in-line selector takes precedence over the ID selector, so the color is displayed in yellow
The fifth P uses two class selectors at the same time, and the browser interprets the page with the color of the first class selector as defined, so the color is displayed in purple
The sixth P uses two ID selectors at the same time, but since the ID selector can only be used for a single tag and globally unique, the browser considers this to be an illegal color with its default value (black)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
