CSS里啥是父元素和兄弟元素?
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS里啥是父元素和兄弟元素?相关的知识，希望对你有一定的参考价值。
在CSS里什么是父元素和兄弟元素?老是提到父元素和兄弟元素？是什么意思？请高手指教？？？
<html><head>
<title>...</title>
</head>
<body>
<ul>
<li>332</li>
<li>233234</li>
</ul>
<p>...</p>
</body>
</html>
例如上面的html结构:
<html>元素就是<body>和<head>的父元素（上下级，包含关系）
而<body>又是<ul>和<p>的父元素
<ul>又是两个<li>的父元素。
两个<li>就是兄弟元素（平级）
<body>和<head>也是兄弟元素，依此类推。
相应的， ul 和p是body的子元素， 而 li 呢， 是body的后代元素（后代选择符）。
你在dreamweaver里，套用源格式后，代码自动缩进，你很容易就能看出来的。
参考技术A 〈html〉〈head〉
〈title>
..
</title>
</head>
<body>
<ul>
<li>332</li>
<li>233234</li>
</ul>
<p>
...</p>
</body>
</html>
比方说上面的html结构，〈html〉元素就是〈body〉和〈head〉的父元素(上下级，包含关系)，
而〈body〉又
是〈ul〉和〈p〉的父元素，
〈ul〉又是两个〈li〉的父元素。
两个〈li〉就是兄弟元素(平级)，〈body>和〈head〉也是兄弟元素，依此类推。
相应的，
ul
和p是body的子元素，
而li呢，
是body的后代元素(后代选择符)。
你在dw里，套用源格式后，代码自动缩进，你很容易就能看出来的。 参考技术B 个人理解，所谓元素，就是html里的标签。父元素即父标签，兄弟元素即兄弟标签 参考技术C 父元素是保护该元素的元素，而兄弟元素是和该元素在同一个级别的元素。 参考技术D 请学习dom模型，再来学习web开发
js如何给目标元素的兄弟元素更改样式
找到目标元素的父元素，再找到它的子元素即可：目标元素.parentNode.childNode
然后再通过循环给每个元素更改样式即可。当然这里面也包括了目标元素，要不要排除掉就看你了
也可以直接找目标元素的兄弟元素，但这要分两步走：往前找和往后找，除非目标元素是所有兄弟里面的老大或老幺，倒不如通过老爸直接找到所有兄弟来得更快更方便。 参考技术A
先获取兄弟节点对象，然后再修改样式。如：
var s= document.getElementById("test");var ns=s.nextSbiling; //获得s的下一个兄弟节点
var ps=s.previousSbiling; //得到s的上一个兄弟节点
ns.style.color='red';//字体颜色
ps.className='red';//更改class属性
用jQuery也封装了，很多操作样式的方法。
以上是关于CSS里啥是父元素和兄弟元素?的主要内容，如果未能解决你的问题，请参考以下文章