1. 程式人生 > >五、css複合選擇器

五、css複合選擇器

交集選擇器

交集選擇器由兩個選擇器構成,其中第一個為標籤選擇器,第二個為class選擇器,兩個選擇器之間不能有空格,如div.classname1

並集選擇器

各個選擇器通過逗號連線而成的。
div,p,.classname1,#id1{width:2px;}

後代選擇器

當標籤發生巢狀時,內層標籤就成為外層標籤的後代。
後代選擇器又稱為包含選擇器,用來選擇元素或元素組的後代,其寫法就是把外層標籤寫在前面,內層標籤寫在後面,中間用空格分隔。
div p{}

<div>
    <p></p>
</div>

子元素選擇器

子元素選擇器只能選擇作為某元素子元素的元素。其寫法就是把父級標籤寫在前面,子級標籤寫在後面,中間跟一個 > 進行連線。注意,符號左右兩側各保留一個空格。
div>p{} 這裡選擇的只有id=p1的p標籤。這裡的子 指的是 親兒子 不包含孫子 重孫子之類。

<div>
    <p id="p1">
        <p></p>
    </p>
</div>

測試題

<div class="nav">    <!-- 主導航欄 -->
  <ul>
    <li
>
<a href="#">公司首頁</a></li> <li><a href="#">公司簡介</a></li> <li><a href="#">公司產品</a></li> <li> <a href="#">聯絡我們</a> <ul> <li><a href="#">公司郵箱</a></li
>
<li><a href="#">公司電話</a></li> </ul> </li> </ul> </div> <div class="sitenav"> <!-- 側導航欄 --> <div class="site-l">左側側導航欄</div> <div class="site-r"><a href="#">登入</a></div> </div>

在不修改以上程式碼的前提下,完成以下任務:

1.連結 登入 的顏色為紅色,同時主導航欄裡面的所有的連結改為橙色
2.主導航欄和側導航欄裡面文字都是14畫素並且是微軟雅黑
3.主導航欄裡面的一級菜單鏈接文字顏色為綠色

參考:

    <style>
       .site-r a {
          color: red;
       }
       .nav a {  /*後代選擇器*/
          color: orange;
       }

       .nav, .sitenav {   /*並集選擇器*/
            font: 14px "微軟雅黑";
       }
       .nav> ul > li > a {  /*子代選擇器*/
        color: green;   /*123123123  */
       }
    </style>

偽類選擇器

偽類選擇器用於向某些選擇器新增特殊的效果。
語法
:hover{}

連結偽類選擇器

