> 웹 프론트엔드 > HTML 튜토리얼 > 关于设置指定位置处的节点样式_html/css_WEB-ITnose

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

WBOY
풀어 주다: 2016-06-24 12:15:34
원래의
1412명이 탐색했습니다.

本帖最后由 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>
로그인 후 복사

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

#d1 > span{ display: block;}
로그인 후 복사

这个是 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干啥。

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