CSS 選擇器

上一頁
下一頁

CSS 選擇器用於選擇您想要在網頁上設定樣式的 HTML 元素。它們允許您定位特定的元素或元素組以應用樣式，例如顏色、字型、邊距等等。

被選擇器選擇的元素被稱為選擇器的目標。

選擇器型別


 

CSS 通用選擇器

通用選擇器用星號(*)表示，是一個特殊的選擇器，它匹配 HTML 文件中的所有元素。這些通常用於為文件中的所有元素新增相同長度的邊距和填充。

語法

* {
   margin: 0;
   padding: 0;
}

根據上述語法，通用選擇器用於將 0 邊距和填充應用於所有 HTML 元素。

示例

以下示例演示了通用選擇器 (*) 的用法

<html>
<head>
   <style>
      * {
         margin: 0;
         padding: 0;
         background-color: peachpuff;
         color: darkgreen;
         font-size: 25px;
      }
   </style>
</head>
<body>
   <h1>Universal selector (*)</h1>

   <div>
      Parent element
      <p>Child paragraph 1</p>
      <p>Child paragraph 2</p>
   </div>

   <p>Paragraph 3</p>
</body>
</html>

CSS 元素選擇器

元素選擇器目標是 HTML 元素，例如 <h1>，<p> 等。當我們想要對文件中的所有 <p> 標籤或 <h1> 標籤應用類似樣式時，可以使用此方法。

語法

/* Sets text color of all p tags to green */
p {
   color: green;
}
/* Add underline to all h1 tags in document */
h1 {
   text-decoration-line: underline;
}

示例

以下示例演示了元素選擇器的用法

<html>
<head>
   <style>
      div {
         border: 5px inset gold;
         width: 300px;
         text-align: center;
      }

      p {
         color: green;
      } 

      h1 {
         text-decoration-line: underline;
      }
   </style>
</head>
<body>
   <div>
      <h1>Element selector</h1>
      <p>Div with border </p>
      <p>Text aligned to center</p>
      <p>Paragraph with green color</p>
      <p>h1 with an underline</p>
   </div>
</body>
</html>

CSS 類選擇器

類選擇器目標是其 class 屬性具有特定值的元素。CSS 中的類用"."（句點）符號表示。

語法

.sideDiv {
   text-decoration-line: underline;
}

.topDiv {
   color: green;
   font-size: 25px;
}

示例

以下示例演示了類選擇器的用法，其中.style-div，.topDivs和.bottomDivs是類選擇器

<html>
<head>
   <style>
      .style-div {
         border: 5px inset gold;
         width: 300px;
         text-align: center;
      }

      .topDivs{
         font-weight: bold;
         font-size: 30px;
      }
      .bottomDivs{
         color: green;
         font-size: 20px;
      }
   </style>
</head>

<body>
   <div class="style-div">
         <div class="topDivs">
            Hello World
         </div>
         <div class="topDivs">
            Learn CSS
         </div>
         <div class="bottomDivs">
            From
         </div>
         <div class="bottomDivs">
            TutorialsPoint
         </div>
   </div>
</body>

</html>

CSS ID 選擇器

ID 選擇器目標是其 id 屬性具有特定值的單個元素。CSS 中的 ID 用"#"（井號）符號表示。相同的類可以應用於多個元素，但 ID 對每個元素都是唯一的。

語法

#style-p {
   color: green;
   font-size: 25px;
} 

#style-h1 {
   text-decoration-line: underline;
   color: red;
}

示例

以下示例演示了 ID 選擇器的用法，其中#style-div，#tutorial和#stylePoint是應用於元素的 ID 選擇器

<html>
<head>
   <style>
      #style-div {
         border: 5px inset gold;
         width: 300px;
         text-align: center;
      }

      #tutorial{
         color: green;
         font-size: 20px;
      }
      #stylePoint{
         color: black;
         font-size: 15px;
         font-weight: bold;
      }
   </style>
</head>

<body>
   <div id="style-div">
         <div id="tutorial">
            Tutorials
            <span id="stylePoint">
               Point
            </span>
         </div>
         <p>
            Here we used ids to 
            style different elements. 
         </p>
   </div>
</body>
</html>

CSS 屬性選擇器

屬性選擇器根據元素上的特定屬性或屬性值來定位元素。

有關屬性選擇器的詳細說明，請參閱此屬性選擇器文章。

語法

/* Style all anchor tag with target attribute */
a[target] {
   background-color: peachpuff;
}