a:link {color: #FF0000}     /* 未訪問的連結文字顏色 */
a:visited {color: #00FF00}  /* 已訪問的連結文字顏色 */
a:hover {color: #FF00FF}    /* 滑鼠移動到連結上時文字的顏色 */
a:active {color: #0000FF}   /* 選定的連結文字顏色 */

相關推薦

css複合選擇

交集選擇器 交集選擇器由兩個選擇器構成,其中第一個為標籤選擇器,第二個為class選擇器,兩個選擇器之間不能有空格,如div.classname1 並集選擇器 各個選擇器通過逗號連線而成的。 div,p,.classname1,#id1{width:

CSS--複合選擇

CSS複合選擇器 複合選擇器是由兩個或多個基礎選擇器,通過不同的方式組合而成的,目的是為了可以選擇更準確更精細的目標元素標籤。 交集選擇器 交集選擇器由兩個選擇器構成,其中第一個為標籤選擇器,第二個為class選擇器或ID選擇器,兩個選擇器之間不能有空格. p.類名{

006---css複合選擇(交集選擇,並集選擇,後代選擇,子元素選擇,屬性選擇,偽元素選擇

複合選擇器是由兩個或讀個基礎選擇器,通過不同的方式組合成的,目的是為了可以選擇更準確的目標元素。一、交集選擇器例如:<div class="orange">I am P1</div> <p class="orange">I am P2<

css複合選擇的使用規則 及 css優先順序判定

css複合選擇器的使用規則 1、id巢狀class #myid.myclass:<p id="sp" class="myclass"></p>。 2、一個元素標籤使用多個class。.important.warning <p class="im

jquerycss選擇(逗號/空格/英文句號/大於號/加號/波浪號)備忘

jQuery、CSS常用選擇器 符號 描述 示例 說明 緊接無符號 相當於”並且“關係 input.k-textbox{    ... } 選出input並且包含k-textbox類的元素 , (逗號) 選擇

css複合選擇及總結

1. 後代選擇器 概念:後代選擇器又稱為包含選擇器。 作用:用來選擇元素或元素組的子孫後代。      其寫法就是把外層標籤寫在前面,內層標籤寫在後面,中間用空格分隔,先寫父親爺爺,在寫兒子孫子。 格式:父級 子級{屬性:屬性值;屬性:屬性值;}      語法

HTML &CSS複合選擇中的交集選擇並集選擇後代選擇子元素選擇相鄰兄弟選擇屬性選擇

複合選擇器是通過基本選擇器進行組合後構成的,常用的複合選擇器有:交集選擇器、並集選擇器、後代選擇器、子元素選擇器、相鄰兄弟選擇器和屬性選擇器等。 1. 交集選擇器 交集選擇器由兩個選擇器直接構成

Web前端學習筆記——CSS樣式外觀複合選擇

CSS字型樣式屬性 font-size:字號大小 font-size屬性用於設定字號,該屬性的值可以使用相對長度單位,也可以使用絕對長度單位。其中,相對長度單位比較常用,推薦使用畫素單位px,絕對長度單位使用較少。具體如下: font-family:字型 fo

CSS之萬用字元選擇複合選擇

一、萬用字元選擇器 1、 2、 執行結果:作用於所有的標籤,所有文字顏色都變成了紅色 二、符合選擇器 1、複合選擇器就是把上面的幾個單獨的基本選擇器混合來使用 2、 ① ② 3、 4、 ② ③ 5、 ① ② 6、

HTML學習筆記 CSS學習選擇節 (原創)

ext spa family 如果 styles ctype css gre utf <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <

HTML學習筆記 CSS學習選擇案例 第節 (原創) 參考使用表

樣式 back ack aid head 派生選擇器 char logs pan <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

呆呆鍵盤手11.13號學到的有關文字css偽類選擇浮動的內容

1.文字css   <ins></ins>下劃線標記   <del></del>刪除線標記   文字對齊:text-align-left/center/right   文字首行縮排:text-indent    單位px em   

基本CSS選擇,複合選擇,後代選擇

基本CSS選擇器有標記選擇器、類別選擇器、ID選擇器3種1。標記選擇器     每一種HTML標記的名稱都可以作為相應的標記選擇器的名稱,如h1,p,等等2。類別選擇器     類別選擇器的名稱可以由使用者自定義   格式如下:.class{color:green;font

css交集選擇並集選擇兄弟選擇

一,交集選擇器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>15-css交集選擇器.

CSS後代選擇子元素選擇相鄰兄弟選擇

後代選擇器 後代選擇器(descendant selector)又稱為包含選擇器。 後臺選擇器可以選擇作為某元素後代的元素。 例子:如果只希望h1元素中的em元素應用樣式,可以這樣寫:em元素:強調文字 h1 em {color:red;} <h1>Thi

css派生選擇id選擇選擇屬性選擇

1.派生選擇器 也叫上下文選擇器,可以根據上下文關係來定義樣式。無需為特別為元素設定id 或者class,使程式碼更簡單。 例如.希望列表中的,<strong>變成斜體。 li strong { font-style: italic; font-weight:

第二天筆記-選擇(標籤選擇選擇css命名規範谷歌案例多類名選擇id選擇萬用字元選擇偽類選擇

四、選擇器 要想將CSS樣式應用於持定的HTML元素,首先需要找到該目標元素。在CSS中,執行這一任務的樣式規則部分則成為選擇器(選擇符)。 (一)標籤選擇器(元素選擇器) 標籤選擇器是隻用於HTML標籤名作為選擇器,按標籤名分類,為頁面中某一類標籤指定統

CSS學習——複合選擇

目錄 CSS複合選擇器 複合選擇器是由兩個或多個基礎選擇器,通過不同的方式組合而成的,目的是為了可以選擇更準確更精細的目標元素標籤。 交集選擇器 交集選擇器由兩個選擇器構成,其中第一個為標籤選擇器,第二個為class選擇器,兩個選擇器之

css 的基本選擇複合選擇,後代選擇

基本CSS選擇器有標記選擇器、類別選擇器、ID選擇器3種1。標記選擇器    每一種HTML標記的名稱都可以作為相應的標記選擇器的名稱,如h1,p,等等2。類別選擇器    類別選擇器的名稱可以由使

CSS樣式之複合選擇

1.交集選擇器 交集選擇器使用的方法是其中一個為HTML的標籤,另外一個是類選擇器,示例如下: p.one  解釋: p是HTML中的<p>標籤 , .one 是一個類選擇器的書寫方式,