CSS：特殊的上下文选择符及属性选择符

特殊的上下文选择符：

子选择符 >

标签1 > 标签2 

标签2必须是标签l的子元素，或者反过来说，标签1必须是标签2 的父元素，与常规的上下文选择符不同，这个选择符中的标签1不能是标签2的父元素之外的其他祖先元素。

scction>h2{font-style:italic;}

紧邻同胞选择符+

标签1 + 标签2

标签2必须紧跟在其同胞标签1的后面

一般同胞选择符~

标签1 ~ 标签2

标签2必须跟（不一定紧跟）在其同胞标签1的后面

属性选择符：

标签名[属性名] 
选择任何带有属性名的标签名。 
比如，下面的 CSS 
img[title] {border:2px solid blue;} 

会导致像下面这个带有 title 属性的 HTML img 元素显示 2 像素宽的蓝色边框，至于title 属性有什么值，无关紧要，只要有这个属性在就行啦。 

<img src="images/yellow_flower.jpg" title="yellow flower" alt="yellow flower" />

什么情况下会用到这个属性选择符呢？比如，可以在用户鼠标移动到这些图片上时，此时浏览器会显示一个（利用 title 属性中的文本生成的）提示条。一般来说，人们经常给 alt 和 title 属性设定相同的值。alt 属性中的文本会在图片因故未能加载 时显示，或者由屏幕阅读器朗读出来。而 title 属性会在用户鼠标移动到图片上时，显示一个包含相应文本的提示。

属性值选择符：

标签名[属性名="属性值"] 
在 HTML5 中，属性值的引号可加可不加，在此为了清楚起见，我们加了。 选择任何带有值为属性值的属性名的标签名。 这个选择符可以让你控制到属性的值是什么。例如，这条规则：

img[title="red flower"] {border:4px solid green;}

在图片的 title 属性值为 red flower 的情况下，才会为图片添加边框。换句话说，下面这个 img 元素就会被加上边框。

<img src="images/red_flower.jpg" title="red flower" alt="red flower" />