亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

sélecteur

Selector

Le code est le suivant?:

<!doctype html>
<html>
   <head>
      <meta charset="UTF-8">
      <title>選擇器Demo</title>
      <style type="text/css">
         /*1、 
          *  類選擇器 ：redColor
          *  文本顏色為 紅色
          */
         .redColor{
            color:red;
         }
         /**
          * 2、類選擇器：setFont
          * 文字大小為 24px
          */
         .setFont{
            font-size:24px;
         }
         /**
          * 3、分類選擇器 : span.redColor
          * 背景顏色：yellow
          */
         span.redColor{
            background-color:yellow;
         }
         /**
          * 4、將 id 為 container 的元素，class 為 redColor，class 為 important 的 div 元素，文本顏色設(shè)置為 橘子色
          */
         #container,.redColor,div.important{
            color:orange;
         }
      </style>
   </head>
   <body>
      <div class="redColor">這是一個(gè)div元素</div>
      <p class="redColor setFont">這是一個(gè)p標(biāo)記</p>
      <span class="redColor setFont">這是第一個(gè)span</span>
      <span class="setFont">這是第二個(gè)span</span>
   </body>
</html>

Priorité sans !importantDépend de qui est chargé plus tard

Affichage des résultats d'exécution?:

微信圖片_20180314163113.png

Sélecteur d'identification Le code est le suivant :

Jugement prioritaire du sélecteur?: (/* id100>Class 10>Tag 1 */) Le même temps dépend de qui charge après?:

微信圖片_20180314163545.png

<!doctype html>
<html>
   <head>
      <meta charset="UTF-8">
      <title>ID選擇器</title>
      <style type="text/css">
         #banner{
            color:blue;
            background-color:yellow;
         }
      </style>
   </head>
   <body>
      <div id="banner">鋤禾日當(dāng)午</div>
      <p id="banner">汗滴禾下土</p>
      <span>誰知盤中餐</span>  
      <span>粒粒皆辛苦</span>
   </body>
</html>


Affichage de la page?:

微信圖片_20180314165215.png


Continuer les tests?:

<!doctype html>
<html>
   <head>
      <meta charset="UTF-8">
      <title>Document</title>
      <style type="text/css">
         #uname{
            color:gray;
            font-style:italic;/*斜體顯示 等同于<i>*/
         }
         /* #uname 被激活時(shí)，改成非斜體 */
         #uname:active{
            font-style:normal;
         }
         /* #uname 獲取焦點(diǎn)時(shí)，文本為綠色 */
         #uname:focus{
            color:red;
         }
         a:link{
            color:black;
         }
         a:visited{
            color:pink;
         }
         /* #anchor鼠標(biāo)懸停 */
         #anchor{
            color:black;
            text-decoration:none;
         }
         #anchor:hover{
            color:red;
            text-decoration:underline;
         }
         /*banner樣式設(shè)計(jì)*/
         #banner span{
            color:red;
         }
         #banner>span{
            font-size:24px;
         }
         .top>span{
            font-size:48px;
         }
         #banner>.top>span{
            font-size:60px;
         }
      </style>
   </head>
   <body>
      <a id="anchor" href="http://www.oschina.net">我要去oschina.net</a>  
      <p>
         <input type="text" id="uname" value="請(qǐng)輸入用戶名">
      </p>
      
      <a href="http://ipnx.cn" target="_blank">我要去php.cn</a>
      <!-- 
         1、設(shè)置 id 為 banner 中所有的 span 元素的文本顏色為紅色
         2、設(shè)置 "ID為banner中的span元素" 文字大小為 24px
         3、設(shè)置 "ID為banner中class為top中的span元素" 文字大小為 60px
      -->
      <div id="banner">
         <span>ID為banner中的span元素</span>
         <p class="top">
            <span>ID為banner中class為top中的span元素</span>
         </p>
      </div> 
      
      <p class="top">
         <span>不想被任何樣式所影響的span元素</span>
      </p>
   </body>
</html>
Affichage de l'effet?:

Formation continue
||
<?php echo "選擇器";
soumettreRéinitialiser le code