[求助]CSS如何控制其他标签的属性

一个标签的css如何控制另一个标签的属性？只用css怎么实现，纯新手，求大神

不会，没试过

可以给两个或以上标签加相同的class 然后在css中定义class的属性来控制不同标签的样式，不知道你说的是不是这个意思？

楼主可以使用像【~】这种兄弟选择符。
之前写过一个小案例，纯css模拟【筋斗云】效果，ie6不支持兄弟元素，要想兼容最好是用jquery来写，源码如下，供楼主参考。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>css3导航特效之跟随鼠标一---艺灵设计,qq群:231749938</title>
<meta name="author" content="艺灵设计,315800015@qq.com,yilingsj@gmail.com, http://www.yilingsj.com/css3/2013-12-29/139.html">
<meta name="keywords" content="css3导航特效,跟随鼠标,鼠标滑过特效,过渡属性,弹性动画">
<style type="text/css">
*{margin:0;padding:0}
body {font-size:14px;font-family:Arial, Helvetica, sans-serif, "宋体"}
.clearfix:after {display:table;content:"";clear:both;line-height:0;}
.clearfix{zoom:1}/*ie7--*/
a{text-decoration:none;color:rgb(85, 26, 139)}
/*复制样式开始*/
.nav {width:900px;margin:0 auto;position:relative;}
.nav a {float:left;display:inline-block;height:35px;line-height:35px;padding:0 20px;}
.nav a:hover {text-shadow:0 0 2px #ccc}
.nav a, .nav_x {-webkit-transition: .4s ease-out;transition: .4s ease-out;}
.nav_x, .nav_x_bg {z-index:9;position:absolute;display:block;height:3px;line-height:3px;overflow:hidden;width:28px;left:20px;bottom:0;background-color:rgb(255,102,153);}
.nav_x_bg {z-index:8;width:825px;left:20px;bottom:0;background-color:rgb(204,204,204);z-index:8;}
a[class="nav_1"]:hover ~.nav_x {left:20px;width:28px;}
a[class="nav_2"]:hover ~.nav_x {left:88px;width:62px;}
a[class="nav_3"]:hover ~.nav_x {left:190px;width:55px;}
a[class="nav_4"]:hover ~.nav_x {left:285px;width:61px;}
a[class="nav_5"]:hover ~.nav_x {left:386px;width:66px;}
a[class="nav_6"]:hover ~.nav_x {left:492px;width:67px;}
a[class="nav_7"]:hover ~.nav_x {left:599px;width:56px;}
a[class="nav_8"]:hover ~.nav_x {left:694px;width:151px;}
/*复制样式结束*/
</style>
</head>
<body>
<div class="nav clearfix">
<a href="http://www.yilingsj.com/flash/" class="nav_1">首页</a>
<a href="http://www.yilingsj.com/flash/" class="nav_2">flash 动画</a>
<a href="http://www.yilingsj.com/div/" class="nav_3">div + css</a>
<a href="http://www.yilingsj.com/css3/" class="nav_4">css3 特效</a>
<a href="http://www.yilingsj.com/html5/" class="nav_5">html5 实例</a>
<a href="http://www.yilingsj.com/jquery/" class="nav_6">jquery特效</a>
<a href="http://www.yilingsj.com/code/" class="nav_7">懒人代码</a>
<a href="http://www.yilingsj.com/ziyuan/" class="nav_8">长度还会变化，Really？</a>
<span class="nav_x"></span>
<span class="nav_x_bg"></span>
</div>
</body>
</html>

扫二维码下载贴吧客户端

下载贴吧APP
看高清直播、视频！

3回复贴，共1页

<<返回css吧

分享到:

日	一	二	三	四	五	六