使用 （>）符号。
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body > p {
color: red;
}
</style>
</head>
<body>
<h1>body > p CSS test</h1>
<h2>[s1] Section 1</h2>
<p>1) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ac rhoncus mauris. Vivamus augue odio, placerat in semper nec, rutrum ac purus.</p>
<p>2) Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In eu nisl elit, eget sagittis enim. Ut porttitor orci mauris.</p>
<p>3) Phasellus pretium, arcu at varius posuere, magna est venenatis urna, et congue dolor lectus vel dui.</p>
<div>
<h2>[s2] Section 2</h2>
<p>1) Mauris at iaculis nisl. Proin ultricies laoreet sem, nec egestas enim porta in. Proin magna dui, tincidunt elementum semper consequat, semper quis dolor. Nullam enim massa, vestibulum ut scelerisque nec, congue eu nibh.</p>
<p>2) Nulla facilisi. Aenean ullamcorper dictum dolor in posuere. Duis lorem dolor, aliquet in vestibulum id, adipiscing non velit.</p>
</div>
<h2>[s3] Section 3</h2>
<p>1) Cras tincidunt euismod velit sit amet consectetur. Maecenas eget est felis, et viverra metus.</p>
<p>2) Nullam in turpis et enim luctus consequat. Ut enim magna, pulvinar vel porta a, molestie nec risus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce a ipsum metus, a convallis quam. Cras elementum ullamcorper nisl, quis porta neque vehicula sed.</p>
</body>
</html>
源码下载：
childselectors.zip
分享到：
相关推荐
通过使用组合器（Combinator）将选择器的描述写得更加精确（参考CSS选择器 – MDN ），例如对于下述代码片段，如果想给.cellphones中的.apple增加样式，只使用.apple，势必会对.fruit中的.apple也造成影响。...
/* CSS3伪类选择器 ... E:not 否定选择器，它和JQuery中的:not选择器一模一样，可以选择除... E:nth-of-type(1) 表示根据指定元素的类型设置第一个元素的样式，其实该选择器类似于nth-child选择器 E:empty 空选择器，
今天我们就来“前瞻”一下CSS3的一个伪类选择器“:nth-child()”。 语法： :nth-child(an+b) 为什么选择她，因为我认为，这个选择器是最多学问的一个了。很可惜，据我所测，目前能较好地支持她的只有Opera9+和...
ie-css3.js下载页面的每一个样式文件并解析它的CSS3伪选择器。如果一个选择器被找到，它就会被替换为同名的CSS class。比如： div:nth-child(2) 将会变成 div._iecss-nth-child-2 。然后，Robert Nyman的...
使用css选择器完成子元素的判断 例子： 用css选择器匹配只有一个元素 div { &:last-child:nth-child(1) { // 相关样式 } } 很好理解：div下面即是最后一个元素也是第一个元素不就是只有一个子元素吗？ 用css选择...
伪类选择器：CSS中已经定义好的选择器,不能随便取名 常用的伪类选择器是使用在a元素上的几种，`如a:link|a:...CSS中有如下四种伪元素选择器：· first-line:为某个元素的第一行文字使用样式；· first-letter:为某个元
UI伪类选择器的使用和样例 背景设置 边框样式设置——圆角边框，内边距演示，边框的样式，对每一条边框设置样式 基本选择器——before&after,first_line,first_letter,selection,基本选择器 结构伪类选择器——empty...
css3属性选择器 css3之属性选择器，其中包括： 复制代码代码如下:1.[att=val]2.[att*=val]3.[att^=val]4.[att$=val] 下面我将用实例演示它们的用法 css代码： 复制代码代码如下:<style type=”text/css”> p...
1. *（通配符）*通配符选择器，经常用于css reset（样式重置），清理标签的默认样式，但现在一般不提倡直接使用*了，主要是*会匹配所有标签，相当耗资源。*在css的优先级中是最低的。 * {margin: 0; padding: 0;} 也...
一、全浏览器支持的css选择器（由于很好理解，demo省略）1.* *通配符选择器，经常用于css reset，即样式重置，清理标签的默认样式，但现在一般不提倡直接使用*了，主要是*会匹配所有标签，相当耗资源。*在css的...
您可以使用css设置每个单词的样式，并使用nth-child（）选择器确定跨度。 基于最初由 Carrie Dils 发布的代码： : 为什么我们写这个插件： : 要求WordPress 3.8 创世纪2.0安装上传下载最新的标记档案（选择“zip”...
CSS3 中新增了许多伪类选择器，例如： * p:first-of-type 选择属于其父元素的首个元素的每个元素 * p:last-of-type 选择属于其父元素的最后元素的每个元素 * p:only-of-type 选择属于其父元素唯一的元素的每个元素 ...
无论是vue还是react的css模块化解决方案都是依赖loader来实现的 在使用上，vue中用scoped属性实现样式的私有化，利用深度作用选择器/deep来实现样式的去私有化。 例子： <div> <div class="demo"> ...
通过选择器可以选中页面中的一组元素，然后为其设置样式 元素选择器 根据标签名，选中页面中的指定元素 语法：标签名{ } 例子： div{} p{} h1{} id选择器 根据元素的id属性值选中一个...
3.CSS样式特征 1.继承性 必须是父子（有层叠嵌套的关系）结构 大部分的css效果是可以 2.优先级 1.浏览器默认样式 2.内部样式和外部样式（就近原则） 3.内联样式 4.!important; 绝对优先使用（） 格式 p{ ...
当你想在一个浏览器里改变样式而不像在其他浏览器中改变时，这些选择器很有用。...html[xmlns*=”] body:last-child {}要使用这些选择器，请在样式前写下这些代码。例如： #content-box { width: 300
这些选择器还是比较简单的,就不再此一一举例样式了.还有随着各种浏览器的升级,也不在此讨论各种版本的浏览器对于属性样式的兼容和支持问题久了. 一:属性选择器 [attr=val]:属性attr是val;[attr*=val]:属性attr中包含...
E 标签选择器，匹配所有使用E标签的元素3. .info class选择器，匹配所有class属性中包含info的元素4. #footer id选择器，匹配所有id属性等于footer的元素 实例： CSS Code复制内容到剪贴板 * { margin:0;...