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>2. 类选择器
类选择器选择某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类名规范:
- 类名不能是中文、纯数字
- 英文单词之间使用
-连接- 命名尽量见名知义
3. id选择器
根据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>4. 通配符选择器
通配符选择器可以选择 HTML 中的所有标签进行样式修改。常用于统一浏览器的默认样式
常用于清除浏览器的所有内外边距,代码如下:
* {
margin: 0;
padding: 0;
}