CSS 选择器

选择器：

selector {property: value}
如： li {color :Red;}

派生选择器：

li strong{color: red;}
把<li>标签内的所有<strong>内的字体变红（包括孙子或更加后代的节点）。
如：li><strong>我是斜体字。这是因为 strong 元素位于 li 元素内。</strong></li>

id选择器：

#red {color:red;}
#green {color:green;}
如：
<p id="red">这个段落是红色。</p>
<p id="green">这个段落是绿色。</p>

id选择器和派生选择器合用：

#sidebar p {font-style: italic; }

类选择器：

.center {color:red；}
会把class=‘center’的元素的字体颜色全变成红色。

类选择器可以和派生选择器合用，如：
.fancy td {...}
元素也可以基于他们的类被选择，如：
td.fancy {...}
<td class="fancy">

多类选择器：
.important.warning {background:silver;}
只能匹配到
<p class="important warning">...</p>
匹配不到 class=‘important’ 或者class='warning'

属性选择器

[title] {...}
意为选择带title属性的元素

[title=W3School] {...}
选择带title且title=W3School的元素
[title~=hello] {...}
选择包含指定值的元素，如 title='hello world',但是值必须是一个单词，如：title='hello123 world'就不行。
[lang|=en] {...}
选择以指定元素开头的元素，如 lang='en 123'但是值必须为单个单词,如：lang='en123 123',就不可以
[lang^=en] {...}
选择包含指定值开头的元素，如  lang='en 123'或lang='en123 123'.
[lang$=en] {...}
选择包含指定值结尾的元素，与上类似。


如果希望所有被选择可以：
*[title]
希望a标签被选择：
a[title]
并且可以联合使用：
a[href][title]选择同时有href和title属性的a标签

子元素选择：

td>p {}

后代选择：

td li {}
td标签内所有子孙节点为li的。

相邻元素选择:

h1+p {}
选择紧跟h1后的p元素
li+li
选择紧跟li后的li，所以如果有一个li的列表，这样只会选择第二个，第三个到最后一个。