Zusammenfassung der CSS-Selektorübung-CSS-Tutorial-php.cn

Zusammenfassung der CSS-Selektorübung

高洛峰

Freigeben： 2017-03-27 17:09:53

Original

2080 Leute haben es durchsucht

Übung 1:

1. Übung zur Verwendung des Klassenselektors:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
           <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
           <title>类选择器使用示例</title>
           <style type="text/css">
                 .red
                 {
                       color:red; 
                       font-size:12px; 
                 }
                 .blue
                 {
                       color:blue;
                       font-size:20px;
                  }
            </style>
    </head>
    <body>
            <p>无类选择器效果</p>
            <p class="red">类选择器red效果</p>
            <p class="blue">类选择器blue效果</p>
            <h3 class="blue">同一个类别选择器可以使用到另外的标记上</h3>    
    </body>
</html>

Nach dem Login kopieren

3 :

Effekt der ersten Zeile: Da es keine Selektordefinition für Markierung P gibt, werden die Standardfarbe und -größe angezeigt. Zusammenfassung der CSS-Selektorübung

Effekt der zweiten Zeile: Da die rote Klassenauswahl für Markierung P verwendet wird dritte Wirkungslinie: Da der Bule-Klassenselektor für Markierung P verwendet wird, wird die Schriftart in Blau und mit einer Größe von 20 Pixeln angezeigt.

Vierte Wirkungslinie: Dies zeigt, dass derselbe Klassenselektor auf verschiedenen verwendet werden kann Zusätzlich zu

kann es auch

sein. Es ist besonders erwähnenswert, dass der Inhalt den blauen Klassenselektor verwendet wird in Blau mit einer Größe von 20 Pixeln angezeigt und spiegelt auch die Eigenschaften der Marke

wider. Dieser Punkt wird später behandelt.

Übung 2:

1. Tag-Selektor und

ID-Selektor

Übung:

2. Wirkung:

3. Erläuterung:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
       <head>
               <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
               <title>标记选择器和ID选择器练习</title>
               <style type="text/css">
                       /*
                        * 标记选择器定义
                        */
                       p
                       {
                               color:blue;
                       }
                      /*
                       * 交集复合选择器定义
                       */
                      p.special
                      {
                              color:red;
                      }
                     /*
                      * ID选择器定义
                      */
                     #special
                     {
                              color:green;
                     }
               </style>          
       </head>
       <body>
               <p>普通段落文本</p>
               <h3>普通h3标记文本</h3>
               <p class="special">指定了special类选择器的p段落文本</p>
               <h3 id="special">指定了special的ID选择器的h3标题文本</h3>  
       </body>
</html>

Nach dem Login kopieren

Effekt der ersten Zeile: Da der Markierungsselektor p definiert ist, wird der Inhalt in Absatz p blau angezeigt.

Die zweite Zeile von Effekten: Da der Tag-Selektor h3 nicht definiert ist, wird der Inhalt im Titel h3 standardmäßig in Schwarz angezeigt. Zusammenfassung der CSS-Selektorübung

Die dritte Reihe von Effekten: Da der Tag-Selektor p und der Klassen-Selektor Special verwendet werden Gleichzeitig entspricht dies der Definition des Kreuzungsselektors, sodass der Inhalt in der durch den Kreuzungsselektor p.special definierten Form angezeigt wird, sodass er in Rot angezeigt wird.

Die vierte Zeile Wirkung: Aufgrund der Verwendung des ID-Selektors wird gleichzeitig die Standardverarbeitung von h3 verwendet, sodass der Inhalt im Titel h3 sowohl grün ist als auch in der durch h3 definierten Schriftgröße angezeigt wird 3:

1. Union-Selektor-Übung:

2 🎜>

3. Erklärung:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
         <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
         <title>标记选择器和ID选择器练习</title>
         <style type="text/css">
              /*
               * 标记选择器定义
               */
               h1,h2,h3,p
               {
                    color:purple;
                    font-size:15px;
               }
              /*
               * 并集选择器定义
               */
               h2.special, .special, #one
              {
                    text-decoration:underline;
              }
         </style>          
    </head>
    <body>
          <h1>示例文字h1</h1>  
          <h2 class="special">示例文字h2</h2>
          <h3>示例文字h3</h3>
          <p>示例文字p1</p>
          <p class="special">示例文字h2</p>
          <p id="one">示例文字p3</p>
    </body

Nach dem Login kopieren

Keine weitere Erklärung, Sie können es tatsächlich üben und werden den Grund natürlich verstehen.

Das obige ist der detaillierte Inhalt vonZusammenfassung der CSS-Selektorübung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!