css a:link 样式的文字和图片

关键词：

【中文标题】css a:link 样式的文字和图片【英文标题】：css a:link style text and images 【发布时间】：2011-04-15 11:35:00 【问题描述】：

我有一个快速的 CSS 问题困扰着我，我现在似乎无法弄清楚。

我已将页面上的链接设置为在悬停时有一个底部边框，但底部边框出现在具有链接的图像上，我不知道如何防止边框出现图片。

这是我目前拥有的。

#main a:hover 
    border-bottom:solid 1px #7b9a04;
    color:#333;


img, img a:hover 
    border-bottom:none;

但是这似乎不起作用。我不认为它有任何其他样式覆盖它，因为如果我删除 #main a:hover 样式，图像不再有底部边框，但网站上的其他链接也没有。

【问题讨论】：

好吧，img a:hover 肯定不行，因为img 标签不能有后代。 a img:hover 或 a:hover img 更好:) 无论如何，链接上的border-bottom...不是text-decoration:underline，你知道...链接的默认样式. 我更喜欢使用border-bottom，因为它为您提供了比text-decoration:underline更多的选择。使用边框，您可以调整粗细，使其颜色与文本完全不同。 如果你回到这个，我认为你应该将 immysl 的答案标记为解决方案。 【参考方案1】：

怎么样

a[href$=jpg]:hover, 
a[href$=jpeg]:hover, 
a[href$=png]:hover, 
a[href$=gif]:hover 
        text-decoration: none;
        border: 0;
        border: none;
        

【讨论】：

【参考方案2】：

问题在于链接元素<a>，而不是图片链接本身。当您为<a> 的悬停状态指定下边框时，它也适用于包含图像的链接。因此，当您将鼠标悬停在此类链接（包含图像）上时，它是显示边框底部的链接。不是图片。

不过有一个解决方法。尝试申请：

a img 
    display: block;
    

这将重置<a> 样式。这种方法有一个警告——将它与内联图像一起使用可能会破坏布局。所以请谨慎使用。

【讨论】：

这对我有用。正如您所提到的，我认为这里的其他答案没有意识到问题出在链接上，而不是图像上。 这似乎是一个非常糟糕的解决方法，因为它会强制所有带有链接的图像默认被阻止，对吗？更好的选择是将特定类放在链接图像的 元素上并以这种方式定位它吗？【参考方案3】：

如何在悬停声明之后明确定义图像没有边框？

#main a:hover 
  border-bottom: solid 1px #7b9a04;


img 
  border: none;

【讨论】：

似乎没有帮助。我对此一无所知。 @Adam：你能分享一个链接到你的页面还是分享你的 html/css，有可能其他东西会覆盖它 我认为这不起作用，因为边框应用于链接，而不是图像。【参考方案4】：

根据css specificity，只要您将图像边框 css 放在其他 css 之后，它就应该可以工作。

顺便说一句，没有必要像那样将 p 和 td 分开。

#main a 
    color:#7b9a04;
    text-decoration:none;


#main a:hover 
    color:#333;
    border-bottom:solid 1px #7b9a04;

真的是你所需要的。

【讨论】：

感谢您的提示。我仍然遇到问题，并且图像边框确实出现在其他链接样式之后。也许它是某种缓存问题。我明天早上在另一台机器上试试。

在dw,css样式中link，visited，hover，active这四个分别表示啥意思？

...序：a:link选择器设置指向普通的、未被访问页面的链接的样式a:visited选择器用于设置指向已被访问的页面的链接a:active选择器用于活动链接a:hover选择器用于选择鼠标指针浮动在上面的元素。text-decoration属性大多用于去掉链接中的... 查看详情

在dw,css样式中link，visited，hover，active这四个分别表示啥意思？

...建一个A标记．这时A标记是只能点击的．没有任何效果在样式中设置a:link　里面写样式　正常a:visited　点击a:hover　鼠标经过a:active　鼠标按下你试试参考技术A这些是伪类，分别是可点击，点击后，鼠标经过和点击时的样式。 查看详情

linkvisitedhoveractived顺序

超链接访问过后hover样式就不出现了，被点击访问过的超链接样式不再具有hover和active了，解决方法是改变CSS属性的排列顺序？a:link{}a:visited{}a:hover{}a:active{}为了符合浏览器解析CSS所遵循的就近原则，将一般的放在上面，将特殊的... 查看详情

幕客前端基础入门-css文本样式

...信息更加关注和易于阅读，这就是需要使用css字体和文本样式属性进行文字的样式设置。网页中有独立的的文字，也有成段的文字段落。针对文字内容，如何使用css样式去设置文字的颜色、大小、字体、加粗等效果。针对段落文... 查看详情

