梦之都 http://www.dreamdu.com/ 为初学者提供一个在线的自学之地,为设计者提供一个网络编程的中文参考之地 2010-08-26T00:19:52Z http://www.dreamdu.com/feed/ zh CSS选择符总结 http://www.dreamdu.com/css/selectors_summary/ http://www.dreamdu.com/blog/comments/ Wed, 25 Aug 2010 18:19:52 -0600 可爱的猴子 本章介绍了CSS的选择符部分，包括CSS3版本中介绍的相关选择符，通过本章我们学到了：

CSS选择符还包括CSS伪类与CSS伪元素，下面章节将介绍这些内容

]]> CSS E[att*=val] 属性值子串选择符 http://www.dreamdu.com/css/selector_attribute_values_substring/ http://www.dreamdu.com/blog/comments/ Tue, 24 Aug 2010 17:47:05 -0600 可爱的猴子 CSS E[att*=val] 属性值子串选择符，匹配文档中具有att属性且其包含val的E元素 阅读全文...

示例

]]> CSS E[att$=val] 属性值子串选择符 http://www.dreamdu.com/css/selector_attribute_values_suffix/ http://www.dreamdu.com/blog/comments/ Mon, 23 Aug 2010 17:44:05 -0600 可爱的猴子 CSS E[att$=val] 属性值子串选择符，匹配文档中具有att属性且其值的后缀为val的E元素 阅读全文...

示例

]]> CSS E[att^=val] 属性值子串选择符 http://www.dreamdu.com/css/selector_attribute_values_prefix/ http://www.dreamdu.com/blog/comments/ Sun, 22 Aug 2010 18:12:16 -0600 可爱的猴子 CSS E[att^=val] 属性值子串选择符，匹配文档中具有att属性且其值的前缀为val的E元素 阅读全文...

示例

]]> HTML rel canonical 属性值 http://www.dreamdu.com/xhtml/rel_canonical/ http://www.dreamdu.com/blog/comments/ Wed, 18 Aug 2010 17:35:06 -0600 可爱的猴子 rel=canonical属性让搜索引擎知道当前网站中的重复或相似网页中，哪一个页面才是站长想让其抓取与收录的 阅读全文...

]]> CSS E[att~=val] 属性值选择符 http://www.dreamdu.com/css/selector_attribute_values_part/ http://www.dreamdu.com/blog/comments/ Tue, 17 Aug 2010 17:38:14 -0600 可爱的猴子 CSS E[att~=val] 属性值选择符，匹配文档中具有att属性且其中一个值（多个值使用空格分隔）为val(其中val不能包含空格)的E元素 阅读全文...

示例

]]> CSS E[att=val] 属性值选择符 http://www.dreamdu.com/css/selector_attribute_values/ http://www.dreamdu.com/blog/comments/ Mon, 16 Aug 2010 17:30:14 -0600 可爱的猴子 CSS E[att=val] 属性值选择符，匹配文档中具有att属性且其值为val的E元素 阅读全文...

示例

]]> CSS [att] 属性名选择符 http://www.dreamdu.com/css/selector_attribute_att/ http://www.dreamdu.com/blog/comments/ Sun, 15 Aug 2010 19:17:21 -0600 可爱的猴子 CSS [att] 属性名选择符，匹配文档中元素的属性名为att的元素 阅读全文...

示例

]]> CSS属性选择符 http://www.dreamdu.com/css/selector_attribute/ http://www.dreamdu.com/blog/comments/ Sun, 15 Aug 2010 18:44:15 -0600 可爱的猴子 属性选择符可以匹配HTML(XHTML、XML)文档中元素定义的属性、属性值或属性值的一部分，本节将介绍的属性选择符如下：

属性名选择符

  • [att] -- 匹配文档中元素的属性名为att的元素

属性值选择符

  • [att=val] -- 匹配文档中元素的属性att的值为val的元素
  • [att~=val] -- 匹配文档中元素的属性att的其中一个值（多个值使用空格分隔）为val的元素(其中val不能包含空格)
  • [att|=val] -- 匹配文档中元素的属性att的值为val，或者以val开头紧随其后的是连字符-的元素（主要用来允许语言编码的匹配，例如HTML中的hreflang属性。关于lang（或 xml:lang）语言码的比配，可查看:lang伪类）

属性值子串选择符

  • [att^=val] -- 匹配文档中元素具有属性att，且其值的前缀为val的元素
  • [att$=val] -- 匹配文档中元素具有属性att，且其值的后缀为val的元素
  • [att*=val] -- 匹配文档中元素具有属性att，且其包含val的元素
]]> CSS普通相邻选择符 http://www.dreamdu.com/css/selector_combinator_general_sibling/ http://www.dreamdu.com/blog/comments/ Thu, 12 Aug 2010 17:09:58 -0600 可爱的猴子 CSS普通相邻选择符，使用破折号连接的两个简单选择符 阅读全文...

