html代码：

<html>
<div class="test">
    <span class="bot"></span>
    <span class="top"></span>
    CSS “边框法”实现气泡对话框效果一
</div>


<style>
.test{width:300px; padding:30px 20px; margin-left:60px; background:#beceeb; position:relative;}

.test span{width:0; height:0; font-size:0; overflow:hidden; position:absolute;}

.test span.bot{   /*（结合元素选择器）  后代选择器 */  
    border-width:20px; 
    border-style:solid; 
    border-color:#ffffff #beceeb #beceeb #ffffff; 
    left:-40px; 
    top:40px;
}


</style>
</html>



效果：

纯CSS代码实现各类气球泡泡对话框效果的代码解析_css



子串匹配属性选择器

下面为您介绍一个更高级的选择器模块，它是 CSS2 完成之后发布的，其中包含了更多的部分值属性选择器。按照规范的说法，应该称之为“子串匹配属性选择器”。

很多现代浏览器都支持这些选择器，包括 IE7。

下表是对这些选择器的简单总结：

类型

描述

[abc^="def"]

选择 abc 属性值以 "def" 开头的所有元素

[abc$="def"]

选择 abc 属性值以 "def" 结尾的所有元素

[abc*="def"]

选择 abc 属性值中包含子串 "def" 的所有元素




p.important 


选择器现在会匹配 class 属性包含 important 的所有 p 元素，但是其他任何类型的元素都不匹配，不论是否有此 class 属性。选择器 p.important 解释为：“其 class 属性值为 important 的所有段落”。 因为 h1 元素不是段落，这个规则的选择器与之不匹配，因此 h1 元素不会变成红色文本。


如果你确实希望为 h1 元素指定不同的样式，可以使用选择器 h1.important：


p.important {color:red;}


h1.important {color:blue;}





结合元素选择器


类选择器可以结合元素选择器来使用。


例如，您可能希望只有段落显示为红色文本：


p.important {color:red;}


选择器现在会匹配 class 属性包含 important 的所有 p 元素，但是其他任何类型的元素都不匹配，不论是否有此 class 属性。选择器 p.important 解释为：“其 class 属性值为 important 的所有段落”。 因为 h1 元素不是段落，这个规则的选择器与之不匹配，因此 h1 元素不会变成红色文本。


如果你确实希望为 h1 元素指定不同的样式，可以使用选择器 h1.important：


p.important {color:red;}


h1.important {color:blue;}



结合元素选择器

类选择器可以结合元素选择器来使用。

例如，您可能希望只有段落显示为红色文本：


p.important {color:red;}


选择器现在会匹配 class 属性包含 important 的所有 p 元素，但是其他任何类型的元素都不匹配，不论是否有此 class 属性。选择器 p.important 解释为：“其 class 属性值为 important 的所有段落”。 因为 h1 元素不是段落，这个规则的选择器与之不匹配，因此 h1 元素不会变成红色文本。

如果你确实希望为 h1 元素指定不同的样式，可以使用选择器 h1.important：


p.important {color:red;} h1.important {color:blue;}


​​亲自试一试​​

html代码如下：

<html>
<div class="test">
    <span class="bot"></span>
    <span class="top"></span>
    CSS “边框法”实现气泡对话框效果一
</div>


<style>
.test{width:300px; padding:30px 20px; margin-left:60px; background:#beceeb; position:relative;}

.test span{width:0; height:0; font-size:0; overflow:hidden; position:absolute;}

.test span.bot{
    border-width:20px; 
    border-style:solid; 
    border-color:#ffffff #beceeb #beceeb #ffffff; 
    left:-40px; 
    top:40px;
}

.test span.top{
    border-width:10px 20px; 
    border-style:dashed solid solid dashed; 
    border-color:transparent #ffffff #ffffff transparent; 
    left:-40px; 
    top:60px;
}
</style>
</html>



效果：

纯CSS代码实现各类气球泡泡对话框效果的代码解析_属性值_02





------------------------------------

结合元素选择器
类选择器可以结合元素选择器来使用。
例如，您可能希望只有段落显示为红色文本：
p.important {color:red;}  注意：没有空格p.important
选择器现在会匹配 class 属性包含 important 的所有 p 元素，但是其他任何类型的元素都不匹配，不论是否有此 class 属性。选择器 p.important 解释为：“其 class 属性值为 important 的所有段落”。 因为 h1 元素不是段落，这个规则的选择器与之不匹配，因此 h1 元素不会变成红色文本。
如果你确实希望为 h1 元素指定不同的样式，可以使用选择器 h1.important：
p.important {color:red;}
h1.important {color:blue;}

----------------------------------------------------

子串匹配属性选择器
下面为您介绍一个更高级的选择器模块，它是 CSS2 完成之后发布的，其中包含了更多的部分值属性选择器。按照规范的说法，应该称之为“子串匹配属性选择器”。
很多现代浏览器都支持这些选择器，包括 IE7。
下表是对这些选择器的简单总结：
类型 描述
[abc^="def"] 选择 abc 属性值以 "def" 开头的所有元素
[abc$="def"] 选择 abc 属性值以 "def" 结尾的所有元素
[abc*="def"] 选择 abc 属性值中包含子串 "def" 的所有元素

-----------------------------------------------------------

后代选择器

根据上下文选择元素
我们可以定义后代选择器来创建一些规则，使这些规则在某些文档结构中起作用，而在另外一些结构中不起作用。
举例来说，如果您希望只对 h1 元素中的 em 元素应用样式，可以这样写：
h1 em {color:red;}
上面这个规则会把作为 h1 元素后代的 em 元素的文本变为 红色。其他 em 文本（如段落或块引用中的 em）则不会被这个规则选中：
<h1>This is a <em>important</em> heading</h1>
<p>This is a <em>important</em> paragraph.</p>