CSS 选择器与相关规则详解

CSS(Cascading Style Sheets)的选择器是网页样式设计中至关重要的工具,它们允许开发者精确地定位并应用样式到HTML文档中的元素。下面将逐一介绍几种主要的选择器类型,以及相关的注释和@规则。

1. 类选择器 (Class Selector)

类选择器通过.后跟类名来定义样式,可以应用于多个具有相同类名的元素上:

css 复制代码
/* 定义一个名为 "highlight" 的类 */
.highlight {
  background-color: yellow;
}

<!-- 在HTML中使用 -->
<p class="highlight">这段文本将会高亮显示</p>
<div class="highlight">此div也会有相同的背景色</div>

2. ID 选择器 (ID Selector)

ID选择器使用#符号后面紧跟ID名称来指定唯一的元素,每个页面的ID应保证唯一性:

css 复制代码
/* 定义一个ID为 "main-header" 的样式 */
#main-header {
  font-size: 24px;
  color: #333;
}

<!-- 在HTML中使用 -->
<h1 id="main-header">主标题</h1>

3. 伪类选择器 (Pseudo-class Selector)

伪类选择器用于向某些特定状态的元素添加样式,如链接的不同状态:

css 复制代码
/* 鼠标悬停时链接的颜色变化 */
a:hover {
  color: red;
}

/* 已访问过的链接颜色 */
a:visited {
  color: purple;
}

4. 属性选择器 (Attribute Selector)

属性选择器根据HTML元素的属性及其值来选择元素:

css 复制代码
/* 选择所有带有href属性的a元素 */
a[href] {
  text-decoration: underline;
}

/* 选择src属性值以".jpg"结尾的img元素 */
img[src$=".jpg"] {
  border: 1px solid black;
}

5. 伪元素选择器 (Pseudo-element Selector)

伪元素选择器用于选择元素内容的一部分,而不是整个元素本身:

css 复制代码
/* 选择每个段落的第一个字母作为伪元素,并设置样式 */
p::first-letter {
  font-size: larger;
  text-transform: uppercase;
}

/* 创建一个在元素内容之前插入的内容块 */
p::before {
  content: "Read: ";
  color: green;
}

6. 后代选择器 (Descendant Selector)

后代选择器用来选择某个元素内部的所有特定后代元素:

css 复制代码
/* 选择所有位于ul标签内的li元素 */
ul > li {
  list-style-type: disc;
}

/* 选择任何在div内包含的所有段落 */
div p {
  margin-bottom: 1em;
}

7. 相邻后代选择器、子选择器 (Child Selector)

子选择器 (> 符号) 指定父元素直接子元素的样式:

css 复制代码
/* 只选择直接位于.navbar下的 a 元素 */
.navbar > a {
  color: white;
}

/* 注意:相邻后代选择器实际上指的是相邻兄弟选择器,在这里纠正一下 */
/* 相邻兄弟选择器 (+ 符号) 选择紧随其后的同级元素 */
.h1 + p {
  margin-top: 0;
}

8. 兄弟选择器 (Sibling Selector)

  • 相邻兄弟选择器 (+ 符号) 选择紧接在某个元素之后的同级元素:
css 复制代码
/* 当p元素紧跟在一个h1元素后面时应用样式 */
h1 + p {
  font-weight: bold;
}

/* 一般兄弟选择器 (~ 符号) 选择所有紧跟在同一父元素下某元素之后的同级元素 */
h1 ~ p {
  color: blue;
}

注释 (Comments)

CSS注释用于解释或临时禁用代码块:

css 复制代码
/* 这是一个CSS注释,不会影响样式渲染 */
/* .example-selector {
  display: none; // 这行样式被注释掉了
} */

@规则 (@ Rules)

  • @media 规则用于创建媒体查询,针对不同设备视口尺寸和特性应用不同的样式:
css 复制代码
@media screen and (max-width: 600px) {
  body {
    font-size: 14px;
  }
}
  • @font-face 规则用于定义自定义字体:
css 复制代码
@font-face {
  font-family: 'MyCustomFont';
  src: url('myfont.woff2') format('woff2'),
       url('myfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

body {
  font-family: 'MyCustomFont', sans-serif;
}
  • @page 规则用于定义打印样式表中的页面布局:
css 复制代码
@page {
  size: A4;
  margin: 1in;
}

以上仅列举了部分常见的CSS选择器和@规则,实际开发中还有其他许多复杂且强大的组合方式,可根据需要灵活运用。

相关推荐
科技探秘人8 分钟前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
科技探秘人8 分钟前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome
JerryXZR14 分钟前
前端开发中ES6的技术细节二
前端·javascript·es6
七星静香16 分钟前
laravel chunkById 分块查询 使用时的问题
java·前端·laravel
q24985969318 分钟前
前端预览word、excel、ppt
前端·word·excel
小华同学ai24 分钟前
wflow-web:开源啦 ,高仿钉钉、飞书、企业微信的审批流程设计器,轻松打造属于你的工作流设计器
前端·钉钉·飞书
Gavin_91533 分钟前
【JavaScript】模块化开发
前端·javascript·vue.js
懒大王爱吃狼2 小时前
Python教程:python枚举类定义和使用
开发语言·前端·javascript·python·python基础·python编程·python书籍
逐·風6 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#
Devil枫6 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试