網頁

▼

2019/9/1

CSS 練習 Attribute selectors 屬性選擇器 [attr]

請建立一份HTML文件，檔名為attr-selectors.html。請用VS Code編輯。

attr-selectors.html現有內容如下。

attr-selectors.html

<!DOCTYPE html>
<html>
<head>
    <style>
        div {
            border: solid 1px;
        }
    </style>
</head>

<body>
    <div id="a">DIV A</div>
    <div id="b">DIV B</div>
    <div class="cs1">DIV C</div>
    <div class="cs2">DIV D</div>
    <div>DIV E</div>
</body>

</html>

請利用CSS 屬性選擇器Attribute Selector 找到對應的HTML元素達成以下效果。



提示：CSS Attribute selectors 屬性選擇器。


解答：

attr-selectors.html


<!DOCTYPE html>
<html>
<head>
    <style>
        div {
            border: solid 1px;
        }

        div[id] {
            background-color: yellow;
        }
        div[class] {
            background-color: green;
        }
    </style>
</head>

<body>
    <div id="a">DIV A</div>
    <div id="b">DIV B</div>
    <div class="cs1">DIV C</div>
    <div class="cs2">DIV D</div>
    <div>DIV E</div>
</body>

</html>

沒有留言:

張貼留言