CSS 选择器与相关规则详解

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

1. 类选择器 (Class Selector)

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

/* 定义一个名为 "highlight" 的类 */
.highlight {background-color: yellow;
}<!-- 在HTML中使用 -->
<p class="highlight">这段文本将会高亮显示</p>
<div class="highlight">此div也会有相同的背景色</div>

2. ID 选择器 (ID Selector)

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

/* 定义一个ID为 "main-header" 的样式 */
#main-header {font-size: 24px;color: #333;
}<!-- 在HTML中使用 -->
<h1 id="main-header">主标题</h1>

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

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

/* 鼠标悬停时链接的颜色变化 */
a:hover {color: red;
}/* 已访问过的链接颜色 */
a:visited {color: purple;
}

4. 属性选择器 (Attribute Selector)

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

/* 选择所有带有href属性的a元素 */
a[href] {text-decoration: underline;
}/* 选择src属性值以".jpg"结尾的img元素 */
img[src$=".jpg"] {border: 1px solid black;
}

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

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

/* 选择每个段落的第一个字母作为伪元素,并设置样式 */
p::first-letter {font-size: larger;text-transform: uppercase;
}/* 创建一个在元素内容之前插入的内容块 */
p::before {content: "Read: ";color: green;
}

6. 后代选择器 (Descendant Selector)

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

/* 选择所有位于ul标签内的li元素 */
ul > li {list-style-type: disc;
}/* 选择任何在div内包含的所有段落 */
div p {margin-bottom: 1em;
}

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

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

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

8. 兄弟选择器 (Sibling Selector)

  • 相邻兄弟选择器 (+ 符号) 选择紧接在某个元素之后的同级元素:
/* 当p元素紧跟在一个h1元素后面时应用样式 */
h1 + p {font-weight: bold;
}/* 一般兄弟选择器 (~ 符号) 选择所有紧跟在同一父元素下某元素之后的同级元素 */
h1 ~ p {color: blue;
}

注释 (Comments)

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

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

@规则 (@ Rules)

  • @media 规则用于创建媒体查询,针对不同设备视口尺寸和特性应用不同的样式:
@media screen and (max-width: 600px) {body {font-size: 14px;}
}
  • @font-face 规则用于定义自定义字体:
@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 规则用于定义打印样式表中的页面布局:
@page {size: A4;margin: 1in;
}

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/662107.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

法兰缺损零件设计加工替换盾构机扫描建模厂家抄数修图出CAD图纸

在现代工业生产中&#xff0c;法兰缺损零件的问题时有发生&#xff0c;这不仅会影响设备的正常运行&#xff0c;还会给企业带来巨大的经济损失。为了解决这一问题&#xff0c;CASAIM中科广电三维扫描和3D打印设计加工技术的运用成为了关键。 首先&#xff0c;CASAIM中科广电需要…

【后端】乐观锁和悲观锁

前置知识点 锁&#xff1a;一种确保数据安全的机制和手段。 在多个线程修改共享变量时&#xff0c;我们可以对修改操作进行加锁。当多个用户修改表中的同一数据时&#xff0c;我们可以对该行数据进行加锁&#xff08;行锁&#xff09;。锁是用于控制多个操作在并发环境下按顺…

“与客户,共昂首”——Anzo Capital昂首资本尽释行业进取之姿

“以匠心&#xff0c;铸不凡” 活动的现场&#xff0c;Anzo Capital 作为演讲嘉宾分享“以匠心&#xff0c;铸不凡”的产品理念。Anzo Capital积淀九载&#xff0c;匠心打造出“STP”和“ECN”两大核心账户&#xff0c;以光之速度将交易中的订单直达市场和流动性提供商&#…

Unity通过物理带动实现传输带运输物品

前言&#xff1a;遇到个听起来挺简单的需求&#xff0c;就是实现一个传输带&#xff0c;传输物品。但细想发现如果是直接设置物品的速度&#xff0c;或者通过设置父物体的方式带动物品&#xff0c;都挺不好&#xff0c;关联性太强。最后选择用到一个很实用的API, Rigidbody.M…

Vue+OpenLayers7入门到实战:OpenLayers7加载天地图

返回《Vue+OpenLayers7》专栏目录:Vue+OpenLayers7 前言 本章介绍如何使用OpenLayers7在地图上加载天地图. 天地图瓦片访问需要先到天地图申请key。天地图官网链接 本文使用xyz方式加载天地图,并且介绍如何加载xyz格式天地图url,包括天地图纯底图(无标记)、卫星影像图…

SpringMVC入门学习(十)----mvc:annotation-driven标签介绍

目录 1、关于mvc:annotation-driven作用2、mvc:annotation-driven在什么时候必须配置3、关于mvc:annotation-driven配合使用的几种情况 回到顶部 1、关于mvc:annotation-driven作用 [1]、<mvc:annotation-driven /> 会自动向容器中注册如下组件&#xff0c;并且会代替…

0101appscan安装与使用入门-扫描-信息收集

1 简介 HCL AppScan&#xff08;原IBM Security AppScan&#xff09;是原IBM的Rational软件部门的一组网络安全测试和监控工具&#xff0c;2019年被HCL技术公司收购。AppScan旨在在开发过程中对Web应用程序的安全漏洞进行测试[1]。该产品学习每个应用程序的行为&#xff0c;无…

