`
conkeyn
  • 浏览: 1510075 次
  • 性别: Icon_minigender_1
  • 来自: 厦门
社区版块
存档分类
最新评论

第2章 选择器 =>选择子元素 P54

    博客分类：
  • CSS
XHTMLCSSHTML 
阅读更多 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>选择子元素</title>
<style type="text/css">
h1 > strong {
	color:red;
}
</style>
</head>

<body>
<p>在某些情况下,可能并不相选择一个任意的后代元素,而是希望缩小范围，只选择另一个元素的子元素。例如，可能想选择只作为一个h1元素的子元素（而不是后代元素）的strong元素。为此可以使用子结合符，即大于号（&gt;）</p>
<p>h1 &gt; strong {color:red;}</p>
<h1>This is <strong>very</strong> important.</h1>
<h1>This is <strong>very</strong> important</h1>
<h1>This is <em>really <strong>very</strong> important</em></h1>
<p>选择器h1 &gt; strong 可以解释为“选择作为h1元素的子元素的所有strong元素”。子结合符两边可以有空白符，这是可选的，因此h1 &gt; strong 、h1&gt; strong和h1&gt;strong都是一样的。</p>
</body>
</html>

 

显示效果:

 

详细说明:

例如，a元素是strong元素的父元素，但是它又是p元素的子元素。可以用p > a和a > strong选择器来匹配这个片段中的元素，但是p > strong不行，因为strong是p的后代而不是其子元素。


还可以在同一个选择器中结合使用后代选择器和子选择器。因此，table.summay td > p 会选择作为一个td元素子元素的所有p元素，这个td元素本身从table元素继承，该table元素有一个包含summary的class属性

  • 大小: 6 KB
  • 大小: 1 KB
分享到：
| eclipse
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    Web前端与移动开发之复合选择器 css元素显示模式 背景属性.txt

    （2）子元素选择器（子选择器 重要） 语法 元素1&gt;元素2{样式声明} 元素1和元素2用&gt;隔开 元素1和元素2是父子关系 只选择父元素最近一级的子元素 即必须是亲儿子 选择器1 选择器2可以是任意基础选择器 （3）...

    【CSS基础学习】复杂选择器

    文章目录CSS第二课-复杂选择器群组选择器属性选择器根据属性名查找元素根据属性值精确查找多属性选择器根据属性值近似查找根据标签查找派生选择器后代选择器子元素选择器相邻兄弟选择器 CSS第二课-复杂选择器 群组...

    部分CSS笔记.docx

    * 子元素选择器：div#container &gt; ul，选择子元素 * 后续兄弟选择器：X ~ Y，选择 X 元素后的所有 Y 元素 * 属性选择器： + 根据属性名选择元素：[属性名]{ } + 属性名、属性值完全匹配：[属性名=属性值]{ } + ...

    jQuery完全实例.rar

    找到所有 p 元素，并且这些元素都必须是 div 元素的子元素。 HTML 代码: &lt;p&gt;one&lt;/p&gt; &lt;div&gt;&lt;p&gt;two&lt;/p&gt;&lt;/div&gt; &lt;p&gt;three&lt;/p&gt; jQuery 代码: $("div &gt; p"); 结果: [ &lt;p&gt;two&lt;/p&gt; ] ------------------------------...

    jQuery详细教程

    二. jQuery 选择器 在前面的章节中，我们展示了一些有关如何选取 HTML 元素的实例。 关键点是学习 jQuery 选择器是如何准确地选取您希望应用效果的元素。 jQuery 元素选择器和属性选择器允许您通过标签名、属性名或...

    CSS基础知识.docx

    * p:nth-child(2) 选择属于其父元素的第二个子元素的每个&lt;p&gt;元素 * :enabled 控制表单控件的禁用状态 * :checked 单选框或复选框被选中 五、display 属性 display 属性用于设置元素的显示方式。常见的 display ...

    前端css+html+布局笔记

    子元素选择器 选中指定元素的指定子元素 语法：父元素 &gt; 子元素 {} 例子： div &gt; span {} div &gt; p{} 声明块 声明块中实际上就是一个一个CSS声明 声明 每一个CSS声明都是一个样式，实际上...

    数据结构（C++）有关练习题

    &lt;br&gt;2、 针对带附加头结点的单链表，试编写下列函数：&lt;br&gt;A． 定位函数Locate：在单链表中寻找第i个结点。若找到，则函数返回第i个结点的地址；若找不到，则函数返回NULL；&lt;br&gt;B． 球最大值函数max：通过单链表的一...

    css入门笔记

    子选择器 #id&gt;.class{样式} 1.分类选择器 div .class{样式} 4.伪类选择器 作用：匹配元素不同状态的选择器 语法：所有的伪类都是以 : 作为开始 选择器：伪类选择器{样式} 伪类分类 1.伪类链接 :link 匹配...

    html入门到放弃笔记

    包含的子元素(2对) 1、&lt;title&gt;网页的标题&lt;/title&gt; 2、&lt;meta charset="utf-8"/&gt; -- 能正常显示中文 2、&lt;body&gt;&lt;/body&gt; 属性： 1、text ，取值是一个颜色值(red,green,blue...) 2、...

    jpivot学习总结.doc

    foreignKey 外键，对应事实表中的一个列，它通过 &lt;Hierarchy&gt; 元素中的主键属性连接起来。 3.4. Hierarchy 你一定要指定其中的各种关系 , 如果没有指定 , 就默认 Hierarchy 里面装的是来自立方体中的真实表 . ...

    PHP基础教程 是一个比较有价值的PHP新手教程！

    "carole" =&gt; "4533" ); // 噢，忘了教长吧，让我们添加一个元素 $myphonebook&#91;"dean"&#93; = "5397"; // 你定义的carale元素错了，让我们更正它 $myphonebook&#91;"carole"&#93; =&gt; "4522" // 我还没有告诉你...

    算法设计与分析 王红梅

    — —电路布线问题 阅读材料— — —免疫算法 习题 9 第 10 章 概率算法 10 .1 概述 10 .1 .1 概率算法的设计思想 10 .1 .2 随机数发生器 10 .2 舍伍德(Sherwood)型概率算法 10 .2 .1 快速排序 10 .2 .2 选择问题 ...

    Redrock_FrontEnd_Exam:学员第一学期考核试题

    Ling:子代选择器, 以及选择器的优先级.margin 百分比计算值.*liuhuizhi:+ 请将文字和图片垂直居中Java:请画出div盒模型Grallencss的基本使用chenqinyu:写一段css，将1的颜色变为红色(不要改变html) &lt;p&gt;1&lt;/p&gt; &lt;p&gt;1&lt;/p...

    jQuety1.3中文说明

    找到所有 p 元素，并且这些元素都必须是 div 元素的子元素。 HTML 代码: &lt;p&gt;one&lt;/p&gt; &lt;div&gt;&lt;p&gt;two&lt;/p&gt;&lt;/div&gt; &lt;p&gt;three&lt;/p&gt; jQuery 代码: $("div &gt; p"); 结果: [ &lt;p&gt;two&lt;/p&gt; ] __________________________________...

    DWR.xml配置文件说明书(含源码)

    这里仅仅是定义了Converter并且简单的放在….&gt;元素之内,任何的….&gt;元素内容都有两个必须定义的属性.一个是对converter定义的引用和converter能够转换的类. 例如最简单的converter是null converter,它作用是把null和...

    EXTJS总结.txt

    把送入的元素归为这个元素的子元素。 var el = Ext.get('elId1'); // 用id指定 Ext.fly('elId').appendChild('elId2'); // Ext.Element添加 Ext.fly('elId').appendChild(el); // 选择符组合地添加 Ext.fly('...

    C# for CSDN 乱七八糟的看不懂

    常用 Convert 方法有： 第2页 C#（WINFORM）学习 C# Convert.ToBoolean Convert.ToByte Convert.ToChar Convert.ToDateTime Convert.ToDecimal Convert.ToDouble Convert.ToInt16 Convert.ToInt32 Convert.ToInt64 ...

    R语言与网站分析

    录前言第1 章　统计思维与网站分析 11.1　不确定与确定 11.2　统计分析方法 41.2.1　细分分析 41.2.2　对比分析 61.2.3　趋势分析 71.3　网站分析概要 71.3.1　解决用户需求 71.3.2　寻找新的用户需求 10第2 章　...

Magicbox
Global site tag (gtag.js) - Google Analytics