/* Style all anchor tag that links to tutorialspoint */
a[href="https://tutorialspoint.tw"] {
   background-color: peachpuff;
}

示例

以下示例演示了屬性選擇器的用法

<html>
<head>
   <style>
      a[href]{
         font-size: 2em;
      }

      a[target] {
         background-color: peachpuff;
         color: blueviolet;
      }

      /* Attribute with value have more priority*/
      /* Hence black background applied to CSS link*/
      a[target="_self"] {
         background-color: black;
      }
   </style>
</head>

<body>
   <h2>Attribute selector</h2>
   <p>
      Styling applied to anchor element:
   </p>

   <a href="https://tutorialspoint.tw/">
      Tutorialspoint
   </a>
   <br><br>
   <a href="/html/index.htm" target="_blank">
      HTML Tutorial
   </a>
   <br><br>
   <a href="/css/index.htm" target="_self">
      CSS Tutorial
   </a>
</body>

</html>

CSS 組選擇器

CSS 組選擇器允許我們一次對多個元素應用相同的樣式。元素名稱可以用逗號分隔。此方法推薦使用，因為它使 CSS 簡潔並避免冗餘。

語法

/* Apply same background color for h1 and h2 */
h1, h2 {
   background-color: grey;
}

示例

以下示例顯示如何在 CSS 中使用組選擇器。

<html>
<head>
   <style>
      /* This applies to both <h1> and <h2> elements */
      h1, h2 {
            background-color: grey;           
            padding: 4px;
      }

      /*Applies to all paragraphs, elements with class*/
      /*'highlight', and element with ID 'hightlightSpan'*/
      p, .highlight, #hightlightSpan {
            background-color: yellow;
            padding: 10px;
      }
   </style>
</head>

<body>
      <h1>CSS Selectors</h1>
      <h2>Group Selectors</h2>
      <p>This is a paragraph.</p>
      <div class="highlight">
         This is div
      </div>
      <br>
      <span id="hightlightSpan">
         This is span
      </span>
</body>
</html>

CSS 偽類選擇器

偽類選擇器用於設定元素特定狀態的樣式，例如:hover用於在懸停時設定元素的樣式。

有關偽類選擇器的詳細列表，請參閱此CSS 偽類教程。

語法

/* Change background color on hover */
a :hover {
   background-color: peachpuff; 
}
/* Change background color on clicking button */
button:active {
   background-color: yellow;
}
/* Change border color on focusing input */
input:focus {
   border-color: blue;
}

示例

以下示例演示了偽類選擇器的用法

<html>
<head>
   <style>
      a:hover {
         background-color: peachpuff;
         color: green;
         font-size: 2em;
      }
      button:active {
         background-color: yellow;
      }
   </style>
</head>

<body>
   <h2>Pseudo-class selector</h2>
   <p>
      Styling applied to anchor element and 
      button with a pseudo-class:
   </p>
   <a href="https://tutorialspoint.tw">
      Tutorialspoint
   </a>
   <br><br>
   <button>Click Me</button>
</body>
</html>

CSS 偽元素選擇器

偽元素選擇器用於設定元素特定部分的樣式，而不是元素本身。

有關偽元素選擇器的詳細列表，請參閱此CSS 偽元素教程。

語法

/* Define contents before paragraph */
a::before {
   content: " ";
}

/* Style first letter of paragraph */
p::first-letter {
   font-size: 2em;
}

示例

以下示例演示了偽元素選擇器(::before)和(::after)的用法

<html>
<head>
   <style>
      /* Add and style contents before paragraph */
      p::before {
            content: "Note: ";
            font-weight: bold;
            color: red;
      }

      /* Add and style contents after paragraph */
      p::after {
            content: " [Read more]";
            font-style: italic;
            color: blue;
      }
   </style>
</head>

<body>
   <h2>Pseudo-element selector</h2>
      <p>This is a paragraph.</p>
</body>
</html>

CSS 後代選擇器

後代選擇器用於在 css 中設定作為特定指定標籤子代的所有標籤的樣式。父元素和子元素之間的單個空格用於表示後代。

語法

div p {
   color: blue;
}

以上程式碼將 div 元素內段落標籤的文字顏色設定為藍色。

示例

以下示例顯示如何在 css 中使用後代選擇器。

<!DOCTYPE html>
<html lang="en">
<head>
   <style>
      div{
         border: 2px solid;
      }
      div p {
         color: blue;
      }
   </style>
</head>

