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

CSS选择器排除问题

楼主#
更多 发布于:2012-04-09 09:35
a:hover:not(img){
...................
}
上面代码不知道怎么改,可能根本不对~理想作用是这样的:
<a href="">TEST</a> 对于这个有效.
<a href=""><img scr=""/></a> 对于这个无效
lonely_8
非常火狐
非常火狐
  • UID30273
  • 注册日期2009-09-03
  • 最后登录2022-08-09
  • 发帖数733
  • 经验469枚
  • 威望0点
  • 贡献值86点
  • 好评度147点
  • 社区居民
  • 忠实会员
1楼#
发布于:2012-04-09 09:35
貌似现在的CSS还没有通过子元素匹配父元素的选择器。
你可以通过href的不同改用属性选择器,
或根据文档结构不同改用结构性伪类选择器
MalcKear
千年狐狸
千年狐狸
  • UID35386
  • 注册日期2011-03-05
  • 最后登录2020-03-02
  • 发帖数1348
  • 经验131枚
  • 威望0点
  • 贡献值16点
  • 好评度10点
  • 社区居民
  • 忠实会员
2楼#
发布于: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;}
lonely_8
非常火狐
非常火狐
  • UID30273
  • 注册日期2009-09-03
  • 最后登录2022-08-09
  • 发帖数733
  • 经验469枚
  • 威望0点
  • 贡献值86点
  • 好评度147点
  • 社区居民
  • 忠实会员
3楼#
发布于:2012-04-09 09:35
http://www.mozilla.org/en-US那个firefox logo狂闪的原因是因为
子元素(img)使用了绝对定位(position:absolute),
这个属性默认是根据浏览器边框定位的,
当其最近的祖先元素使用了相对定位(position: relative),
则会根据这个最近的祖先元素定位。
你定义的新样式 将这个最近的祖先原始改为了他的父元素(a)导致原先的定位错乱
所以当鼠标悬停在上面时触发原先网页的定位而“闪”到右边。

综上所述,全局CSS样式的敝处就是会导致个别网站的排版错乱,
只能有针对地那些的网站写CSS了。
MalcKear
千年狐狸
千年狐狸
  • UID35386
  • 注册日期2011-03-05
  • 最后登录2020-03-02
  • 发帖数1348
  • 经验131枚
  • 威望0点
  • 贡献值16点
  • 好评度10点
  • 社区居民
  • 忠实会员
4楼#
发布于:2012-04-09 09:35
lonely_8:http://www.mozilla.org/en-US那个firefox logo狂闪的原因是因为
子元素(img)使用了绝对定位(position:absolute),
这个属性默认是根据浏览器边框定位的,
当其最近的祖先元素使用了相对定位(position: relative),
则会根据这个最近的祖先元素定位。
你定义的新样式 将这个最近的祖先原始改为了他的父元素(a)导致原先的定位错乱
所以当鼠标悬停在上面时触发原先网页的定位而“闪”到右边。

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

3Q,还好这些网站不多,就不烦心了
alanfly
千年狐狸
千年狐狸
  • UID31035
  • 注册日期2009-11-10
  • 最后登录2023-10-31
  • 发帖数2765
  • 经验576枚
  • 威望1点
  • 贡献值128点
  • 好评度98点
  • 社区居民
  • 最爱沙发
  • 忠实会员
5楼#
发布于:2012-04-09 09:35
lonely_8:貌似现在的CSS还没有通过子元素匹配父元素的选择器。
你可以通过href的不同改用属性选择器,
或根据文档结构不同改用结构性伪类选择器
回到原帖

论坛里看到过,css4就有了,到时就爽了。
noe132
小狐狸
小狐狸
  • UID37651
  • 注册日期2011-10-30
  • 最后登录2016-10-15
  • 发帖数67
  • 经验10枚
  • 威望0点
  • 贡献值0点
  • 好评度0点
6楼#
发布于:2012-04-09 09:35
用JS
当a:hover 的时候
先判断position的值,如果是static就设置成relative,不是static就不变
然后获取是否存在top,left,或者bottom,right,如果存在top,left的值各+1,或者bottom right的值各-1

不知这样是否可行,我认为是可以的
白左
千年狐狸
千年狐狸
  • UID34985
  • 注册日期2010-12-29
  • 最后登录2023-11-13
  • 发帖数2039
  • 经验655枚
  • 威望0点
  • 贡献值364点
  • 好评度69点
  • 社区居民
  • 忠实会员
7楼#
发布于:2012-04-09 09:35
op问题,用:empty比较好
或者用
a:hover 指定样式
a > img:hover 覆盖样式

不过究其原因,是样式本身写得就不妥,可以考虑样式本身的修改替代方案
比如用js
-いたんですか? -ええ、ずっと
游客

返回顶部