幕客前端基础入门-css文本样式

...信息更加关注和易于阅读，这就是需要使用css字体和文本样式属性进行文字的样式设置。网页中有独立的的文字，也有成段的文字段落。针对文字内容，如何使用css样式去设置文字的颜色、大小、字体、加粗等效果。针对段落文... 查看详情

6css链接样式

链接样式链接的样式，可以用任何CSS属性（如颜色，字体，背景等）。特别的链接，可以有不同的样式，这取决于他们是什么状态。这四个链接状态是：a:link-正常，未访问过的链接a:visited-用户已访问过的链接a:hover-当用户鼠标... 查看详情

css链接

不同的链接可以有不同的样式。链接样式链接的样式，可以用任何CSS属性（如颜色，字体，背景等）。特别的链接，可以有不同的样式，这取决于他们是什么状态。这四个链接状态是：a:link-正常，未访问过的链接a:visited-用户已... 查看详情

制作网页的属性面板有html选项和css选项，两个有啥区别？

...色，对齐方式，高度和宽度等；2、一般统一在CSS中设置样式，你可以随便打开网站查看源码，基本上看不到HTML中有设置样式的；3、html是用来写网页内容的，像网页上文字、图片内容等都是用html来写；4、css是用来写样式表的，... 查看详情

css链接

CSS链接不同的链接可以有不同的样式。链接样式链接的样式，可以用任何CSS属性（如颜色，字体，背景等）。特别的链接，可以有不同的样式，这取决于他们是什么状态。这四个链接状态是：(通过颜色区分)a:link-正常，未访问过... 查看详情

toolstrip设置图片和文字的样式

默认的样式是文字在右边，图片左边，我想让图片在上，文字在下，要怎么设置！谢谢参考技术AImageAlign设为TopCenterTextAlign设为BottomCenter试试 查看详情

css两行居中，三行居左，请问怎么弄

...居中答：水平居中：1、单独文字垂直居中只需要设置CSS样式line-height属性即可。2、文字与图片同排，在设置div高度同时再对此css样式的图片“img”样式设置vertical-align:middle垂直居中属性，如.yangshiimgvertical-align:middle;。3不确定宽... 查看详情

html链接文字颜色怎么设置

...颜色值)如果单独定义一条a标签，可以先找前面的div，写a样式的时候，带上div的命名。如<divclass="ys"><ahref="http://xxxx">文字颜色</a></div>在css中写上:.ysacolor:#000;相关介绍：a标签样式一组专门的预定... 查看详情

前端css样式2

...选择器: a标签<style>/*a标签没有被访问过时设置的样式*/a:link{color:green;font-size:20px;}/*a标签访问中时设置的样式,鼠标点击下去，还没有抬起来时*/a:active{color:black;}/*a标签访问过之后设置的样式*/a:visited{color:red;}/*鼠标悬浮到... 查看详情

4css文本和文字样式

CSS文本样式： 通过文本属性，改变文字 *范围小的选择器生效优先级高于范围大的选择器 css样式属性之间没有先后顺序，有这条属性就行 如果对盒子没有指定宽高，那么盒子的宽高，由其子元素来撑开 选择器+声明叫做一条css... 查看详情

css样式中li+li表示啥意思？

参考技术A你好楼主，这句话是样式.navigation下面li列表里a标签上selected的样式。可以直接理解为a标签样式，和我们平时写a:link这样子的一样。希望我的回答能对你有帮助。@^_^@还原为html的就是这样了。 参考技术B表示第一个li后... 查看详情

a标签的常见样式

在支持CSS的浏览器中，链接的不同状态都可以不同的方式显示，这些状态包括：活动状态，已被访问状态，未被访问状态，和鼠标悬停状态。分别如下设置：　　a:linkcolor:red/*未访问的链接*/　　a:visitedcolor:green/*已访问的链接*/... 查看详情

css---伪类选择器

伪类选择器的作用：控制标签在不同状态下的样式。标签的四种状态：link：没有访问过的状态；hover：鼠标经过的状态；active：鼠标激活（按下但没有松开）的状态；visited：已经被访问过的状态（鼠标点下且松开）。注意事项... 查看详情

css3css——链接

CSS链接样式属性描述a:link普通的、未被访问的链接a:visited用户已访问的链接a:hover鼠标指针位于链接的上方a:active链接被点击的时刻1.a:link ：未被访问的链接今天学到一点就是当使用a:link时，变换颜色却不起作用，后来查找资... 查看详情