是否可以匹配所有链接而无需href通过CSS指定?
例:
<a>Invalid link</a>
Run Code Online (Sandbox Code Playgroud)
我知道可以将所有链接与href匹配,但我只是在寻找相反的东西.
假设我有一些深度嵌套的标记,我想用CSS定位.它可以是任何东西,但例如:
<div>
<div id='someid'>
<span class='someclass'>
<a class='link' href='alink'>Go somewhere</a>
</span>
</div>
<div>
Run Code Online (Sandbox Code Playgroud)
编写<a>直接针对标记的CSS规则是否可以接受,如下所示?
a.link { font-size: large; }
Run Code Online (Sandbox Code Playgroud)
或者这被认为是非标准的,在某些浏览器中可能会失败?我是否需要像这样定位链中的每个元素?
div div span.someclass a.link { font-size: large; }
Run Code Online (Sandbox Code Playgroud) 示例代码:http://jsfiddle.net/RuQNP/
<!DOCTYPE html>
<html>
<head>
<title>Foo</title>
<style type="text/css">
a:link, a:visited {
color: blue;
}
a:hover, a:active {
color: red;
}
.foo a:link, .foo a:visited {
color: green;
}
/* A possible fix */
/*
.foo a:hover, .foo a:active {
color: red;
}
*/
</style>
</head>
<body>
<div class="foo">
<a href="http://example.com/">Example</a>
</div>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)
我期待的是:
悬停时链接显示为红色.
我得到了什么:
悬停时链接显示为绿色.
问题:
color定义的.foo a:link, .foo a:visited
选择器覆盖了a:hover, a:active?这是怎么回事? .foo a:link, .foo a:visited选择器,使其不会覆盖color定义的 …我不知道它是否是任何标准的一部分,但至少有两个主要的浏览器实现了它:
:-webkit-any-link 在Chrome中:-moz-any-link 在Firefox中我找不到任何文件.我想知道它的用途,浏览器支持和使用示例.
CSS 最近添加了伪类:where(),:is()但我不明白何时使用哪个。两者都可用于选择多个元素。这是一个片段,其中两个伪类都实现了相同的效果:
span {
display: inline-block;
height: 100px;
width: 100px;
background-color: grey;
margin-bottom: 10px;
}
:is(.span1-1, .span1-2):hover {
background-color: firebrick;
}
:where(.span2-1, .span2-2):hover {
background-color: teal;
}Run Code Online (Sandbox Code Playgroud)
<span class="span1-1"></span>
<span class="span1-2"></span>
<br>
<span class="span2-1"></span>
<span class="span2-2"></span>Run Code Online (Sandbox Code Playgroud)
有人可以举一个他们行为不同的例子吗?
因此,举例来说,如果我有一个媒体查询,还有一些关于东西的重要规则的常规CSS,它会受到影响吗?
例如:
a{
color:#0000FF!important;
}
@media (max-width: 300px){
a{
color:#FF0000;
}
}
Run Code Online (Sandbox Code Playgroud) 我正在尝试创建我的网站,以便您可以通过每个div中元素的颜色来判断您的位置.该网站只有一个页面,我点击打开该部分时使用jQuery滑出网站的各个部分(而不是单独的.html).
为了向他们展示他们打开了哪个部分,我将每个部分中的所有链接都与打开该部分的文本颜色相同.但是,我还希望<a> </a>标签不是链接,以便为网站添加一些颜色,并吸引观众到关键信息位.出于这个原因,我想只将链接效果应用于<a> </a>实际链接的标签...所以我试过这个:
#box1 a{
color: #68cff2;
}
#box1 a:link:hover{
color: #ffffff;
background-color: #68cff2;
}
Run Code Online (Sandbox Code Playgroud)
这适用于背景颜色,因为它只会更改<a> </a>具有href ="..."的's 的背景颜色,但它不会改变这些链接的字体颜色...有没有办法这个?