CSS學習——複合選擇器
阿新 • • 發佈：2018-12-26
目錄
CSS複合選擇器
複合選擇器是由兩個或多個基礎選擇器，通過不同的方式組合而成的，目的是為了可以選擇更準確更精細的目標元素標籤。
交集選擇器
交集選擇器由兩個選擇器構成，其中第一個為標籤選擇器，第二個為class選擇器，兩個選擇器之間不能有空格，如h3.special
h3（標記選擇器）.class（類別選擇器） {color:red; font-size:25px;}記憶技巧：
交集選擇器是並且的意思。即…又…的意思
比如： p.one 選擇的是：類名為 .one 的 段落標籤
用的比較少，不太建議使用
並集選擇器
並集選擇器(CSS選擇器分組)是各個選擇器通過逗號
.class（類別選擇器），h3（標記選擇器） {color:red; font-size:25px;}
記憶技巧：
並集選擇器 和 的意思，就是說，只要逗號隔開的，所有選擇器都會執行後面樣式。
比如 .one,p,#test {color:#F00;} 表示 .one 和 p 和 #test 這三個選擇器都會執行顏色為紅色。 通常用於集體宣告。
<head> 【網頁中顯示為：】
後代選擇器
後代選擇器又稱為包含選擇器，用來選擇元素或元素組的後代，其寫法就是把外層標籤寫在前面，內層標籤寫在後面，中間用空格分隔。當標籤發生巢狀時，內層標籤就成為外層標籤的後代。
.class（類別選擇器），h3（標記選擇器） {color:red; font-size:25px;}
子孫後代都可以這麼選擇。或者說，它能選擇任何包含在內的標籤。
<head>
<title></title>
<style type="text/css">
div p {
color: pink;
}
.si p {
color: blue;
}
</style>
</head>
<body>
<p>A先生</p>
<div class="si">
<p>B先生</p>
</div>
<div>
<p>C先生</p>
</div>
</body>
【網頁中顯示為：】
子元素選擇器
子元素選擇器只能選擇作為某元素子元素的元素。其寫法就是把父級標籤寫在前面，子級標籤寫在後面，中間跟一個>進行連線，注意，符號左右兩側各保留一個空格。
.class（類別選擇器）>h3（標記選擇器） {color:red; font-size:25px;}
這裡的子，指的是親兒子，不包含孫子、重孫子之類。
比如： .demo > h3 {color:red;} 說明 h3 一定是demo 親兒子。 demo 元素包含著h3。
<head>
<title></title>
<style type="text/css">
.nav li { /* 空格 後代選擇器 可以選出 兒子 孫子 重孫子。。*/
color: red;
}
.nav > li {/* 大於號 子元素選擇器 只選擇 兒子 */
color: skyblue;
}
</style>
</head>
<body>
<ul class="nav">
<li>一級選單
<ul>
<li>二級選單</li>
<li>二級選單</li>
<li>二級選單</li>
</ul>
</li>
</ul>
</body>
【網頁中顯示為：】
綜合案例
<head>
<title></title>
<style type="text/css">
/*登入的顏色改為紅色，同時主導航欄裡所有連結改為藍色*/
.site-r a {
color: red;
}
.nav a {
color:skyblue;
}
/*主、側導航欄裡文字都改成14畫素且是微軟雅黑*/
.nav,
.sitenav {
font-size: 14px;
font-family:"microsoft yahei" ;
}
/*主導航欄裡的一級菜單鏈接顏色改為綠色*/
.nav > ul > li >a {
color: green;
}
</style>
</head>
<body>
<!-- 主導航欄 -->
<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-1">左側側導航欄</div>
<div class="site-r"><a href="#">登入</a></div>
</div>
</body>
【網頁中顯示為：】
屬性選擇器
選取標籤帶有某些特殊屬性的選擇器，我們稱為屬性選擇器。
| **選擇器 | **示例 | **含義 |
|---|---|---|
| E[attr] | 存在attr屬性即可 | |
| E[attr=val] | 屬性值完全等於val | |
| E[attr*=val] | 屬性值裡包含val字元並且在“任意”位置 | |
| E[attr^=val] | 屬性值裡包含val字元並且在“開始”位置 | |
| E[attr$=val] | 屬性值裡包含val字元並且在“結束”位置 |
<head>
<title></title>
<style type="text/css">
a[title] {
color: red
}
input[type=text] {
color: pink;
}
</style>
</head>
<body>
<a href="#" title="我是百度">百度</a>
<a href="#" title="我是新浪">新浪</a>
<a href="#">搜狐</a>
<a href="#">網易</a>
<a href="#">優酷</a>
<input type="text" value="文字框">
<input type="text" value="文字框">
<input type="submit">
<input type="submit">
<input type="reset">
<input type="reset">
</body>
【網頁中顯示為：】
<head>
<title></title>
<style type="text/css">
div[class^=font] {/*class^=font表示font在開始位置就行了*/
color: pink;
}
div[class$=footer] {/*class$=footer表示footer在結尾位置就行了*/
color: skyblue;
}
div[class*=tao] {/*class*=tao表示tao在任意位置都可以*/
color: green;
}
</style>
</head>
<body>
<div class="font12">屬性選擇器</div>
<div class="font12">屬性選擇器</div>
<div class="font24">屬性選擇器</div>
<div class="font24">屬性選擇器</div>
<div class="24font">屬性選擇器</div>
<div class="sub-footer">屬性選擇器</div>
<div class="jb-footer">屬性選擇器</div>
<div class="new-nav-tao">屬性選擇器</div>
<div class="new-tao-header">屬性選擇器</div>
</body>
【網頁中顯示為：】
偽元素選擇器（CSS3）
- E::first-letter文字的第一個單詞或字（如中文、日文、韓文等）
- E::first-line文字第一行
- E::selection可改變選中文字的樣式
<head>
<title></title>
<style type="text/css">
/*.demo 類選擇器
:first-child 偽類選擇器
::first-letter 偽元素選擇器*/
p::first-letter {/*選擇第一個字*/
color: red;
font-size: 30px;
}
p::first-line {/*選擇第一行*/
color: pink;
}
p::selection {/*當我們選中文字時可變換顏色*/
color: green;
}
</style>
</head>
<body>
<h1>freestyle</h1>
<p>英語詞彙，一般指即興的、隨性的隨意的發揮，例如HIPHOP說唱中的freestyle就是即興說唱的意思。2017年6月，因吳亦凡在國產說唱綜藝《中國有嘻哈》中屢次提起freestyle而火遍網路。
2017年12月18日，“你有freestyle嗎？”入選國家語言資源監測與研究中心釋出的2017年度十大網路用語”。</p>
</body>
【網頁中顯示為：】
4.E::before和E::after
在E元素內部的開始位置和結束位建立一個元素，該元素為行內元素，且必須要結合content屬性使用
div::before {
content: "開始";
}
div::after {
content: "結束";
}
<head>
<title></title>
<style type="text/css">
/*before 和after 是在盒子div 的內部前面或者後面插入內容*/
div::before {
content: "我";
}
div::after {
content: "18歲";
}
</style>
</head>
<body>
<div>今年</div>
</body>
【網頁中顯示為：】
E:after、E:before在舊版本里是偽元素，CSS3的規範裡“:”用來表示偽類，“::”用來表示偽元素，但是在高版本瀏覽器下E:after、E:before會被自動識別為E::after、E::before，這樣做的目的是用來做相容處理。
E:after、E:before後面的練習中會反覆用到，目前只需要有個大致瞭解
“:”與“::”區別在於區別偽類和偽元素