Heim > Web-Frontend > HTML-Tutorial > 关于设置指定位置处的节点样式_html/css_WEB-ITnose

关于设置指定位置处的节点样式_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 12:15:34
Original
1412 Leute haben es durchsucht

本帖最后由 liaoyu45 于 2012-10-09 16:45:28 编辑

<div id="d1" style="background: red; width: 90px; height: 90px">  <span>span1</span>  <span>span2</span>  <span>span3</span>  <b>b1</b>  <div>div1</div>  <span>spanN</span></div>
Nach dem Login kopieren

如何在 css 代码中设置d1中的第 N 个元素的样式?
在 w3cschool 上好象看到过,自以为能记住……

#d1 > span{ display: block;}
Nach dem Login kopieren

这个是 d1 下的所有 span 的 display 都是 block 了。
一开始以为 firstchild 好像能满足这个需求……

求大侠!
哦……不要用 javascript,不用专属 class,N 是变量,都是干干净净的节点。

回复讨论(解决方案)

不用js怎么知道哪个是第N个元素?HTML,CSS都是静态的东西,你选择第一个或者最后一个用CSS还可以做到,你这第N个~~~

用js的话,可以用下面这句,
document.getElementById("d1").getElementsByTagName("*")[N-1].style.display = "none";

但是有一点,如果你的这些元素的个数有这么多,所以为了安全起见,可以把上面的拆开,做个判断,还有就是如果是动态生成的这些元素,就得要确定元素生成之后,才调用这句话,否则也会出错的。
能力有限,不能达到你要求的,仅供参考。

不用js怎么知道哪个是第N个元素?HTML,CSS都是静态的东西,你选择第一个或者最后一个用CSS还可以做到,你这第N个~~~

用js的话,可以用下面这句,
document.getElementById("d1").getElementsByTagName("*")[N-1].style.display = "none";

但是有一点,如果你的这些元素的个数有这么多,所以为了安全起……
css甚至可以挂木马。

引用 1 楼  的回复:
不用js怎么知道哪个是第N个元素?HTML,CSS都是静态的东西,你选择第一个或者最后一个用CSS还可以做到,你这第N个~~~

用js的话,可以用下面这句,
document.getElementById("d1").getElementsByTagName("*")[N-1].style.display = "none";

但是有一点,如果你的这些元素……

如果CSS能做到的话,还要js干啥。

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage