Css Combinators

Css Combinators 有以下四種


  • descendant selector (space)
  • child selector (>)
  • adjacent sibling selector (+)
  • general sibling selector (~)

以這個html為例，html都是巢狀，所以是一層包一層的結果，如果我們想要選擇下層的標籤內容，可以使用descendant selector  語法是：在上層跟下層中間加上一個”空白”


<!DOCTYPE html>
<html>
<head>
    <style>
        div p {
            background-color: yellow;
        }
    </style>
</head>
<body>

<h2>Descendant Selector</h2>

<p>The descendant selector matches all elements that are descendants of a specified element.</p>

<div>
    <p>Paragraph 1 in the div.</p>
    <p>Paragraph 2 in the div.</p>
    <section><p>Paragraph 3 in the div.</p></section>
</div>

<p>Paragraph 4. Not in a div.</p>
<p>Paragraph 5. Not in a div.</p>

</body>
</html>

output 





將style更換成child selector如下
<style>
    div > p {
        background-color: yellow;
    }
</style>

可以發現畫面paragraph3沒有變成黃色


因為paragraph3外面多了一層<section> 所以沒辦法直接被child selector 選擇



再將style更改如下
div + p {
    background-color: yellow;
}


我們這邊用adjacent sibling selector，這會選擇指定相鄰的元素，在<div>後面的<p>被選擇了
</div>

<p>Paragraph 4. Not in a div.</p>
所以只有paragraph4被選中


最後是general sibling selector，只要相同層級並且順序在自己後面，就可以使用
<div>
    <p>Paragraph 1 in the div.</p>
    <p>Paragraph 2 in the div.</p>
    <section><p>Paragraph 3 in the div.</p></section>
</div>

<p>Paragraph 4. Not in a div.</p>
<p>Paragraph 5. Not in a div.</p>
如圖，paragraph4跟paragraph5都跟div同個層級，又在div後面，所以會被選中




Css Selector

 範例如下

index.html

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>uHost</title>
    <link rel="shortcut icon" href="favicon.png">
    <link rel="stylesheet" href="index.css">
</head>

<body>
<main>
    <section>
        <h1>Get the freedom you deserve.</h1>
    </section>

    <section class="test_class">
        <h1 class="test_class_h1">Use class</h1>
    </section>

    <section id="test_id">
        <h1 id="test_id_h1">Use id</h1>
    </section>

    <button disabled>Use attribute</button>
</main>
</body>

</html>


index.css

section{
    background-color: bisque;
}
h1{
    color: aqua;
}

.test_class{
    background-color: cornsilk;
}

.test_class_h1{
    color: aquamarine;
}

#test_id{
    background-color: black;
}

#test_id_h1{
    color: aliceblue;
}

button[disabled]{
    color: aquamarine;
}


section 代表選擇所有 section element
.test_class 代表選擇所有class為test_class的element
#test_id 代表選擇所有id為test_id的element
button[disabled] 代表選擇所有 attribute有disabled的 button




訂閱： 文章 (Atom)