示例

]]> CSS直接相邻选择符 http://www.dreamdu.com/css/selector_combinator_adjacent_sibling/ http://www.dreamdu.com/blog/comments/ Wed, 11 Aug 2010 17:47:00 -0600 可爱的猴子 CSS直接相邻选择符，两个使用加号连接的简单选择符 阅读全文...

示例

]]> CSS子对象选择符 http://www.dreamdu.com/css/selector_combinator_child/ http://www.dreamdu.com/blog/comments/ Tue, 10 Aug 2010 17:41:19 -0600 可爱的猴子 CSS子对象选择符，使用大于号连接的两个或多个简单选择符 阅读全文...

示例

]]> CSS包含选择符 http://www.dreamdu.com/css/selector_combinator_descendant/ http://www.dreamdu.com/blog/comments/ Mon, 09 Aug 2010 18:11:31 -0600 可爱的猴子 CSS包含选择符，两个或多个并列的以空格分隔的简单选择符 阅读全文...

示例

]]> CSS ID选择符 http://www.dreamdu.com/css/selector_id/ http://www.dreamdu.com/blog/comments/ Sun, 08 Aug 2010 17:54:11 -0600 可爱的猴子 CSS ID选择符，使用#idname表示 阅读全文...

示例

]]> CSS类选择符 http://www.dreamdu.com/css/selector_class/ http://www.dreamdu.com/blog/comments/ Thu, 05 Aug 2010 19:05:38 -0600 可爱的猴子 CSS类选择符，使用.classname表示 阅读全文...

示例

]]> CSS全局选择符 http://www.dreamdu.com/css/selector_universal/ http://www.dreamdu.com/blog/comments/ Thu, 05 Aug 2010 14:47:18 +0000 可爱的猴子 CSS全局选择符，统一定义文档中所有元素的样式 阅读全文...

示例

]]> CSS类型选择符 http://www.dreamdu.com/css/selector_type/ http://www.dreamdu.com/blog/comments/ Thu, 05 Aug 2010 14:47:18 +0000 可爱的猴子 CSS类型选择符，定义HTML标签的样式 阅读全文...

示例

]]> HTML文档树（元素的包含与排列关系） http://www.dreamdu.com/css/html_hiberarchy/ http://www.dreamdu.com/blog/comments/ Thu, 05 Aug 2010 14:47:18 +0000 可爱的猴子 HTML文档中的元素是分层次的，我们可以把这种层次归纳为几种关系：包含(嵌套、父子、继承)关系与并列(邻居、相邻、兄弟)关系

文档的层次也被称为文档树

html文档树

HTML元素包含(嵌套、父子、继承)关系

<body>
        <div>
                <p>
                        <span>www.dreamdu.com</span>
                </p>
        </div>
</body>

上面的事例是一个典型的包含关系

  • body标签是最外层元素，可以理解为"祖父"
  • div标签在body标签中，所以它是body的孩子，我们把div叫"父亲"，div是body的直接包含
  • p标签在div标签中，所以它是div的孩子，我们把p叫"儿子"，p是div的直接包含
  • span标签在p标签中，所以它是p的孩子，我们把span叫"孙子":)
  • p是div的直接包含，而p是body的间接包含
  • span是p的直接包含，而span是body的间接包含

我们也将HTML元素的包含关系称为嵌套、父子或继承关系

HTML元素相邻(邻居、并列、兄弟)关系

<div>www</div>
<p>dreamdu</p>
<span>com</span>

上面的事例是一个典型的相邻关系

  • div与p是直接相邻
  • p与span是直接相邻
  • div与span是普通相邻

一个HTML文档往往是包含关系与相邻关系的组合

<body>
        <div>
                <p>
                        <span>www</span>
                </p>
                <strong>dreamdu</strong>
                <em>com</em>
        </div>
</body>
  • p，strong是并列关系，它们有同一个父亲div
  • p和strong是直接相邻的关系
  • p，em是并列关系，它们有同一个父亲div
  • p和em是普通相邻的关系

