Html5 and CSS3 (selectors)

<!--
Author: Offline
Time: 2018-03-21
Description: 1. Full selector
*{attribute1:attribute value2;attribute2:attribute value2;...;} 2.Element
(tag) selector
Tag name{attribute1:attribute value2;attribute2:attribute value2;...;}
Element (label) selector priority and full selector
3.Class (class) selector.ClassName
{attribute1:attribute value 2; attribute 2: attribute value 2; ...; }
class selector is higher than full selector
class selector is higher than element selector
4. id selector
#id name { attribute 1: attribute value 2; attribute 2: attribute value 2; ...; }
id takes precedence over class selector, element selector, select all selector
5. grouping (for tags) selector
tag name 1, tag name 2 { attribute 1: attribute value 2; attribute 2: attribute value 2; ...; }
6. descendant selector
tag name > tag name { attribute 1: attribute value 2; attribute 2: attribute value 2; ...; }
7. descendant selector
tagname tagname{attribute1:attributevalue2;attribute2:attributevalue2;...;}

-->

 1 <!DOCTYPE html >
 2 <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
 3     <head>
 4         <meta  http-equiv="content-type" content="text/html; charset=utf-8"> 
 5         <title></title>
 6         <style type="text/css">
 7             
 8             p,span,h1,h2{
 9                 
10                font-size: x-large;
11                 
12             }
13             .c1{
14                 background-color: #7FFF00;
15             }
16             p{
17                 background-color: cadetblue;
18             }
19             
20             
21             #d1{
22                 width: 600px;
23                 height: 500px;
24                 font-family: "agency fb";
25                 border: 1px solid yellow;
26             }
27             #d2{
28                 width: 400px;
29                 height: 300px;
30                 font-family: "agency fb";
31                 border: 1px solid goldenrod;
32             }
33             
34             
35             
36             #d1>span{
37                 color: #DAA520;
38             }
39             #d1 span,h1,h2{
40                 color:chartreuse;
41             }
42             
43             
44         </style>
45     </head>
46     <body>
47         
48         
49         <p>段落标签</p>
50         <span class="c1" >文本标签</span>
51         <div id="d1">
52             <span> text tags </ span > 
53              < span ></ span > 
54              < div id ="d2" > 
55                  < h1 > first- level tags </ h1 > 
56                  < h2 > secondary tags </ h2 > 
57              </ div > 
58          </ div > 
59          
60          
61      </ body > 
62  </ html >

 

Guess you like

Origin http://43.154.161.224:23101/article/api/json?id=324938106&siteId=291194637