CSS 相鄰兄弟選擇器

阿新 • • 發佈：2018-12-26

先看定義，相鄰兄弟選擇器（Adjacent sibling selector）可選擇緊接在另一元素後的元素，且二者有相同父元素。
上示例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    p+p {
        color: pink;
    }

    div+div+div+div{
        color 
: pink;
    }
    </style>
</head>

<body>
    <p>P1</p>
    <p>P2</p>
    <p>P3</p>
    <p>P4</p>
    <div>DIV1</div>
    <div>DIV2</div>
    <div>DIV3</div>
    <div>DIV4</div>
</body>

</html 
>

結果：
這裡寫圖片描述
說好的相鄰兄弟選擇呢，字面上理解不是應該只選擇到P2嗎，可是卻連P3，P4都選擇了，這就是“3P” Σ(⊙▽⊙”a ！
別急，讓我們仔細看看

p+p {
        color: pink;
    }

代入示例裡理解P1+P2匹配的是相鄰的第二個p，也就是P2；
以為這就完了，剩下的P們表示很委屈╥﹏╥…
P2+P3，匹配到P3；
P3+P4，匹配到P4；
這樣就形成了p+p匹配到了除了P1外的所有P的情況

經過上面的例子相信大家都理解了所謂的相鄰兄弟選擇器，再講個小技巧，要想匹配第幾個元素，只要通過簡單的相加即可

div 
+div+div+div{
        color: pink;
    }

這裡匹配的是第四個div，是不是很簡單(。・_・)/~~~

CSS相鄰兄弟選擇器和普通相鄰兄弟選擇器

看字面意思很難區別，直接上程式碼看效果相鄰兄弟選擇器： <!DOCTYPE html> <html> <head> <meta charset="utf-8

CSS 相鄰兄弟選擇器

先看定義，相鄰兄弟選擇器（Adjacent sibling selector）可選擇緊接在另一元素後的元素，且二者有相同父元素。上示例 <!DOCTYPE html> <html lang="en"> <head>

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

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

css 派生選擇器+子選擇器+相鄰兄弟選擇器

1.分組使用，號隔開 eg: h1,h2,h3{...} 2.派生選擇器, 很重要的一點是第一個引數和第二個引數之間的代數是可以無限的 eg: li strong{ font-style:italic; } 只有<li>標籤下的<strong

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

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

CSS選擇器相鄰兄弟選擇器（+）、:first-child、:last-child、:nth-child()、nth-of-type()，:focus等的用法

前言：我們在碼程式碼的時候，經常會遇到需要給第一個或者最後一個元素新增或刪除樣式，還有一些比較特殊的是選取第幾個元素新增或刪除樣式，下面記錄css選擇器中常見的相鄰兄弟選擇器（+）、子元素選擇器（>）:first-child、:last-child、:n

css後代選擇器，相鄰兄弟選擇器，子元素選擇器

後代選擇器element element例：div p 將會選中div元素中的p元素相鄰兄弟選擇器element+element例：div+p 將會選中div元素塊結束後緊跟著的p 元素，即形為<div>...</div><p>...&

css_day02_各種選擇器基本使用（相鄰兄弟選擇器+，兄弟選擇器~）

1.交集選擇器格式：選擇器1選擇器2{ } 效果： 2.並集選擇器 . . . . . . . . . . <———————————-華

選擇器之相鄰兄弟選擇器、後代選擇器、子代選擇器

相鄰兄弟選擇器相鄰兄弟選擇器困擾我很久了，從字面上理解感覺還是很好理解，但是就是不會使用，也是查了很多資料，最後才真正的解決了，也能夠比較正常的使用。下面是我整理的一些相關筆記。選擇相鄰兄弟如果需要選擇緊接在另一個元素後的元素，而且二者有相同的父元素

兄弟選擇器和相鄰兄弟選擇器

1.兄弟選擇器（brother selector，BS）：BS是CSS3.0新增的一個選擇器，語法格式：A~B{...}（A、B為HTML元素/標籤，表示A標籤匹配selector的A，B標籤匹配selector的B時，B標籤匹配樣式）<!DOCTYPE html>

CSS 7.5 選擇器-子元素、相鄰兄弟和普通兄弟選擇器

CSS 7.5 選擇器-子元素、相鄰兄弟和普通兄弟選擇器 1.子元素選擇器。選擇作為某元素的子元素的元素。格式：父元素 > 子元素 {宣告} 例如： h1 > strong { color：red；} HTML中： <h1>··········

css相鄰兄弟元素選擇器

要選擇緊接在另一個元素後的元素，並且二者有相同的父元素，可以使用相鄰兄弟結合符，這表示為一個加號（+）。與子結合符一樣，相鄰兄弟結合符旁邊可以有空白符。要去除緊接在一個h1元素後出現的段落的上邊距 h1 + p {margin-top: 0;} 如果

CSS選擇器之兄弟選擇器（~和+）

spa 例子 inf 代碼但是 info 發現效果說話　　今天在改以以前人家寫的網頁的樣式的時候，碰到這個選擇器，‘~’，當時我是懵逼的，傻傻分不清 ‘+’ 跟 ‘~’的區別，雖然我知道他們都是

css學習3——子元素選擇器，交集選擇器，並集選擇器，兄弟選擇器，序選擇器

1.子元素選擇器：找到指定標籤中所有特定的直接子元素格式：標籤名稱1>標籤名稱2{ 屬性名稱：屬性值； } 含義：找到名稱為標籤名稱1的標籤，然後在標籤名稱1中找到直接連線的所有名稱為標籤名稱2的元素注意點： * 子元素

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

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

相鄰選擇器、兄弟選擇器

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> /* #li3 + li{ !*

兄弟選擇器和相鄰選擇器按正序控制兄弟元素和相鄰元素的樣式

在做兄弟元素和相鄰元素的移入移出控制顯示與否的功能的時候，發現了一個問題，具體程式碼如下： <html> <head> <style type="text/css"> div{ widt

css的基本選擇器和設置cookie的一些代碼

pyw dex date() com 覆蓋 value time() 時間 pre ID選擇器：#header {}類選擇器：.header {}元素選擇器：div {}子選擇器：ul > li {}後代選擇器：div p {}偽類選擇器：a:hover {}屬性選擇

CSS偽類選擇器active模擬JavaScript點擊事件

css一、說明設置元素在被用戶激活（在鼠標點擊與釋放之間發生的事件）時的樣式。IE7及更早瀏覽器只支持a元素的:active，從IE8開始支持其它元素的:active。另：如果需要給超鏈接定義：訪問前，鼠標懸停，當前被點擊，已訪問這4種偽類效果，而又沒有按照一致的書寫順序，不同的瀏覽器可能會有不同的表現。超鏈

今天做項目用了CSS偽類選擇器“before”，就來了解了解它怎麽使用，又如何用？

偽類選擇器 line ref n) ima cnblogs hello 了解 nbsp 我不知道有沒有小夥伴以前跟我一樣，在一個元素內部想要添加一個小圖標或者小東西的時候，直接在HTML文檔裏自己加上<span>標簽，或者其他的。亦或者用javascript在

CSS 相鄰兄弟選擇器

相關推薦