Three major selectors for CSS

Three major selectors

2. Derived selectors, his grammatical features are: tag name {} 

   Next example

   body{

   babackground-image:url ("img/5.jpg");

   padding:0px; background-repeat:no-repeat;

   }

   This is the use of a simple background derivation selector, as you can see from this example that this style can only be used for body tags, and of course, The derived selector can also be used to see an example

   DL  dd{

    

     display:none;

     width:80px;

     height:30px;

    }

   Here's the meaning of the DD label within the DL style is this.  

4. ID selector with syntax features: #id名称 {}

   We're looking at an example

   #logo {

     color:blue;

     font-style:inherit;

     font-size:60px

     width:100;

     height:60px;

    

    }

   Below is the reference ID selector

     <div id= "logo" ><center style= "font-size:50px;" > My web Design </center> </div>

   from this simple instance it is also easy to see that only the ID is the logo mark, in order to use the # The style of the logo

6. Class selector, which is characterized by the following syntax:. Class Name {}

   Now let's look at a simple example.

   . back{

   Background-image:url ("img/5.jpg");

   padding:0px; " >background-repeat:no-repeat;

   }

   The following reference to the class selector

   <div class= "Back" ></div>

   The difference between the ID selector and the class selector can also be seen here, as long as the class selector is class= "back", which can refer to the class selector, that is, the ID selector can only be used in a tag, because the ID of each tag cannot be duplicated, but the class selector can be used in each tag.

7. Look at the hybrid use of three selectors

   #menu DL dd{

   Display:none;

   width:80px;

   height:30px;

   }

   Next it's a reference

   <div id= "menu" >

   The ID selector and the derived selector are used here, which is the DD style within the tag div with the ID of menu as above.

   . Menu DL dd{

   Display:none;

   width:80px;

   height:30px;

   }

   Next it's a reference

   <div class= "Menu" >

   This is a mix of class selectors and derived selectors, that is, the DD style inside the tag div with the class name menu as above.