MalcKear
千年狐狸
千年狐狸
  • UID35386
  • 注册日期2011-03-05
  • 最后登录2020-03-02
  • 发帖数1348
  • 经验131枚
  • 威望0点
  • 贡献值16点
  • 好评度10点
  • 社区居民
  • 忠实会员
阅读:8696回复:7

CSS选择器排除问题

楼主#
更多 发布于:2012-04-09 09:35
a:hover:not(img){
...................
}
上面代码不知道怎么改,可能根本不对~理想作用是这样的:
<a href="">TEST</a> 对于这个有效.
<a href=""><img scr=""/></a> 对于这个无效
MalcKear
千年狐狸
千年狐狸
  • UID35386
  • 注册日期2011-03-05
  • 最后登录2020-03-02
  • 发帖数1348
  • 经验131枚
  • 威望0点
  • 贡献值16点
  • 好评度10点
  • 社区居民
  • 忠实会员
1楼#
发布于:2012-04-09 09:35
主要是下面这段CSS遇到的问题.
在很多网页上,鼠标悬停在图片链接的时候,狂闪.
比如www.mozilla.org/en-US 中的那个Firefox logo,用这段CSS那个图标就错位了很多.
有的网页甚至狂闪~

/*鼠标滑过链接时改变链接位置及阴影效果*/
a:hover{left:1px !important;
top:1px !important;
position: relative !important;
text-shadow: 1px 1px 3px !important;}
MalcKear
千年狐狸
千年狐狸
  • UID35386
  • 注册日期2011-03-05
  • 最后登录2020-03-02
  • 发帖数1348
  • 经验131枚
  • 威望0点
  • 贡献值16点
  • 好评度10点
  • 社区居民
  • 忠实会员
2楼#
发布于:2012-04-09 09:35
lonely_8:http://www.mozilla.org/en-US那个firefox logo狂闪的原因是因为
子元素(img)使用了绝对定位(position:absolute),
这个属性默认是根据浏览器边框定位的,
当其最近的祖先元素使用了相对定位(position: relative),
则会根据这个最近的祖先元素定位。
你定义的新样式 将这个最近的祖先原始改为了他的父元素(a)导致原先的定位错乱
所以当鼠标悬停在上面时触发原先网页的定位而“闪”到右边。

综上所述,全局CSS样式的敝处就是会导致个别网站的排版错乱,
只能有针对地那些的网站写CSS了。
回到原帖

3Q,还好这些网站不多,就不烦心了
游客

返回顶部