选择器的结构关系

 1 doctype html>
 2 <html lang="en">
 3      <head>
 4          <meta charset="UTF-8">
 5          <meta name="Generator" content="EditPlus®">
 6          <meta name="Author" content="">
 7          <meta name="Keywords" content="">
 8          <meta name="Description" content="">
 9          <title>Documenttitle>
10          <style type="text/css">
11              /* .box1 .txt1 .tnt1{
12                 background:red;
13             } */
14             /* .box1 .tnt1{
15                 background:red;
16             } */
17             .box1 .tnt1{
18                 font-size:36px; 
19             }
20             .box1>span{
21                 background:red;
22             }
23             .box1,.txt1,.tnt1{
24                 border:1px solid red;
25             }
26             div.txt1{
27                 background:pink;
28             }
29             .box1 + span{
30                 font-size:30px;
31             }
32          style>
33     head>
34     <body>
35         
44          <div class="box1">
45             <p class="txt1">
46                 我是佩奇妈妈;
47                 <span class="tnt1">小猪佩奇一号span>
48                 <span>小猪佩奇二号span>
49                 <span>小猪佩奇三号span>
50                 <span>小猪佩奇四号span>
51             p>
52             <span>佩奇爸爸来了!span>
53         div>
54         <span>佩奇爷爷来了!span> br>
55         <div class="txt1">我是佩奇妈妈!p>
56     body>
57 html>

 

转载于:https://www.cnblogs.com/soTired/p/10152917.html

你可能感兴趣的:(选择器的结构关系)