HTML Base-css-Selector

<! DOCTYPE html>

<meta charset= "UTF-8" > <!--Specify encoding--
<title>liudaozhang</title>
<link rel= "shortcut icon" href= "Http://www.xxxxx.cn:80/wp-content/logo.jpg" >
<!--<link rel= "stylesheet" href= "Jjj.css" > This is the third type of ___ introduced css-->
<!--<link rel= "stylesheet" href= "Jjj2.css" > This is the third type of ___ introduced css-->
<style>
/*id Selector This is the second way */
/* #i1 {*/
/*height:100px;*/
/*width:100px;*/
/**/
/*}*/
/* This will refer to the label in the style first, and then in the reference link jjj2 try the label in the JJJ */


/*class Selector */
/*.c1{*/
/*height:100px;*/
/*width:100px;*/
/**/
/*}*/


/* Tag Selector */
/*div {*/
/*height:100px;*/
/*width:100px;*/
/**/
/*}*/

/* Tag level Selector--inline label cannot apply width higher attribute */
/*div span{*/
/*height:100px;*/
/*width:100px;*/
/**/
/*}*/

/*class Level Selector */
/*.C2 span{*/
/*height:100px;*/
/*width:100px;*/
/**/
/*}*/

/*id Level Selector */
/* #i2 span{*/
/*height:100px;*/
/*width:100px;*/
/**/
/*}*/


/*id Combo Selector */
/* #i1, #i2, #i3 {*/
/*height:100px;*/
/*width:100px;*/
/**/
/*margin-top:5px; Interval effect */
/*}*/


/*class Combo Selector */
/*.c1,.c2,.c3{*/
/*height:100px;*/
/*width:100px;*/
/**/
/*margin-top:5px;*/
/*}*/

/* Property Selector */
/*div[jjj= ' abc ']{*/
/*height:100px;*/
/*width:100px;*/
/**/
/*margin-top:5px;*/
/*}*/

</style>


<body>

<!--1, you can add a style property to any tag, adding CSS styles--
<!--<div style= "height:100px;width:100px;border:red 2px solid;" ></div>-->
<!--<div id= "I1" ></div> introducing I1 Selector--

<!--2, head in style add CSS style--
<!--understanding: Added an id attribute to the tag his property is I1 in the head through the style tag, in the way of the ID selector #i1写了一个css样式 He cites the DIV on the label--
<!--simply put the ID selector in the head I1 wrote the CSS style in the following DIV tag that references this--

<!--3, introduced css-->
<!--<div id= "I2" ></div> introducing i2 Selector--
<!--selectors are unique and cannot be repeated without repeating the error--

<!--test the priority of three ways to introduce CSS styles--
<!--<div id= "I1" style= "height:100px;width:100px;" ></div>-->
<!--first refer to & #45;& #45; This is to test the priority so the selector is used i1-->
<!--1, the CSS style property in the tag has the highest precedence, that is, the precedence level behind the DIV is highest--
<!--2, the introduction of the CSS and the head in the style of the label priority is mainly seen in the head is from the next to the last look at the bottom of the first to be quoted--

<!--ID Selectors cannot be duplicated but class is repeatable--

<!--<div class= "C1" ></div> class selector--
<!--<div class= "C1" ></div>-->

<!--<div></div>/* Tag Selector */-->

<!--<div>-->
<!--inline labels do not apply wide & #45;& #45; hierarchy Selector--
<!--<span>1</span>-->
<!--</div>-->

<!--<div> class level Selector--
<!--inline labels do not apply wide & #45;& #45; hierarchy Selector--
<!--<div class= "C2" >-->
<!--<span>12222</span>-->
<!--</div>-->
<!--</div>-->


<!--<div> ID level Selector--
<!--<div id= "I2" >-->
<!--<span>2222</span>-->
<!--</div>-->
<!--</div>-->

<!--<div id= "i1" ></div> ID Combo Selector--
<!--<div id= "I2" ></div>-->
<!--<div id= "i3" ></div>-->


<!--<div class= "C1" ></div> class combo Selector--
<!--<div class= "C2" ></div>-->
<!--<div Class= "C3" ></div>-->


<!--<div jjj= "abc" ></div> property Selector--

</body>

HTML Base-css-Selector