CSS选择器-基础选择器

约 447 字大约 1 分钟

2025-10-15

1. 标签选择器

选择某种标签，针对这种标签进行样式修改

基本语法：

标签名 {
    样式规则;
}

基本示例：

style.css

div {
    color: gold;
}

li {
    color: green;
}

index.html

<body>
  <div>夏洛</div>
  <div>秋雅</div>
  <div>冬梅</div>

  <ul>
    <li>佩奇</li>
    <li>乔治</li>
  </ul>
</body>

类选择器选择某1个或多个元素

使用类选择器时，html标签要注明class="类名"，css根据.类名修改元素样式

基本语法：

.类名 {
    样式规则;
}

基本示例：

style.css

.warning {
    color: #ff0000;
    background-color: #ffe6e6;
    padding: 10px;
    border-left: 3px solid #ff0000;
}

index.html

<p class="warning">警告信息1</p>
<div class="warning">警告信息2</div>
<span class="warning">警告信息3</span>

html类名规范:
类名不能是中文、纯数字
英文单词之间使用 - 连接
命名尽量见名知义

根据html元素中的id属性来修改对应样式

基本语法：

#id {
  样式规则;
}

一个html页面中，id与 html元素是一对一的关系，因为js要使用getElementById给元素绑定事件，因此不能有两个相同的id

基本示例：

style.css

/* ID选择器 - 布局和唯一元素 */
#main-header {
    grid-area: header;
}

#page-content {
    grid-area: content;
}

index.html

<!-- ID - 用于唯一的重要元素 -->
<header id="main-header">网站标题</header>
<main id="page-content">主要内容</main>

通配符选择器可以选择 HTML 中的所有标签进行样式修改。常用于统一浏览器的默认样式

常用于清除浏览器的所有内外边距，代码如下：

* {
    margin: 0;
    padding: 0;
}