小白網頁設計練成記-DAY18-CSS選取器-屬性/值

2022 iThome 鐵人賽

DAY 18

自我挑戰組

小白網頁設計練成記系列第 18 篇

14th鐵人賽 css 新手上路

Eric

2022-09-18 21:36:12

543 瀏覽

分享至

我們先來看一張圖，了解一下css的基本寫法:

在大括號左邊的selector是指在頁面上，找到符合選取器的元素，這邊是h1標籤，找到後就套用大括號裡所寫的css。
color指的是css的屬性，冒號帶表屬性設定結束，blue則是屬性的值，分號就是代表設定結束。

直接選取標籤

下面是直接選取< p >然後設定字體顏色為紅色:

<title>Document</title>
    <style>
        p{              /*選取p標籤*/
            color:red;  /*設定字體顏色*/
        }
    </style>
</head>
<body>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos, dolorem quaerat tenetur earum voluptates numquam esse fugiat aperiam porro saepe cumque ullam assumenda dolorum fuga laudantium delectus aliquam amet a.</p>
</body>

顯示如下:

選取中括號[ ]

下面有兩個網頁連結，其中一個屬性設定為 target，此時我們如果要選取有 target 屬性的< a >，就要使用中括號[ ]，示範如下:

<title>Document</title>
    <style>
        p{
            color:red;
        }
        
        a[target]{            /*找到a之後再找到target，然後對其設定*/
            background-color: #fac;
        }
    </style>
</head>
<body>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos, dolorem quaerat tenetur earum voluptates numquam esse fugiat aperiam porro saepe cumque ullam assumenda dolorum fuga laudantium delectus aliquam amet a.</p>

    <a href="http://google.com" target="_blank">google連結1</a>/*我在這裡*/
    <a href="http://google.com">google連結2</a>
</body>

顯示如下:

[ ^= ]從頭找

在中括號加入屬性^=屬性值，他就會從該從行的前面篩選條件，看以下示範:

<style>
        p{
            color:red;
        }
        
        a[target]{
            background-color: #fac;
        }
        a[href^="https"]{    /*從頭開始找htpps，設定該連結字體大小30px*/
            font-size: 30px;
        }
    </style>
</head>
<body>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos, dolorem quaerat tenetur earum voluptates numquam esse fugiat aperiam porro saepe cumque ullam assumenda dolorum fuga laudantium delectus aliquam amet a.</p>

    <a href="http://google.com" target="_blank">google連結1</a>
    <a href="https://google.com">google連結2</a> /*找到啦，設定字體大小30px*/
</body>

顯示如下:

由上述可已知道，在兩個連結前面篩選符合https的值，對其設定字體大小30px。

[ $= ]從尾找

跟從頭找相反，這個就是從尾巴篩選條件，看以下示範:

<style>
        p{
            color:red;
        }
        
        a[target]{
            background-color: #fac;
        }
        a[href^="https"]{
            font-size: 30px;
        }
        p[name$="456"]{           /*從name的後面找456，然後設定背景和字體顏色*/
            background-color: #00f;
            color: #fff;
        }
    </style>
</head>
<body>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos, dolorem quaerat tenetur earum voluptates numquam esse fugiat aperiam porro saepe cumque ullam assumenda dolorum fuga laudantium delectus aliquam amet a.</p>

    <a href="http://google.com" target="_blank">google連結1</a>
    <a href="https://google.com">google連結2</a>

    <p name="123_456">Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo, ratione.</p>     /*456在這裡 嘿嘿嘿*/
    <p name="123">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nemo, quas.</p>

顯示如下:

直接選取屬性

有人說能不能直接指定要選取的屬性，當然可以囉，就像絕對路徑一樣，看以下示範：

 <style>
        div[name="div2"]{    /*找到div再找到div2*/
            color: green;
        }
    </style>
</head>
<body>

    <div name="div1">hello world1</div>
    <div name="div2">hello world2</div>  /*直接找到家樓下哈哈哈*/
</body>

顯示如下:
![](