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




0 Comments:

張貼留言

訂閱： 張貼留言 (Atom)