Question

我可以这样选择a的孩子：

a > img {
/*change something*/
}

但是我要先选择a:visited，而不是它的孩子。像这样：

a:visited > img {
/*change something*/
}

但是后者似乎不起作用。

HTML示例。如果已访问图像，则要更改图像的外观（例如，添加边框border: 2px solid;）。

<!DOCTYPE html>

<body id="body-html">
  <a href="https://stackoverflow.com/questions/56418220/css-selectors-avisited-childs?noredirect=1#comment99432271_56418220" class="test">
    <img src="https://i.stack.imgur.com/nzzXb.png">
  </a>
</body>

我该如何实现？

Answer 1

尽管：visited链接的直接样式是有限的，但是有很多巧妙的方法可以扩展对访问链接进行样式设置的选项。在2015年，大量博客文章分享了有关样式的新想法：访问过的链接：

https://css-tricks.com/almanac/selectors/v/visited/

Answer 2

security reasons的public void Configure(IApplicationBuilder app, IHostingEnvironment env) { if (env.IsDevelopment()) { app.UseDeveloperExceptionPage(); ListAllRegisteredServices(app); app.UseDatabaseErrorPage(); } else { app.UseExceptionHandler("/Home/Error"); // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts. //app.UseHsts(); } app.UseHttpsRedirection(); app.UseStaticFiles(); app.UseCookiePolicy(); app.UseAuthentication(); app.UseMvc(routes => { routes.MapRoute( name: "default", template: "{controller=Home}/{action=Index}/{id?}"); }); }链接上的大多数CSS规则已被阻止。但是，您仍然可以将:visited应用于它们。

这里唯一要注意的是，由于您只能更改border-color，因此边框也必须也应用于未访问的链接。

border-color

fiddle

CSS选择器-A：参观的孩子

2 个答案: