【html css选择器 五种方法，一篇看会】

在 CSS 中，你可以通过选择器来选择 HTML 元素，并为其设置样式。以下是一些常见的 CSS 选择器和样式设置方法：

1. 基本选择器

• 元素选择器：选择特定的 HTML 元素。

  p {color: blue;font-size: 16px;
  }
  

• 类选择器：选择具有特定 class 属性的元素。

  .my-class {background-color: yellow;
  }
  

• ID 选择器：选择具有特定 id 属性的元素。

  #my-id {border: 1px solid red;
  }
  

2. 组合选择器

• 后代选择器：选择某个元素内的所有后代元素。

  div p {color: green;
  }
  

• 子选择器：选择某个元素的直接子元素。

  ul > li {list-style: none;
  }
  

• 相邻兄弟选择器：选择紧接在另一个元素之后的元素。

  h1 + p {font-weight: bold;
  }
  

• 通用兄弟选择器：选择某个元素之后的所有兄弟元素。

  h1 ~ p {text-decoration: underline;
  }
  

3. 属性选择器

• 属性存在选择器：选择具有特定属性的元素。

  a[target] {color: orange;
  }
  

• 属性值选择器：选择具有特定属性值的元素。

  input[type="text"] {width: 200px;
  }
  

4. 伪类和伪元素

• 伪类：选择元素的特定状态。

  a:hover {text-decoration: underline;
  }
  

• 伪元素：选择元素的特定部分。

  p::first-line {font-weight: bold;
  }
  

5. 样式属性

• 颜色：设置文本颜色。

  color: red;
  

• 背景颜色：设置背景颜色。

  background-color: #f0f0f0;
  

• 字体大小：设置字体大小。

  font-size: 14px;
  

• 边框：设置元素的边框。

  border: 1px solid black;
  

• 内边距和外边距：设置元素的内边距和外边距。

  padding: 10px;
  margin: 20px;
  

6. 示例

假设你有以下 HTML 结构：

<div id="container"><p class="text">这是一个段落。</p><p>这是另一个段落。</p>
</div>

你可以使用以下 CSS 来设置样式：

/* 选择 id 为 container 的元素 */
#container {background-color: #f0f0f0;padding: 20px;
}/* 选择 class 为 text 的元素 */
.text {color: blue;font-size: 16px;
}/* 选择所有段落元素 */
p {margin-bottom: 10px;
}

7. 引入 CSS

你可以将 CSS 样式直接写在 HTML 文件的 <style> 标签中，或者将样式写在一个单独的 .css 文件中，然后通过 <link> 标签引入：

<!-- 内联样式 -->
<style>p {color: red;}
</style><!-- 外部样式表 -->
<link rel="stylesheet" href="styles.css">

通过这些方法，你可以灵活地为 HTML 元素设置样式。