CSS複合選擇器

時間 2021-01-18

標籤 html 字體 spa code htm utf-8 class meta 欄目 CSS 简体版

原文原文鏈接

交集選擇器
並集選持器
後代選擇器
子元素選擇器
相鄰兄弟選擇器
屬性選擇器

交集選擇器

交集選擇器由兩個選擇器直接鏈接構成，其中第一個選擇器必須是元素選擇器，第二個選擇器必須是類選擇器或者 ID 選擇器，兩個選擇器之間必須連續寫，不能有空格。
交集選擇器選擇的元素必須是由第一個選擇器指定的元素類型，該元素必須包含第二個選擇器對應的 ID 名或類名。交集選擇器選擇的元素的樣式是三個選擇器樣式，即第一個選擇器;html

語法：字體

元素選擇器 . 類選擇器｜ #ID 選擇器 { 
 屬性 1: 屬性值 1；
 屬性 2: 屬性值 2；
}

語法說明：「類選擇器｜ ID 選擇器」表示使用類選擇器，或者使用 ID 選擇器。spa

例：code

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> 使用交集選擇器設置樣式 </title>
<style>
/* 元素選擇器設置邊框和下外邊距樣式 */
div { 
 border: 5px solid red;
 margin-bottom:20px;
}
/* 交集選擇器設置背景顏色 */
div.txt { 
 background:#33FFCC;
}
/* 類選擇器設置字體格式 */ 
.txt { 
 font-style:italic;
}
</style>
</head>
<body>
    <div> 元素選擇器效果 </div>
    <div class="txt"> 交集選擇器效果 </div>
    <span class="txt"> 類選擇器效果 </p>
</body>
</html>

並集選擇器

並集選擇器也叫分組選擇器或羣組選擇器，它是由兩個或兩個以上的任意選擇器組成的，不一樣選擇器之間用「，」隔開，實現對多個選擇器進行「集體聲明」。htm

並集選擇器的特色是所設置的樣式對並集選擇器中的各個選擇器都有效。utf-8

並集選擇器的做用是把不一樣選擇器的相一樣式抽取出來，而後放到一個地方做一次性定義，從而簡化了 CSS 代碼量。it

語法：io

選擇器 1,
選擇器 2,
選擇器 3,
 { 
     屬性 1: 屬性值 1；
     屬性 2: 屬性值 2；
}

語法說明：選擇器的類型任意，既能夠是基本選擇器，也能夠是一個複合選擇器。class

例：meta

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> 使用並集選擇器設置樣式 </title>
<style>
div {
    margin-bottom:10px;
    border:3px solid red;
}
span { 
    font-size:26px;
}
p { 
    font-style:italic;
}
/* 使用並集選擇器設置元素的公共樣式 */
span,
.p1,
#d1 { 
    background:#CCC;
}
</style>
</head>
<body>
     <div id="d1"> 這是 DIV1</div>
     <div> 這是 DIV2</div>
     <p class="p1"> 這是段落一 </p>
     <p> 這是段落二 </p>
     <span> 這是一個 SPAN</div>
</body>
</html>

後代選擇器

後代選擇器又稱包含選擇器，用於選擇指定元素的後代元素。使用後代選擇器能夠幫助咱們更快更確切地找到目標元素。

語法：

選擇器 1 選擇器 2 選擇器 3 { 
    屬性 1: 屬性值 1；
　屬性 2: 屬性值 2；
}

例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> 使用後代選擇器設置樣式 </title>
<style>
#box1 .p1 { /* 後代選擇器 */
    background:#CCC;
}
#box2 p { /* 後代選擇器 */
    background:#CFC;
}
</style>
</head>
<body>
     <div id="box1">
         <p class="p1"> 段落一 </p>
         <p class="p2"> 段落二 </p>
     </div>
     <div id="box2">
         <p class="p1"> 段落三 </p>
         <p> 段落四 </p>
     </div>
     <p class="p1"> 段落五 </p>
     <p> 段落六 </p>
</body>
</html>

子元素選擇器

後代選擇器能夠選擇某個元素指定類型的全部後代元素，若是隻想選擇某個元素的全部子元素，則須要使用子元素選擇器。

語法：

選擇器 1> 選擇器 2 {
      屬性 1: 屬性值 1; 
      屬性 2: 屬性值 2;
}

語法說明：「>」稱爲左結合符，在其左右兩邊能夠出現空格，「選擇器 1> 選擇器 2」的含意爲「選擇做爲選擇器 1 指定元素的全部選擇器 2 指定的子元素」.

例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> 子元素選擇器應用示例 </title>
<style>
h1>span {
    color:red;
}
</style>
</head>
<body>
    <h1> 這是很是很是 <span> 重要 </span> 且 <span> 關鍵 </span> 的一步。</h1>
    <h1> 這是真的很是 <em><span> 重要 </span> 且 <span> 關鍵 </span></em> 的一步。</h1>
</body>
</html>

相鄰兄弟選擇器

若是須要選擇緊接在某個元素後的元素，並且兩者有相同的父元素，能夠使用相鄰兄弟選擇器。

語法:

選擇器 1+ 選擇器 2 {
     屬性 1: 屬性值 1; 
     屬性 2: 屬性值 2;
}

例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> 相鄰兄弟選擇器應用示例 </title>
<style>
h1+p {
     color:red;
     font-weight:bold;
     margin-top:50px;
}
p+p{
     color:blue;
     text-decoration:underline;
}
</style>
</head>
<body>
     <h1> 這是一個一級標題 </h1>
     <p> 這是段落 1。</p>
     <p> 這是段落 2。</p>
     <p> 這是段落 3。</p>
</body>
</html>

屬性選擇器

在 CSS 中，咱們還能夠根據元素的屬性及屬性值來選擇元素，此時用到的選擇器稱爲屬性選擇器。屬性選擇器的使用主要有 2 種形式，

語法:

屬性選擇器 1 屬性選擇器 2...{
     屬性 1: 屬性值 1;
     屬性 2: 屬性值 2;
}

元素選擇器屬性選擇器 1 屬性選擇器 2... {
     屬性 1: 屬性值 1;
     屬性 2: 屬性值 2;
}

語法說明：屬性選擇器的寫法是 [ 屬性表達式 ]，其中屬性表達式能夠是一個屬性名，也能夠是「屬性＝屬性值」等這樣的表達式.

屬性選擇器的應用:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> 屬性選擇器的應用 </title
<style>
[title] {/* 選擇具備 title 屬性的元素 */
     color: #F6F;
}
a[href][title]{/* 選擇同時具備 href 和 title 屬性的 a 元素 */
     font-size: 36px;
}
img[alt] {/* 選擇具備 alt 屬性的 img 元素 */
     border: 3px #f00 solid;
}
p[align="center"] {/* 選擇 align 屬性等於 center 的 p 元素 */
     color: red;
    font-weight: bolder;
}
</style>
</head>
<body>
     <h2> 應用屬性選擇器樣式：</h2>
     <h3 title="Helloworld">Helloworld</h3>
     <a title=" 首頁 "href="#"> 返首頁 </a><br/><br/>
     <img src="miaov.jpg" alt="logo" />
     <p align="center"> 段落一 </p>
     <hr />
     <h2> 沒有應用屬性選擇器樣式
     <h3>Helloworld</h3>
     <a href="#"> 返首頁 </a><br/><br/>
     <img src="miaov.jpg">
     <p align="right"> 段落二 </p>
</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。