/*每一个元素的字体都设置为红色*/
* {color: red;
}

/*为body的字体设置为红色*/
body {color: red；
}

h1, h2, h3 {color: red;
}

h1 {font: 18px Helvetica;color: purple;background: aqua;
}

h1, h2, h3 {font: 18px Helvetica;color: purple;background: aqua;
}

.warning {font-weight: bold
}/*包含warning元素的p标签会apply下面的style*/
p.warning {font-weight: bold
}/*同时包含urgent和warning类名的元素会apply下面的style，类名顺序不限*/
.urgent.warning {font-weight: bold
}/*同时包含urgent和warning类名的元素P会apply下面的style*/
p.urgent.warning {font-weight: bold
}

#content {margin: 0;
}

/*选择有class属性（值不限）的所有h1元素，设置其字体颜色为红色 */
h1[class] {color: red;
}/*将同时有href和title属性的HTML超链接的文本置为粗体*/
a[href][title] {font-weight: bold;
}

/*设置具有href属性，并且属性值为http://www.w3.org/的a标签的font-size为200%*/
a[href="http://www.w3.org/"] {font-size: 200%;
}/*同时满足*/
a[href="http://www.w3.org/"][title="W3C Home"]{font-size: 200%;
}

<span class="barren rocky">Mercury</planet>
<span class="cloudy barren">Venus</planet>
<span class="life-bearing cloudy">Earth</planet>
/*为了把class属性中有barren的所有元素变为斜体，可以写作：*/
span[class~="barren"] {font-style: italic;
}

<h1 lang="en">Hello!</h1>
<p lang="en-us">Greetings!</p>
<div lang="en-au">G’day!</div>
<p lang="fr">Bonjour!</p>
<h4 lang="cy-en">Jrooana!</h4>/*上述标签前三个会变成红色，后两个还是黑色*/
*[lang|="en"] {color: red;
}

h1 em {color: gray;
}/*blockquote中包含的所有b（粗体）元素的文本颜色为灰色，另外正常段落中的所有粗体文本也为灰色*/
blockquote b, p b {color: gray;
}

h1>strong {color: red;
}

/*选择作为一个td元素子元素的所有p元素，这个td元素本身从table元素继承，该table元素有一个包含summary的class属性*/
table.suitimary td > p {color: red;
}

/*去除紧接在一个h1元素后出现的段落的上边距*/
h1+p {margin-top: 0;
}

<div>
<ol>
<li>List item 1</li>
<li>List item 1</li>
<li>List item 1</li>
</ol> This is some text that is part of the 'div'.
<ul>
<li>A list item</li>
<li>Another list item</li>
<li>Yet another list item</li>
</ul>
</div>
/*尽管两个列表间多了一行文本，不过还是可以用选择器ol+ul来匹配第二个列表。*/
ol+ul {color: red;
}

a {color: red;
}a:link {color: red;
}
/*两者是不同的，
a:link指示的是一个有href属性的，并且未访问过的所有a节点
a会应用到所有a标签
*/

a:link {color: blue;
}a:visited {color: red;
}a.external:link, a.external:visited {color: maroon;
}

input:focus {background-color: silver;font-weight: bold;
}

/*
作为某元素(可以是任意元素)的第一个子元素的所有P元素设置为粗体。
最常见的错误是认为p:first-child之类的选择器会选择p元素的第一个子元素。*/
p:first-child {font-weight: bold;
}

*:lang(fr) { font-style: italic;
}

/*鼠标指针停留在未访问链接上时，可以让这些链接变成红色，而鼠标指针停留在已访问链接上时，链接变成紫红色。*/
a:link:hover {color: red;
}a:visited:hover {color: maroon;
}

/*让每个h2中第一个字母的大小是标题中其余字母大小的2倍*/
h2:first-letter {font-size: 200%;
}

/*应用于每一段所显示的第一行文本。*/
p:first-line {color: red;
}

h2:before {content: "before";color: red;
}h2:after {content: "after";color: red;
}