css中a.other:hover，这个是啥意思？

Posted 2023-03-31

a:hover 是鼠标划过时的效果
a.other 是class="other"的a标签的效果

两者结合起来就是class="other"的a标签在鼠标划过时的效果
比如<a href="other">链接文本</a> 参考技术A CSS 伪类 (Pseudo-classes)：用于向某些选择器添加特殊的效果

锚伪类
在支持 CSS 的浏览器中，链接的不同状态都可以不同的方式显示，这些状态包括：活动状态，已被访问状态，未被访问状态，和鼠标悬停状态。

a:link color: #FF0000 /* 未访问的链接 */
a:visited color: #00FF00 /* 已访问的链接 */
a:hover color: #FF00FF /* 鼠标移动到链接上 */
a:active color: #0000FF /* 选定的链接 */

提示：
在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。提示：伪类名称对大小写不敏感。

伪类与 CSS 类伪类可以与 CSS 类配合使用：a.other : visited color: #FF0000
<a class="other" href="#">CSS Syntax</a> 参考技术B 类别是other的a标签的鼠标在其上面的样式。
a.other:hover
color:red;



<a class='other'>aaaaaaaaaaa</a>

自己运行下，就知道效果了 参考技术C 标签A的样式class值是other，hover是鼠标放上去的样式
注：只能是A标签
意思就是一个链接鼠标放上去的样式

这个 CSS 语句中的“@”是啥意思？

【中文标题】这个 CSS 语句中的“@”是啥意思？

【英文标题】：What does the "@" in this CSS statement mean?这个 CSS 语句中的“@”是什么意思？

【发布时间】：2012-01-02 04:04:44

【问题描述】：

@-webkit-keyframes roll 
    100%  -webkit-transform: rotate(360deg); 

“@”和“100%”是什么意思？

【问题讨论】：

重复***.com/questions/3453257/…

这不是该问题的直接重复，因为它指的是未在此处记录的 -webkit 特定规则。

同意，这不是重复的（至少，不是链接到的问题）。链接的问题是指非常不同的@ 规则。

这就是为什么我突然对我对这个问题的回答获得了赞成票。虽然我的回答确实解释了 @ 符号的用途，但我同意 Duncan 和 James 的观点，因为它没有充分回答这个特定的 WebKit 问题。

【参考方案1】：

这些是由 webkit 开发团队定义的 CSS3 规则，在正式接受为 CSS3 规范的一部分之前 - 因此在选择器中包含 -webkit。 @ 表示这是一条 CSS 规则，而不是标准选择器。 @-webkit-keyframes 用于为 CSS 视觉效果动画属性指定关键帧。

您可以为动画定义任意数量的关键帧；如果您只给出了最终关键帧（当动画完成 100% 时），则已定义。 The full syntax and documentation for these rules can be found here.

例如，如果您希望动画开始缓慢然后加速，同时平滑地开始和结束，您可以设置在旋转度中具有非线性步长的中间关键帧：

@-webkit-keyframes roll 
    25%  -webkit-transform: rotate(24deg);
          -webkit-animation-timing-function: ease-in;
        
    50%  -webkit-transform: rotate(72deg); 
    75%  -webkit-transform: rotate(168deg); 
    100%  -webkit-transform: rotate(360deg); 
        -webkit-animation-timing-function: ease-out;
        

【参考方案2】：

“@”在样式表中声明了一个 At-Rule。在每种情况下，它肯定都有特殊的含义。

“100%”指的是由@keyframes 规则定义的CSS 动画的最终状态，或者在本例中为@-webkit-keyframes 规则。您实际上必须声明动画的第一个 (0%) 和最终 (100%) 状态，以便用户代理知道何时开始和停止动画。

这里还有一些： At-Rules 是渲染引擎的指令；它们将 CSS 规则集语法扩展到常规选择器和声明块之外。 At-Rules 使用 At-Keyword 声明，即简单的“@keyword”，后跟与所使用的 At-Keyword 相关的 At-Rules 语句。示例：@charset "ISO-8859-15";

根据 At-Rule 语句类型，可选参数可以跟在 At-Keyword 后面。示例：@media screen color:#000; ，其中 screen 是可选参数。