了解嵌套与并列关系对于理解CSS选择符有很大帮助

]]> 如何清除浏览器缓存 http://www.dreamdu.com/webbuild/clear_browser_cache/ http://www.dreamdu.com/blog/comments/ Thu, 05 Aug 2010 14:47:18 +0000 可爱的猴子 如何清除（IE、Firefox、Chrome、Opera、Safari）主流浏览器的缓存 阅读全文...

]]> CSS语法第二课总结 http://www.dreamdu.com/css/syntax_advanced_summary/ http://www.dreamdu.com/blog/comments/ Thu, 05 Aug 2010 14:47:18 +0000 可爱的猴子 CSS语法第二课总结 阅读全文...

]]> CSS选择符语法 http://www.dreamdu.com/css/selector_syntax/ http://www.dreamdu.com/blog/comments/ Thu, 05 Aug 2010 14:47:18 +0000 可爱的猴子 CSS选择符语法说明 阅读全文...

]]> CSS选择符 http://www.dreamdu.com/css/selectors/ http://www.dreamdu.com/blog/comments/ Thu, 05 Aug 2010 14:47:18 +0000 可爱的猴子 CSS选择符介绍 阅读全文...

]]> CSS At(@)规则 http://www.dreamdu.com/css/at-rules/ http://www.dreamdu.com/blog/comments/ Thu, 05 Aug 2010 14:47:18 +0000 可爱的猴子 CSS At@规则以一个关键词@开始，紧跟在后的是一个标示符 阅读全文...

]]> URI全局资源标志符 http://www.dreamdu.com/css/value_uri/ http://www.dreamdu.com/blog/comments/ Thu, 05 Aug 2010 14:47:18 +0000 可爱的猴子 URI全局资源标志符，URI用于唯一定位网络中的资源 阅读全文...

]]> CSS颜色 http://www.dreamdu.com/css/css_colors/ http://www.dreamdu.com/blog/comments/ Thu, 05 Aug 2010 14:47:18 +0000 可爱的猴子 CSS颜色，RGB、RGBA、百分比等表示法 阅读全文...

]]> CSS RGB(A) 颜色 http://www.dreamdu.com/css/color_rgba/ http://www.dreamdu.com/blog/comments/ Thu, 05 Aug 2010 14:47:18 +0000 可爱的猴子 CSS RGB(A) 颜色 阅读全文...

]]> CSS HSL(A) 颜色 http://www.dreamdu.com/css/color_hsla/ http://www.dreamdu.com/blog/comments/ Thu, 05 Aug 2010 14:47:18 +0000 可爱的猴子 CSS HSL(A) 颜色 阅读全文...

]]> web安全色 http://www.dreamdu.com/css/color_websafe/ http://www.dreamdu.com/blog/comments/ Thu, 05 Aug 2010 14:47:18 +0000 可爱的猴子 短16进制颜色与web安全色 阅读全文...

]]> CSS content 属性 http://www.dreamdu.com/css/property_content/ http://www.dreamdu.com/blog/comments/ Thu, 05 Aug 2010 14:47:18 +0000 可爱的猴子 CSS content属性，定义字符串 阅读全文...

示例

]]> CSS字符串类型 http://www.dreamdu.com/css/value_string/ http://www.dreamdu.com/blog/comments/ Thu, 05 Aug 2010 14:47:18 +0000 可爱的猴子 CSS字符串类型 阅读全文...

]]> CSS百分比类型 http://www.dreamdu.com/css/value_percentage/ http://www.dreamdu.com/blog/comments/ Thu, 05 Aug 2010 14:47:18 +0000 可爱的猴子 CSS百分比类型，百分比等价于一个实数类型加上% 阅读全文...

示例

]]> CSS长度与单位 http://www.dreamdu.com/css/value_length/ http://www.dreamdu.com/blog/comments/ Thu, 05 Aug 2010 14:47:18 +0000 可爱的猴子 CSS长度与单位，相对长度em、px与绝对长度cm、pt 阅读全文...

示例

]]> CSS整数与实数类型 http://www.dreamdu.com/css/value_number/ http://www.dreamdu.com/blog/comments/ Thu, 05 Aug 2010 14:47:18 +0000 可爱的猴子 CSS整数与实数类型 阅读全文...

示例

]]> CSS浏览器厂商特定扩展（Vendor-specific extensions） http://www.dreamdu.com/css/vendor-specific_extensions/ http://www.dreamdu.com/blog/comments/ Thu, 05 Aug 2010 14:47:18 +0000 可爱的猴子 不同浏览器对CSS的扩展 阅读全文...

]]> CSS关键字 http://www.dreamdu.com/css/keyword/ http://www.dreamdu.com/blog/comments/ Thu, 05 Aug 2010 14:47:18 +0000 可爱的猴子 CSS关键字简介 阅读全文...

示例

]]> CSS缩写属性 http://www.dreamdu.com/css/shorthand_properties/ http://www.dreamdu.com/blog/comments/ Thu, 05 Aug 2010 14:47:18 +0000 可爱的猴子 CSS属性的缩写方式 阅读全文...

]]> CSS属性值的描述语法 http://www.dreamdu.com/css/property_value/ http://www.dreamdu.com/blog/comments/ Thu, 05 Aug 2010 14:47:18 +0000 可爱的猴子 CSS属性值的描述语法 阅读全文...

]]> CSS语法第二课 http://www.dreamdu.com/css/syntax_advanced/ http://www.dreamdu.com/blog/comments/ Thu, 05 Aug 2010 14:47:18 +0000 可爱的猴子 CSS语法第二课，详细介绍CSS2.1的语法 阅读全文...

]]> CSS属性的定义 http://www.dreamdu.com/css/property_definitions/ http://www.dreamdu.com/blog/comments/ Thu, 05 Aug 2010 14:47:18 +0000 可爱的猴子 CSS教程中描述CSS属性的方法 阅读全文...

]]>