css选择器

/*1 单个属性选择器*/
h1 {color:blue;}
h2 {color:silver;}

/*1.1 多个属性选择器,使用“，”号分开*/
h1, h2 {color:blue;}

/*2 单个类选择器*/
<p class="important"></p>
.important {color:red;}

/*2.1 结合属性的类选择器*/
<p class="important"></p>
p.important {color:red;}

/*2.2 多个类选择器*/
<p class="important warning"></p>
.important {color:red;}
.warning {background:silver;}
.important.warning{color:red; background:silver;}

/*3 id选择器，只能使用一次*/
<h1 id="mostImportant">This is important!</h1>
#mostImportant {color:red; background:yellow;}

/*4 属性选择器*/
*[title] {color:red;}  /*包含title属性的元素变为红色*/
a[href] {color:red;}  /*href 属性的锚（a 元素）应用样式*/
a[href][title] {color:red;} /*将同时有 href 和 title 属性的 HTML 超链接的文本设置为红色*/

/*5 后代选择器，使用空格表示*/
<div><h1>This is a <em>important</em> heading</h1></div>
div em {color:red;} /*em是div的后代元素*/

/*5 子元素选择器，是直接后代选择器，使用">"表示*/
<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
h1 > strong {color:red;}
/*5.1 子元素选择器结合 */
/*上面的选择器会选择作为 td 元素子元素的所有 p 元素，这个 td 元素本身从 table 元素继承，
该 table 元素有一个包含 company 的 class 属性。*/
table.company td > p

/*6 相邻兄弟选择器*/
h1 + p {margin-top:50px;} /*选择紧接在 h1 元素后出现的段落，h1 和 p 元素拥有共同的父元素*/

/*7 伪类选择器 */
a:link {color: #FF0000}        /* 未访问的链接 */
a:visited {color: #00FF00}    /* 已访问的链接 */
a:hover {color: #FF00FF}    /* 鼠标移动到链接上 */
a:active {color: #0000FF}    /* 选定的链接 */*/