在CSS中#wrap #header #navigation .active a:visited, active是啥意思
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了在CSS中#wrap #header #navigation .active a:visited, active是啥意思相关的知识，希望对你有一定的参考价值。
他们是CSS中不同的选择器！
1、#wrap ... ... 表示ID选择器（唯一选择）id 选择器以 "#" 来定义。
下面是id选择器实例
<html><head>
<style>
#red color:red;
#green color:green;
</style>
</head>
<body>
<p id="red">这个段落是红色。</p>
<p id="green">这个段落是绿色。</p>
</body>
</html>
2、.active 表示Class选择器（类选择器）在 CSS 中，类选择器以一个点号显示。
类选择器实例
<html><head>
<style>
.red color:red;
</style>
</head>
<body>
<p class="red">这个段落是红色。</p>
<p class="red">这个段落也是红色。</p>
</body>
</html>
a:visited ... ... 表示伪类选择器，在支持 CSS 的浏览器中，链接的不同状态都可以不同的方式显示，这些状态包括：活动状态，已被访问状态，未被访问状态，和鼠标悬停状态。
伪类选择器实例：
<html><head>
<style>
a:link color: #FF0000/* 未访问的链接 */
a:visited color: #00FF00/* 已访问的链接 */
a:hover color: #FF00FF/* 鼠标移动到链接上 */
a:active color: #0000FF/* 选定的链接 */
</style>
</head>
<body>
<a href="zhidao.baidu.com">百度知道</a>
</body>
</html>
XXX ... ... 表示元素选择器，最常见的 CSS 选择器是元素选择器。换句话说，文档的元素就是最基本的选择器。如果设置 HTML 的样式，选择器通常将是某个 HTML 元素，比如 p、h1、em、a，甚至可以是 html 本身
元素选择器实例：
<html><head>
<style>
h1color:red
h2color:green
</style>
</head>
<body>
<h1>百度知道</h1>
<h2>百度知道</h2>
</body>
</html> 参考技术A #wrap/#header#navigation是用id调用的一种方式，id调用的方式是#名字，
.active是类样式也是一种调用方式，
a:visited是鼠标经过按钮的意思！
active是鼠标点击按钮的意思！
不清楚Q我，357763641本回答被提问者和网友采纳 参考技术B 这是CSS先择符的继承
你了解一下CSS先择符就会知道这些了。
这些都是很简单的。
如何在 1 个 div 类中应用 2 个 CSS 样式？
【中文标题】如何在 1 个 div 类中应用 2 个 CSS 样式？【英文标题】：how to apply 2 css styles in 1 div class? 【发布时间】：2020-11-03 11:02:22 【问题描述】：我正在尝试移动放在 Wordpress 标题中的简码。问题是，从下面的 2 个 css 规则中，只有第一个有效。如果我更改顺序，那么再次只有第一个有效。
@media only screen and (max-width: 1024px)
.right-header-wrap-flags
position: absolute;
top: 25px;
left: 22px;
.navigation-wrap
padding-top: 60px;
@media only screen and (min-width: 1025px)
.right-header-wrap-flags
position: relative;
left: 600px;
top: 50px;
【问题讨论】：
你在末尾少了一个括号 这是一个有点笼统的问题......首先你错过了一个右括号。 顶部的媒体屏幕有效，第二个无效。如果更改顺序只有顶部媒体屏幕有效，则相同 如果您的页面是 900 像素的示例，它适用于第一个条件...我认为您必须了解有关媒体查询的更多信息 我知道，但问题是即使我再次切换顺序，也只有第一个媒体规则适用，顶部的媒体规则仅适用 【参考方案1】：如果您希望“Navigation-wrap”类成为第一个媒体查询的一部分：
@media only screen and (max-width: 1024px)
.right-header-wrap-flags
position: absolute;
top: 25px;
left: 22px;
.navigation-wrap
padding-top: 60px;
<-- this was missing!
@media only screen and (min-width: 1025px)
.right-header-wrap-flags
position: relative;
left: 600px;
top: 50px;
如果“navigation-wrap”应该独立于您的媒体查询：
@media only screen and (max-width: 1024px)
.right-header-wrap-flags
position: absolute;
top: 25px;
left: 22px;
<-- this was missing!
.navigation-wrap
padding-top: 60px;
@media only screen and (min-width: 1025px)
.right-header-wrap-flags
position: relative;
left: 600px;
top: 50px;
原因：您忘记了括号，这基本上意味着第二个媒体查询是您的第一个，所以它永远不会发生！当您的屏幕尺寸达到 1025 像素时，第一个媒体查询不再处于活动状态，而第二个媒体查询在第一个媒体查询内，因此它也不会再发生了。那应该可以解决它
【讨论】：
感谢您的回复。改了还是一样 检查浏览器检查器使用了什么媒体查询 所以如果你把屏幕尺寸改成超过 1025 像素，第一条规则仍然适用吗？ 最后还缺少一个括号。仔细检查。 @Pantelis Sarras 你如何改变屏幕尺寸来检查你的代码？我在一个示例中进行了尝试，它对我来说效果很好【参考方案2】：是的，只有第一个 CSS 代码有效，您应该使用 javascript，根据您指定的条件更改样式。
【讨论】：
以上是关于在CSS中#wrap #header #navigation .active a:visited, active是啥意思的主要内容，如果未能解决你的问题，请参考以下文章