<rp id="wnpn7"><ruby id="wnpn7"></ruby></rp>
<progress id="wnpn7"><track id="wnpn7"><rt id="wnpn7"></rt></track></progress>
<ruby id="wnpn7"></ruby>
<ruby id="wnpn7"><blockquote id="wnpn7"><div id="wnpn7"></div></blockquote></ruby>

    1. <em id="wnpn7"><ruby id="wnpn7"><input id="wnpn7"></input></ruby></em>
      1. <button id="wnpn7"><acronym id="wnpn7"></acronym></button><button id="wnpn7"><acronym id="wnpn7"></acronym></button>

        <rp id="wnpn7"><acronym id="wnpn7"></acronym></rp>

        <li id="wnpn7"><object id="wnpn7"><u id="wnpn7"></u></object></li>
        VB.net 2010 視頻教程 VB.net 2010 視頻教程 python基礎視頻教程
        SQL Server 2008 視頻教程 c#入門經典教程 Visual Basic從門到精通視頻教程
        當前位置:
        首頁 > 網站開發 > css >
        • div+css視頻教程之選擇器分類

         選擇器分類
         
        (一)CSS 派生選擇器
        通過依據元素在其位置的上下文關系來定義樣式,你可以使標記更加簡潔。
        在 CSS1 中,通過這種方式來應用規則的選擇器被稱為上下文選擇器 (contextual selectors),這是由于它們依賴于上下文關系來應用或者避免某項規則。在 CSS2 中,它們稱為派生選擇器,但是無論你如何稱呼它們,它們的作用都是相同的。
        派生選擇器允許你根據文檔的上下文關系來確定某個標簽的樣式。通過合理地使用派生選擇器,我們可以使 HTML 代碼變得更加整潔。
        比方說,你希望列表中的 strong 元素變為斜體字,而不是通常的粗體字,可以這樣定義一個派生選擇器:
        li strong {
            font-style: italic;
            font-weight: normal;
          }
        請注意標記為 <strong> 的藍色代碼的上下文關系:
        <p><strong>我是粗體字,不是斜體字,因為我不在列表當中,所以這個規則對我不起作用</strong></p>
         
        <ol>
        <li><strong>我是斜體字。這是因為 strong 元素位于 li 元素內。</strong></li>
        <li>我是正常的字體。</li>
        </ol>
        在上面的例子中,只有 li 元素中的 strong 元素的樣式為斜體字,無需為 strong 元素定義特別的 class 或 id,代碼更加簡潔。
        再看看下面的 CSS 規則:
        strong {
             color: red;
             }
         
        h2 {
             color: red;
             }
         
        h2 strong {
             color: blue;
             }
        下面是它施加影響的 HTML:
        <p>The strongly emphasized word in this paragraph is<strong>red</strong>.</p>
        <h2>This subhead is also red.</h2>
        <h2>The strongly emphasized word in this subhead is<strong>blue</strong>.</h2>
         
         
        (二)id 選擇器
        id 選擇器可以為標有特定 id HTML 元素指定特定的樣式。
        id 選擇器以 "#" 來定義。
        下面的兩個 id 選擇器,第一個可以定義元素的顏色為紅色,第二個定義元素的顏色為綠色:
        #red {color:red;}
        #green {color:green;}
        下面的 HTML 代碼中,id 屬性為 red 的 p 元素顯示為紅色,而 id 屬性為 green 的 p 元素顯示為綠色。
        <p id="red">這個段落是紅色。</p>
        <p id="green">這個段落是綠色。</p>
        注意:id 屬性只能在每個 HTML 文檔中出現一次。想知道原因嗎,請參閱 XHTML:網站重構。
        id 選擇器和派生選擇器
        在現代布局中,id 選擇器常常用于建立派生選擇器。
        #sidebar p {
                 font-style: italic;
                 text-align: right;
                 margin-top: 0.5em;
                 }
        上面的樣式只會應用于出現在 id 是 sidebar 的元素內的段落。這個元素很可能是 div 或者是表格單元,盡管它也可能是一個表格或者其他塊級元素。它甚至可以是一個內聯元素,比如 <em></em> 或者 <span></span>,不過這樣的用法是非法的,因為不可以在內聯元素 <span> 中嵌入 <p> (如果你忘記了原因,請參閱 XHTML:網站重構)。
        一個選擇器,多種用法
        即使被標注為 sidebar 的元素只能在文檔中出現一次,這個 id 選擇器作為派生選擇器也可以被使用很多次:
        #sidebar p {
                 font-style: italic;
                 text-align: right;
                 margin-top: 0.5em;
                 }
         
        #sidebar h2 {
                 font-size: 1em;
                 font-weight: normal;
                 font-style: italic;
                 margin: 0;
                 line-height: 1.5;
                 text-align: right;
                 }
        在這里,與頁面中的其他 p 元素明顯不同的是,sidebar 內的 p 元素得到了特殊的處理,同時,與頁面中其他所有 h2 元素明顯不同的是,sidebar 中的 h2 元素也得到了不同的特殊處理。
        單獨的選擇器
        id 選擇器即使不被用來創建派生選擇器,它也可以獨立發揮作用:
        #sidebar {
                 border: 1px dotted #000;
                 padding: 10px;
                 }
        根據這條規則,id 為 sidebar 的元素將擁有一個像素寬的黑色點狀邊框,同時其周圍會有 10 個像素寬的內邊距(padding,內部空白)。老版本的 Windows/IE 瀏覽器可能會忽略這條規則,除非你特別地定義這個選擇器所屬的元素:
        div#sidebar {
                 border: 1px dotted #000;
                 padding: 10px;
                 }
         
         
        (三)CSS 類選擇器
        CSS 中,類選擇器以一個點號顯示:
        .center {text-align: center}
        在上面的例子中,所有擁有 center 類的 HTML 元素均為居中。
        在下面的 HTML 代碼中,h1 和 p 元素都有 center 類。這意味著兩者都將遵守 ".center" 選擇器中的規則。
        <h1 class="center">
        This heading will be center-aligned
        </h1>
         
        <p class="center">
        This paragraph will also be center-aligned.
        </p>
        注意:類名的第一個字符不能使用數字!它無法在 Mozilla 或 Firefox 中起作用。
        id 一樣,class 也可被用作派生選擇器:
        .fancy td {
                 color: #f60;
                 background: #666;
                 }
        在上面這個例子中,類名為 fancy 的更大的元素內部的表格單元都會以灰色背景顯示橙色文字。(名為 fancy 的更大的元素可能是一個表格或者一個 div)
        元素也可以基于它們的類而被選擇:
        td.fancy {
                 color: #f60;
                 background: #666;
                 }
        在上面的例子中,類名為 fancy 的表格單元將是帶有灰色背景的橙色。
        <td class="fancy">
        你可以將類 fancy 分配給任何一個表格元素任意多的次數。那些以 fancy 標注的單元格都會是帶有灰色背景的橙色。那些沒有被分配名為 fancy 的類的單元格不會受這條規則的影響。還有一點值得注意,class 為 fancy 的段落也不會是帶有灰色背景的橙色,當然,任何其他被標注為 fancy 的元素也不會受這條規則的影響。這都是由于我們書寫這條規則的方式,這個效果被限制于被標注為 fancy 的表格單元(即使用 td 元素來選擇 fancy 類)。
         
         
        (四)CSS 屬性選擇器
        對帶有指定屬性的 HTML 元素設置樣式。
        可以為擁有指定屬性的 HTML 元素設置樣式,而不僅限于 class 和 id 屬性。
        注釋:Internet Explorer 7 (以及更高版本)在規定了 !DOCTYPE 的情況下支持屬性選擇器。IE6 及更低的版本不支持屬性選擇器。
        屬性選擇器
        下面的例子為帶有 title 屬性的所有元素設置樣式:
        [title]
        {
        color:red;
        }
        親自試一試
        屬性和值選擇器
        下面的例子為 title="W3School" 的所有元素設置樣式:
        [title=W3School]
        {
        border:5px solid blue;
        }
        親自試一試
        屬性和值選擇器 - 多個值
        下面的例子為包含指定值的 title 屬性的所有元素設置樣式。適用于由空格分隔的屬性值:
        [title~=hello] { color:red; }
        親自試一試
        下面的例子為帶有包含指定值的 lang 屬性的所有元素設置樣式。適用于由連字符分隔的屬性值:
        [lang|=en] { color:red; }
        親自試一試
        設置表單的樣式
        屬性選擇器在為不帶有 class 或 id 的表單設置樣式時特別有用:
        input[type="text"]
        {
          width:150px;
          display:block;
          margin-bottom:10px;
          background-color:yellow;
          font-family: Verdana, Arial;
        }
         
        input[type="button"]
        {
          width:120px;
          margin-left:35px;
          display:block;
          font-family: Verdana, Arial;
        }
        相關教程
                
        免费看成年人视频大全_免费看成年人视频在线观看