选择器

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。

 

元素选择器

<template>
  <div>
    <h1>标题</h1>
    <p>这是一个段落。</p>
  </div>
</template>


<style>
h1 {
  color: blue;
}

p {
  font-size: 16px;
}
</style>

 

类选择器

<template>
  <div>
    <p class="highlight">高亮的段落。</p>
  </div>
</template>

<style>
.highlight {
  color: red;
  font-weight: bold;
}
</style>

 

ID选择器

<template>
  <div>
    <p id="main-paragraph">主要段落。</p>
  </div>
</template>

<style>
#main-paragraph {
  background-color: yellow;
}
</style>

 

属性选择器（不用）

<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>

 

伪类选择器

<template>
  <div>
    <a href="#">链接</a>
  </div>
</template>

<style>
a:hover {
  color: green;
}

a:active {
  color: red;
}
</style>

 

伪元素选择器

<template>
  <div>
    <p>欢迎来到我的网站。</p>
  </div>
</template>

<style>
p::before {
  content: "【开始】";
  color: orange;
}

p::after {
  content: "【结束】";
  color: orange;
}
</style>