五、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
jquery、css 的選擇器(逗號/空格/英文句號/大於號/加號/波浪號)備忘
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 是一個類選擇器的書寫方式,