【蓝桥杯51单片机入门记录】LED

目录 一、基础 &#xff08;1&#xff09;新建工程 &#xff08;2&#xff09;编写前准备 二、LED &#xff08;1&#xff09;点亮LED灯 &#xff08;2&#xff09;LED闪烁 延时函数的生成&#xff08;stc-isp中生成&#xff09; 实现 &#xff08;3&#xff09;流水灯…

MG7050HAN 基于声表的差分多输出 晶体振荡器 (HCSL)

基于MG7050 HAN的声表差分多输出晶体振荡器(HCSL)&#xff0c;采用两路或四路差分HCSL&#xff08;高速电流驱动逻辑&#xff09;输出&#xff0c;可以减少外部扇出缓冲区&#xff0c;特别适用于需要超低抖动、高频率范围内稳定工作的应用场合。其输出特性曲线超低抖动&#xf…

降维(Dimensionality Reduction)

一、动机一&#xff1a;数据压缩 这节我将开始谈论第二种类型的无监督学习问题&#xff0c;称为降维。有几个原因使我们可能想要做降维&#xff0c;其一是数据压缩&#xff0c;它不仅允许我们压缩数据使用较少的计算机内存或磁盘空间&#xff0c;而且它可以加快我们的学习算法。…

90年代的黄河路,大家都在用什么方式互相联络?

1992 年的上海&#xff0c;霓虹养眼&#xff0c;万花如海… 新年伊始&#xff0c;一部《繁花》爆火出圈&#xff0c;带观众穿越回了那个灯红酒绿的上海。90 年代的黄河路遍地是机会&#xff0c;商业战场上&#xff0c;信息成了最宝贵的财富&#xff0c;谁能获得最真实有用的资讯…

Python学习之路-DRF基础:视图

Python学习之路-DRF基础:视图 视图概览 简介 REST framework 提供了众多的通用视图基类与扩展类&#xff0c;以简化视图的编写。 视图的继承关系 视图的方法与属性 视图说明 两个基类 APIView 简介 rest_framework.views.APIView APIView是REST framework提供的所有视…

微服务-微服务Alibaba-Nacos 源码分析 (源码流程图)

客户端流程 客户端心跳与实例往服务端注册

vue3.0中从proxy中取值

使用vue3.0时&#xff0c;因为底层是使用proxy进行代理的所以当我们打印一些值的时候是proxy代理之后的&#xff0c;是Proxy 对象&#xff0c;Proxy对象里边的[[Target]]才是真实的对象。也是我们需要的 第一种获取target值的方式&#xff1a; import { toRaw } from vue; le…

openssl3.2 - 官方demo学习 - pkcs12 - pkwrite.c

文章目录 openssl3.2 - 官方demo学习 - pkcs12 - pkwrite.c概述学到的知识点笔记PEM证书可以拼接实验 pkcs12 - pkwrite.c用win10的证书管理器安装P12证书是成功的END openssl3.2 - 官方demo学习 - pkcs12 - pkwrite.c 概述 openssl3.2 - 官方demo学习 - 索引贴 上次PKCS12的…

2024美赛数学建模C题网球的动量:思路+代码+模型+论文

问题分析见下列内容&#xff0c;完整思路代码见文末名片 1.题目 在2023年温布尔登绅士队的决赛中&#xff0c;20岁的西班牙新星卡洛斯阿尔卡拉兹击败了36 岁的诺瓦克德约科维奇。这是德约科维奇自2013年以来首次在温布尔登公开赛失利 &#xff0c;并结束了他在大满贯赛事中…

大数据 - Spark系列《一》- 分区 partition数目设置详解

目录 &#x1f436;3.2.1 分区过程 &#x1f436;3.2.2 SplitSize计算和分区个数计算 &#x1f436;3.2.3 Partition的数目设置 1. &#x1f959;对于数据读入阶段&#xff0c;输入文件被划分为多少个InputSplit就会需要多少初始task. 2. &#x1f959;对于转换算子产生的…

vue3报错 Component name “Footer“ should always be multi-word

报错内容 You may use special comments to disable some warnings. Use // eslint-disable-next-line to ignore the next line. Use /* eslint-disable */ to ignore all warnings in a file. ERROR in [eslint] /Users/soul/projects/learning-vuejs3/chapter07/01_learn_c…

拓扑空间论学习与Transformer的联系

1. 拓扑空间 1.1 拓扑空间概念 拓扑空间是一种数学概念&#xff0c;其核心在于定义了一种“邻域”结构&#xff0c;而非具体的距离或度量关系。在拓扑空间中&#xff0c;我们关注的是点之间连通性的全局属性&#xff0c;例如哪些点可以通过连续变形相互转换&#xff0c;哪些集…

python:webp转gif

公司电脑无录屏软件&#xff0c;用免费在线录屏 (lupingwang.com)最后得到的是webp视频&#xff0c;转MP4代码不怎么容易&#xff0c;发现转GIF也挺不错的 此用于批量将WebM视频文件转换为GIF格式的工具&#xff0c;使用了MoviePy库来处理视频文件&#xff0c;需要的自己取 代…