首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

background-color不适用于:已访问但如果我将任何背景颜色添加到{background:#fff},它是否有效,这是一个错误吗?

这个问答内容涉及到了CSS样式的设置,其中background-color属性用于设置元素的背景颜色,而:visited伪类选择器用于选择已访问过的链接元素。

在这个问题中,如果将任何背景颜色添加到{background:#fff},它是有效的CSS样式,但是这并不是一个错误。如果你想要设置已访问过的链接元素的背景颜色,可以使用a:visited {background-color:#fff}这样的CSS样式。

以下是一个完整的CSS样式示例,用于设置链接元素的背景颜色:

代码语言:css
复制
a {
  background-color: #fff;
}

a:visited {
  background-color: #fff;
}

这个CSS样式将会设置所有链接元素的背景颜色为白色,包括已访问过的链接元素。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

CSS3中的变量var了解

这个变量应该设置为全局变量是否应该限定其范围为文件或模块?是否应该限制在块中? 由于CSS最终目的是为HTML添加样式,事实证明还有另一种有效的方法给变量限定作用域:DOM元素。...(background-color, 25%); } 上面的代码并不是有效的Sass(或CSS),你应该明白它想达到什么目的。...如果类info 或error已经加在了.alert上(或如果background-color通过JavaScript或用户样式设置),button元素能据此作出相应的响应。...显然这在Sass中行不通,因为预处理器不知道DOM结构,希望你清楚的认识到为什么这类东西是有用的。 调用一个特定的用例:出于可访问性的原因,在继承了DOM属性上运行颜色函数是极其方便的。...例如,确保文本始终可读,并充分与背景颜色形成鲜明对比。 有了自定义属性和新的CSS颜色函数,很快这将成为可能。 预处理器变量不可互操作 这是预处理器相对明显的一个缺点,提到它是因为觉得重要。

1.4K30

CSS 变量由浅入深,提升效率必备知识!

第二个#221只在变量--primary-color由于某种原因没有定义的情况下有效。不仅如此,我们还可以var()嵌套到另一个var()中。...,这是不是很棒?...这是完全错误的。 由于color属性是继承的,因此浏览器执行以下操作: 该属性是否可继承? 如果是,父节点是否拥有该属性?...如果我们想根据元素调整alpha值,这样做可以提供灵活性。唯一的缺点是无法使用DevTools颜色选择器来调整rgba值。 另一个例子是将它与background属性一起使用。...看到颜色 使用CSS变量时,看到颜色背景值的视觉指示器是否有用? Chrome和Edge证明了这一点。 计算值 要查看CSS变量的计算值,只要将鼠标悬停或单击即可。

2.2K20

less快速入门

你可以在你的网站中引入 less.js ,这样在真正的运行环境下它就可以自动编译,这个过程非常缓慢,所以不建议这么使用。 推荐的方式是提前编译成 CSS 代码并且一个正常的发展版本备份在线上。...接下来你就可以样式表引入到 HTML 中了,如果在编译过程中出现了错误,将会在终端的命令行中提示你。 ---- 2....变量 Less 的一个主要功能就是可以让你像在其它高级语言中一样声明变量,这样你就可以存储你经常使用的任何类型的值 : 颜色,尺寸,选择器,字体名称和 URL 等。...这里,我们声明了两个变量,一个背景颜色一个是文本颜色,它们都是十六进制的值。...函数 Less 中也有函数,这让看起来像一门编程语言了,不是? 让我们来看一下  fadeout, 一个降低颜色透明度的函数。

67030

前端学习(8)~css学习(二):背景属性

另外还有一个综合属性叫做background的作用是:将上面的多个属性写在一个声明中。...xpos ypos 第一个值是水平位置,第二个值是垂直位置。 左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。 如果您仅规定了一个值,另一个值将是50%。...xpos ypos 第一个值是水平位置,第二个值是垂直位置。 左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。 如果您仅规定了一个值,另一个值将是50%。...background-clip属性:设置元素的背景背景图片或颜色是否延伸到边框下面 格式举例: background-clip: content-box; 超出的部分,裁剪掉。...同时设置多个背景 我们可以给一个盒子同时设置多个背景,用以逗号隔开即可。可用于自适应局。 代码举例: <!

1.3K00

CSS新规范:样式查询

一旦满足了这个条件,CSS用于该容器内的组件。 样式查询 简单地说,样式查询让我们查询一个容器的CSS属性或CSS变量。 样式查询仍然是试验性的,目前只在Chrome Canary中实现。...现在,我们可以检查变量--boxed: true是否添加到容器中,如果是,我们可以在此基础上改变子元素的样式。...容器查询还不够这是一个好问题。在容器查询中,我们可以根据一个组件的父级宽度来控制的样式,这非常有用。不过,在某些情况下,我们可能不需要查询尺寸,而是想查询一个容器的计算样式。...我们不能用类名来解决这个问题? 是的,我们可以。使用样式查询的目的是使 CSS 更易读并更容易修改。上述逻辑可以作为一个组件 CSS 写出,而无需将所有这些样式添加到条件类中。...使用情况和示例 基于上下文的样式设置 这是一种常见的使用情况,在同一包装器中我们使用了相同的组件用法不同。在右侧,我们有一个文章组件,可能包含一个数字或不包含。

92430

一步到位:三行CSS代码轻松实现全网站暗黑模式

在Mac上,可以在系统设置>外观下找到: 使用系统颜色的深色模式 首先,我们创建一个带有标题的简单HTML: Hello Darkness, My Old Friend<...当前如果现在指定为 dark 浏览器也不会变成黑色。 这是因为 user-agent 样式表没有设置任何默认颜色。...这是一个浅色模式演示,在Safari中展示了可用的系统颜色如果我们切换到深色模式,某些颜色会完全改变(就像我们已经遇到的 Canvas 和 CanvasText ),而其他颜色只会稍微改变: 使用系统颜色进行黑暗模式是一种简化的黑暗模式体验...以浅色模式为默认,我们颜色添加到 :where(body) -部分,将它们与我们的常规 body -样式分开: /* Properties */ :where(body) { --background-color...: #FFF; --text-color: #222; } body { background-color: var(--background-color); color: var(--text-color

1.5K30

学会使用 CSS 自定义滚动条,能让你做的产品更有用户体验!

一直对如何在CSS中定制滚动条很感兴趣,一直没有机会这样做。今天,就记录一下自己的学习过程。 简介 首先需要介绍一下滚动条的组成部分。...我们只能添加颜色。我们不能添加shadows`、gradients、rounded,或任何类似的东西,我们被允许定制的只是颜色。 指定自定义滚动条的范围 要知道的一个重要问题是,在哪里定制滚动条。...你希望样式是通用的,对网站上的所有滚动条都有效?还是你只想让它用于特定的部分? 使用旧的语法,我们可以编写选择器,而不必将它们附加到元素上,它们用于所有可滚动的元素。...注意到的是,如果你想要一个通用的样式,应该被应用于元素,而不是。...在新的语法中,我们不能调整滚动条的宽度,唯一能做的的是改变 track 和thumb的背景颜色

2K20

CSS Flex弹性盒布局

在上一篇博文CSS 布局_2 Flex弹性盒里,对 Flex 弹性盒有着详细的介绍,这里就不再复述了,书写页面前,我们先来介绍一个之前没提到的知识点——伪类选择器 伪类选择器 :hover 伪类选择器...,用于选择鼠标指针浮动在上面的元素,只能改变自身或者子元素的 css 属性,不能改变兄弟元素或者父级元素的 css 属性,同样的选择器还有::link 选择器,设置指向未被访问页面的链接的样式,:visited...选择器,用于设置指向已被访问的页面的链接,:active 选择器,用于活动链接,即鼠标点击链接时的状态,按照 LoVe HAte 的便捷记忆方法,按顺序来声明 :link,:visited,:hover...属性,并没有使用到之前提过的三种颜色表示方式(① 关键字,颜色名称的背景颜色;② 16 进制值的背景颜色;③ RGB 三原色代码的背景颜色),而是使用到了 HSL,即色相(Hue)、饱和度 (Saturation...)、亮度 (Lightness),这是一种 RGB 色彩模型中的点在圆柱坐标系中的表示法,还有一个参数是 A,表示的是透明度 (Alpha),这个参数也可以使用到 RGB 中 色相:是色彩的基本属性,

67950

使用 PostCSS 插件让你的网站支持暗黑模式

; 缺点:存在浏览器兼容性,需要 edge16+ 才支持,老项目实现起来, 需要重构 css, 所以对司来说就不适用了,如果是新的 webapp,我会毫不犹豫的选择这种方式。...PostCSS PostCSS 核心包含一个解析器,该解析器生成一个 CSS AST (抽象语法树) ,这是一个解析 CSS 字符串的节点树的表示。...(less|css|scss|sass)/ ); 2、删除不包含颜色的样式,保留 border-color background-color 等包含颜色的样式 ["color", "background...是否可以写一个工具帮我们来升级呢? 20+项目是否可以写一个工具自动转换一下?...prop: ["background-color", "background"], from: ["#fff", "#ffffff", "@white"], to: "@component-background

82110

使用 CSS prefers-* 规范,提升网站的可访问性与健壮性

more:希望使用对比度更高的界面 以 prefers-contrast: less 为例子,语法如下: body { background: #fff; // 文字与背景对比度为 5.74...color: #666; } // 提升对比度 @media (prefers-contrast: more) { body { background: #fff; // 文字与背景对比度为...什么是色彩对比度 是否曾关心过页面内容的展示,使用的颜色是否恰当?色弱、色盲用户能否正常看清内容?良好的色彩使用,在任何时候都是有益的,而且不仅仅局限于对于色弱、色盲用户。...运用到我们的页面上,大多数的情况就是背景色(background-color)与内容颜色(color)的对比差异。...不过,这是仍处于实验室的功能,暂时没有任何浏览器支持该媒体查询~ ?

63620

了解CSS的initial初始值

CSS 写了十多年,总是没去触碰 initial 到底是个什么。称之为无知、懈怠也好,或者运气好也罢,反正就是没有在意,并且在可能会用到这个值的场合甚至没有想去查询一下。...如果该属性不是一个可继承属性,并且层叠关系没有导致一个值,则 指定值 就被作为初始值 呃...好吧。用 Google 翻译(说着玩的!)...让initial和inherit有所区别的额外步骤是,inherit会检查在采用初始值之前,是否可以继承层叠关系中的其他属性值。 ?...# 什么时候使用 initial 习惯于 initial 视为一种 `hard reset`。...: #fff; }tbody tr { /*自定义的颜色背景色*/ background-color: #eaeaea; color: #ff9e2c; }tbody tr:nth-child(odd

1.1K20

20 个让你效率更高的 CSS 代码技巧

5.图片作为背景 当给页面添加图片时,尤其需要图片是响应式的时候,最好使用background属性来引入图片,而不是标签。...但是并不会起作用,因为按钮在上面有一个ID选择器,同样设置了background-color,ID选择器具有更高的权重,所以按钮的颜色是蓝色的。...14.使用text-transform转换字母为大写 本条适用于英文环境,不适合中文 在HTML中,可以某个单词全部写为大写字母来表达强调的含义。...17.使用AutoPrefixer达到更好的兼容性 浏览器前缀是CSS中最烦人的事情之一,每个属性需要的前缀是不一致的,你永远不知道到底需要哪一个如果真的要把一个一个手动添加到样式表中,那无疑是一个无聊的噩梦...它会告诉你是否犯了任何错误,警告错误的用法,并为您提供改进代码的提示。

55120

前端入门学习--CSS

背景颜色 background-color属性定义了元素的背景颜色。...为了简化这些属性的代码,我们可以这些属性合并在同一个属性中,背景颜色的属性简写为background。...背景颜色属性指定链接背景色: a:link {background-color:#B2FF99;} a:visited {background-color:#FFFF85;} a:hover {background-color...一个浮动元素会尽量向左或向右移动,直到的外边缘碰到包含框或另一个浮动框的边框为止。 浮动元素之后的元素围绕。 浮动元素之前的元素将不会受到影响。...如果图像是右浮动,下面的文本流环绕在左边: img { float:right; } 彼此相邻的浮动元素 如果把几个浮动的元素放到一起,如果有空间的话,它们彼此相邻。

27.6K20

Pandas表格样式设置,超好看!

数据透视表是一种表格数据结构,提供来自另一个表的信息的汇总概述,根据一个变量组织数据并显示与另一个变量关联的值。...样式:设置标题的背景颜色 在本节中,我们应用样式到标题和表格。因此,我们使用背景颜色来突出显示标题和表格的其余部分。...在接下来的部分中,我们深入研究颜色图的概念,表示以渐变方式排列的颜色光谱。...(cmap= 'viridis' ,subset=columns) ) 风格:列中的彩色背景 在下一个代码块中,我们通过向特定列引入不同的颜色背景来增强数据透视表的视觉表示。...# 创建一个函数,根据类型图像添加到dataframe def add_image(image_name): img_url = f"img/icons/img_{image_name}.png"

44110

扫盲贴:2021 CSS 最冷门特性都是些啥?

) 其中: 第一部分 可以是任何颜色值,必须值 第二部分 #{2,} 是一个逗号分隔的颜色值列表,用于与第一个值进行比较,必须值 第三部分 [ to [ |...首先,得知道什么是颜色对比度。这个在的这篇文章里,也有提到过 -- 前端优秀实践不完全指南 什么是色彩对比度 是否曾关心过页面内容的展示,使用的颜色是否恰当?色弱、色盲用户能否正常看清内容?...运用到我们的页面上,大多数的情况就是背景色(background-color)与内容颜色(color)的对比差异。...举个例子: { background-color: #fff; color: color-contrast(#fff vs #000, #666, #ddd); } 这里,背景色是白色...示意图如下: 如果应用上 to 关键字: { background-color: #fff; color: color-contrast(#fff vs #000, #666, #ddd

39530

前端之CSS内容

继承是一种机制,允许样式不仅可以应用于某个特定的元素,还可以应用于的后代。例如一个body定义了的字体颜色也会应用到段落的文本中。...3、背景属性 /*背景颜色*/ background-color: red; /*背景图片*/ background-image: url('1.jpg'); /* 背景重复 repeat(默认):...,用于四边; 提供两个,第一个用于上-下,第二个用于左-右; 如果提供三个,第一个用于上,第二个用于左-右,第三个用于下; 提供四个参数值,按上-右-下-左的顺序作用于四边。...这是一个常识性的知识点,因为这是两个不同的流,一个是浮动流,另一个是定位流,但是  relative 却可以。因为原本所占的空间仍然占据文档流。   ...在理论上,被设置为 fixed 的元素会被定位于浏览器窗口的一个指定坐标,不论窗口是否滚动,都会固定在这个位置。 示例代码: <!

5.2K100

为你的网页添加深色模式

为容器设置一个舒适的阅读样式 接下来,为容器设置样式,把内容的行调整为为阅读时舒适的长度。另外还会添加背景颜色和阴影。为了使页面中的内容框居中,在边距属性的左右值上使用关键字 “auto”。...我们已经失去了对样式的控制,当你用了彩色背景时,会出现一个更大的问题。看看你的照片变成了什么样子。 10....1:root { 2 --background-color: #ededed; 3 --page-background: #fff; 4 --text-color: #212121;...把放在原始根定义之后,在媒体查询中,可以简单地为所有颜色自定义属性选择新值。...创建按钮悬停样式 使用相同的变量,还可以创建可用于两个主题的悬停样式。为了实现这一点,当用户鼠标悬停在按钮上并转换这些属性时,我们反转颜色

1.6K30
领券