选择器

1. 元素选择器（Type Selectors）：直接通过元素类型进行选择，例如 div, p, h1 等。

2. 类选择器（Class Selectors）：通过元素的 class 属性选择元素，以点（.）开头，例如 .classname。

3. ID选择器（ID Selectors）：通过元素的 id 属性选择元素，以井号（#）开头，例如 #idname。

4. 属性选择器（Attribute Selectors）：根据元素的属性及属性值来选择元素，例如 [type="text"]。

5. 伪类选择器（Pseudo-class Selectors）：用于选择元素的特定状态，例如 :hover, :active, :first-child 等。

6. 伪元素选择器（Pseudo-element Selectors）：用于选择元素的特定部分，例如 ::before, ::after。

 

元素选择器

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

<template>   <div>     <h1>标题</h1>     <p>这是一个段落。</p>   </div> </template>     <style> h1 {   color: blue; }   p {   font-size: 16px; } </style>

 

类选择器

?

1 2 3 4 5 6 7 8 9 10 11 12

<template>   <div>     <p class="highlight">高亮的段落。</p>   </div> </template>   <style> .highlight {   color: red;   font-weight: bold; } </style>

 

ID选择器

?

1 2 3 4 5 6 7 8 9 10 11

<template>   <div>     <p id="main-paragraph">主要段落。</p>   </div> </template>   <style> #main-paragraph {   background-color: yellow; } </style>

 

属性选择器（不用）

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

<template>   <div>     <input type="text" placeholder="输入文本">     <input type="checkbox">   </div> </template> <style> input[type="text"] {   border: 1px solid blue; }   input[type="checkbox"] {   width: 20px;   height: 20px; } </style>

 

伪类选择器

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

<template>   <div>     <a href="#">链接</a>   </div> </template>   <style> a:hover {   color: green; }   a:active {   color: red; } </style>

 

伪元素选择器

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

<template>   <div>     <p>欢迎来到我的网站。</p>   </div> </template>   <style> p::before {   content: "【开始】";   color: orange; }   p::after {   content: "【结束】";   color: orange; } </style>