我有一个正文元素,其中包含文本节点作为直接子节点,但也包含段落。现在,我想创建我的 css,以便这个 textnodes 获得特定的 css 设置。另一方面,我不想为层次结构更深的文本节点设置样式(即其中一个段落的子节点)。
如何在不设置不是直接子级的文本节点的情况下设置作为正文元素的直接子级的文本节点的样式?
据了解(如果我没有误解您的问题),您不能 - 您必须覆盖段落或其他子元素的样式。我会这样做:
/* for direct text-nodes */
body{
color: red;
}
/* maybe its possible to use "body *" here,
wich sounds like what you need, but i've
never tested this
*/
body p{
color: black; /* "default" value here*/
}
AFAIK 无法直接定位文本节点。
您可以为 BODY 设置文本节点样式,然后为您的 Ps 应用不同的样式。
或者,您可以将文本节点放在 SPAN 中,然后设置它们的样式。
那么,如何定义它: body * { /* 一些通用的简单样式,适用于所有文档元素 */ }
和
body { /* 你的文本节点样式在这里 */ }
例如
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
body {color:red}
body * {
color:blue;
}
</style>
</head>
<body>
sdfsdfsd
<ul>sdfs
<li>Coffee <i>- black hot drink</i></li>
<li>Coca Cola <i>- black cold drink</i></li>
</ul>
jdtzje<div>some div content</div>
<ul>
<li>Coffee <i>- black hot drink</i></li>
<li>Coca Cola <i>- black cold drink</i></li>
</ul>fdsfs
<p><b>Note:</b> For :first-child to work in IE, a DOCTYPE must be declared.</p>
</body>
</html>
检查本教程: http ://www.w3schools.com/css/tryit.asp?filename=trycss_first-child5
编辑:这是一个例子
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
li>i:first-child
{
color:red;
}
</style>
</head>
<body>
<ul>
<li>Coffee <i>- black hot drink</i></li>
<li>Coca Cola <i>- black cold drink</i></li>
<li>Test <p>- some text here that's not affected!</p></li>
</ul>
<ul>
<li>Coffee <i>- black hot drink</i></li>
<li>Coca Cola <i>- black cold drink</i></li>
</ul>
<p><b>Note:</b> For :first-child to work in IE, a DOCTYPE must be declared.</p>
</body>
</html>