<body>
   <div>
      <p>
         This paragraph is inside a div 
         and will be blue.
      </p>

      <section>
         <p>
            This paragraph is inside a 
            section which is inside a 
            div and will also be blue.
         </p>
      </section>
   </div>
   <p>
      This paragraph is outside the div 
      and will not be blue.
   </p>
</body>
</html>

CSS 子選擇器

css 中的子選擇器用於定位特定元素的所有直接子代。這用“>” (大於) 符號表示。

語法

div > p {
   color: blue;
}

以上程式碼將直接位於 div 元素內的段落標籤的文字顏色設定為藍色。

示例

以下示例顯示如何在 css 中使用子選擇器。

<!DOCTYPE html>
<html lang="en">
<head>
   <style>
      div{
         border: 2px solid;
      }
      div > p {
         color: blue;
      }
   </style>
</head>
<body>
      <div>
         <p>
            This paragraph is inside a div and 
            will be blue.
         </p>

         <section>
            <p>
               This paragraph is inside a  
               section which is inside a div
               and will not be blue as this 
               is not direct child
            </p>
         </section>
      </div>
      <p>
         This paragraph is outside the div
         and will not be blue.
      </p>
</body>
</html>

CSS 相鄰兄弟選擇器

在 CSS 中，相鄰兄弟選擇器用於定位緊跟在指定元素之前的元素。加號符號( "+" )用於表示相鄰兄弟。

語法

h1 + p {
   margin-top: 0;
}

以上程式碼將 h1 標籤之後段落標籤的頂部邊距設定為 0。

示例

以下示例顯示如何在 css 中使用相鄰兄弟選擇器。

<!DOCTYPE html>
<html lang="en">
<head>
   <style>
      div{
         border: 4px solid;
      }
      div + p {
         color: blue;
      }
   </style>
</head>
<body>
      <p>
         This paragraph is above the div 
         and will not be blue
      </p>
      <div>
         <p>
            This paragraph is inside a div 
            and will not be blue.
         </p>
      </div>
      <p>
         This paragraph 1 after the div 
         and will be blue.
      </p>
      <p>This paragraph 2 after the 
         div and will not be blue.
      </p>
</body>
</html>

CSS 通用兄弟選擇器

在 CSS 中，通用兄弟選擇器用於定位在指定元素之前的全部元素。波浪號符號( "~" )用於表示通用兄弟。

語法

h1 ~ p {
   color: gray;
}

以上程式碼將 h1 標籤之後所有段落的文字顏色設定為灰色。

示例

以下示例顯示如何在 css 中使用通用兄弟選擇器。

<!DOCTYPE html>
<html lang="en">
<head>
   <style>
      div{
         border: 4px solid;
      }
      div ~ p {
         color: blue;
      }
   </style>
</head>

<body>
      <p>
         This paragraph is above the div 
         and will not be blue
      </p>
      <div>
         <p>
            This paragraph is inside a div 
            and will not be blue.
         </p>
      </div>
      <p>
         This paragraph 1 after the div 
         and will be blue.
      </p>
      <p>This paragraph 2 after the 
         div and will be blue.
      </p>
</body>
</html>

CSS 中的巢狀選擇器

CSS 巢狀允許將一個樣式規則巢狀在另一個規則內，子規則的選擇器相對於父規則的選擇器。

CSS 巢狀選擇器的特點

巢狀選擇器顯示了父規則和子規則之間的關係。

  • 當瀏覽器解析巢狀選擇器時，它會自動在選擇器之間新增空格，從而建立一個新的 CSS 選擇器規則。
  • 在需要將巢狀規則附加到父規則（不帶任何空格）的情況下，例如使用偽類或複合選擇器時，必須立即新增&巢狀選擇器才能獲得所需的結果。
  • 為了反轉規則的上下文，可以附加&巢狀選擇器。
  • 可以有多個&巢狀選擇器例項。

語法

nav {
   & ul {
      list-style: none;
      & li {
      display: inline-block;
      & a {
         text-decoration: none;
         color: blue;
         &:hover {
            color: red;
         }
      }
      }
   }
}

示例

以下示例演示了 & 巢狀選擇器 (&) 的用法

<html>
<head>
   <style>
      #sample {
         font-family: Verdana, Geneva, Tahoma, sans-serif;
         font-size: 1.5rem;
         & a {
            color: crimson;
            &:hover,
            &:focus {
               color: green;
               background-color: yellow;
            }
         }
      }
   </style>
</head>
<body>
   <h1>& nesting selector</h1>
   <p id="sample">
      Hover <a href="#">over the link</a>.
   </p>
</body>
</html>
列印頁面
上一頁
下一頁
廣告