資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究如何為每個在其前面緊鄰有元素的元素設定樣式？
選擇器是 CSS 樣式的重要組成部分，因為應用於元素的所有屬性都是使用選擇器完成的；也可以根據元素與其他元素的關係來選擇元素，例如具有前置元素或系列中任何其他元素的元素。有兄弟組合器、子組合器和相鄰兄弟組合器。
在本文中，我們將瞭解如何為在其前面緊鄰有元素的元素設定樣式。
為帶有相鄰元素的元素設定樣式
可以使用相鄰兄弟選擇器輕鬆地為彼此相鄰的元素設定樣式，它將選擇緊鄰或位於指定選擇器標籤旁邊的元素，並且它只能選擇一個緊鄰指定標籤的標籤。讓我們看看相鄰兄弟選擇器的語法。
語法
former_element + target_element {properties to be applied}
我們用於選擇元素的選擇器以及 (+) 選擇器都是不同型別的組合器，在這種情況下，兩個選擇器將透過它們之間的 (+) 選擇器組合在一起。為了更好地理解這一點，讓我們看一個例子。
示例
該選擇器將只選擇一個接一個出現的兄弟元素，這意味著這兩個元素將共享同一個父元素。讓我們看看示例程式碼。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of styling every element which will be adjacent item right before it</title>
<style>
h1 {
color: lightblue;
}
img + p {
color: yellow;
}
img + p + p {
color: darkblue;
img + p {
color: yellow;
}
}
</style>
</head>
<body>
<center>
<h1>Hello, welcome to an example</h1>
<img src="https://tutorialspoint.tw/coffeescript/images/coffeescript-mini-logo.jpg" alt="scenery image" />
<p>this is the first paragraph coming after the image</p>
<p>this is the second paragraph coming after the image</p>
<p>this is the third paragraph coming after the image</p>
</center>
</body>
</html>
在上面的程式碼中，我們首先建立了一個標題標籤，然後在標題之後使用了影像，然後添加了三行段落。我們使用兄弟選擇器為它們設定了樣式。影像選擇器和段落選擇器之間的 (+) 符號告訴我們影像和段落之間的關係。
在上面的輸出中，我們可以看到標題及其下方的段落使用兄弟組合器設定了樣式。
組合器或選擇器將分離兩個選擇器，在本例中是影像和第一行段落，然後是影像和第二行段落。第二個元素必須緊跟第一個元素，並且兩者都應該是同一個父元素的子元素，如下面的程式碼所示。
img+p{
color:red;
}
在上面的程式碼中，您可以看到影像為第一個子元素，第二個子元素與兄弟聯結器連線。
示例
讓我們再看一個例子來更好地理解這個屬性。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Another example of the sibling connector </title>
<style>
div+p {
font-weight: bold;
color: lightgreen;
margin: 0px;
font-size: 37px;
text-align: center;
}
h2 {
color: lightblue;
}
p {
text-align: center;
}
div {
text-align: center;
}
</style>
</head>
<body>
<center>
<h1>Hi, this is an example </h1>
<div>An example of Adjacent sibling selector property</div>
<p>How is your day going?</p>
<div>
<div>This is the child element</div>
<p>Good morning</p>
</div>
<p>Good Evening</p>
<p>Good Night</p>
</center>
</body>
</html>
在上面的程式碼中建立了標題和容器以及段落，然後在 CSS 部分，我們為標題設定了顏色以進行區分，之後使用了帶有段落標籤的兄弟組合器，因此我們能夠使用兄弟組合器為段落和 div 設定樣式。
讓我們看看使用以下程式碼後將獲得的輸出。
在上面的示例中，您可以看到標題標籤具有另一種顏色，而 div 和段落標籤（div 和段落標籤）具有相同的顏色，因為我們使用了兄弟選擇器。
什麼是兄弟選擇器？
有兩個兄弟聯結器，一個是通用兄弟聯結器，另一個是相鄰兄弟選擇器。它主要用於選擇共享相同父元素的一組元素。
相鄰兄弟選擇器選擇緊鄰或位於指定標籤旁邊的元素，並且還選擇一個緊鄰指定標籤的標籤。
(+) 用於相鄰兄弟選擇器
(~) 用於通用兄弟選擇器
結論
聯結器用於指定兩個選擇器之間的關係，相鄰兄弟選擇器也是這些聯結器的一部分。(+) 符號將用於選擇緊鄰第一個選定元素的元素。這些選擇器允許開發人員為彼此相鄰的元素或具有相同父元素的元素設定樣式。
在本文中，我們看到了如何為每個具有…的元素設定樣式
66 次檢視
