基本选择器

可用

4.1 类型选择器

在CSS中,选择器用于定义将应用样式的元素。基本选择器包括类型选择器、类选择器、ID选择器和通用选择器。每种选择器都有其自身的特点和应用。

类型选择器 (Type Selectors)

类型选择器将样式应用于所有特定类型的元素。例如,可以应用样式于所有段落(<p>)、标题(<h1>, <h2>等)或其他HTML标签。

tagname {
  属性: 值;
  属性: 值;
}
CSS
p {
  color: blue;
  font-size: 14px;
}

这个选择器将样式应用于文档中的所有<p>元素。

特点:

  • 应用于所有指定类型的元素
  • 适用于需要应用于所有特定类型元素的全局样式

4.2 类选择器

类选择器允许将样式应用于具有特定类的一个或多个元素。类通过HTML中的class属性定义,在CSS中用点号(.)表示。

语法:

.classname {
  属性: 值;
  属性: 值;
}

例子:

CSS
.button {
  background-color: green;
  color: white;
  padding: 10px;
}

这个选择器将样式应用于所有具有button类的元素。

特点:

  • 可以对多个元素使用相同的类
  • 方便对不同元素使用相同的样式

4.3 ID选择器

ID选择器将样式应用于具有唯一ID的元素。ID通过HTML中的id属性定义,在CSS中用井号 (#) 表示。

语法:

#uniq-id {
  属性: 值;
  属性: 值;
}

例子:

这个选择器将样式应用于具有main ID的元素。

CSS
/* 选择具有 #main ID 的元素 */
#main {
  width: 800px;
  background: yellow;
}
HTML
<div id="main">这个元素将具有800px的宽度。</div>
<div>这个元素不会被样式化。</div>

特点:

  • ID在页面上必须是唯一的
  • 用于样式化独特的元素,例如标题或主要内容

4.4 组合选择器

组合选择器允许将同一规则应用于多个元素。它们可以减少代码量,简化样式管理。

语法:

selector, selector, … {
  属性: 值;
  属性: 值;
}

例子:

CSS
/* 选择所有 h1, h2 和 h3 元素 */
h1,
h2,
h3 {
  font-family: Arial, sans-serif;
}
HTML
<h1>标题 1</h1>
<h2>标题 2</h2>
<h3>标题 3</h3>
<p>这个文本不会被该规则样式化。</p>

4.5 通用选择器

通用选择器将样式应用于页面上的所有元素。它们用星号 (*) 表示,可用于重置样式或为所有元素应用通用样式。

语法:

* {
  属性: 值;
  属性: 值;
}

例子:

这个选择器将样式应用于页面上的所有元素,重置其边距并设置盒子模型。

HTML
<div>段落 1</div>
<div>段落 2</div>
CSS
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

特点:

  • 应用于页面上的所有元素
  • 适用于全局样式重置或为所有元素设置基础样式
1
任务
Frontend SELF ZH,  第 12 级课程 4
已锁定
类选择器
类选择器
1
任务
Frontend SELF ZH,  第 12 级课程 4
已锁定
ID选择器
ID选择器
评论
  • 受欢迎
你必须先登录才能发表评论
此页面还没有任何评论