CSS选择器

HTML选择器

p{ text-indent:3em }        /* 当中的选择器是p */
h1{ color:red }             /* 当中的选择器是h1*/

类选择器：根据他们的功能而不是根据他们的外观命名

p.dark-row { background-color:#EAEAEA}    /* 定义<p>元素的一个类的背景颜色*/
p.light-row { background-color:#F8F8F8}    /* 定义<p>元素的另一个类的背景颜色*/
<p class="dark-row">第一段是暗色的背景</p>
<p class="light-row">第二段是暗色的背景</p>
<p class="dark-row">第三段是暗色的背景</p>
<p class="light-row">第四段是暗色的背景</p>
/* 类选择器也可以不需要相关的元素，只要定义类选择器时不加点前面的HTML标记即可，这样这个类就可用于任何元素*/
.note{ font-size:small }       /* 为note的类可以被用于任何元素*/

p.dark-row { background-color:#EAEAEA}    /* 定义<p>元素的一个类的背景颜色*/
p.light-row { background-color:#F8F8F8}    /* 定义<p>元素的另一个类的背景颜色*/
<p class="dark-row">第一段是暗色的背景</p>
<p class="light-row">第二段是暗色的背景</p>
<p class="dark-row">第三段是暗色的背景</p>
<p class="light-row">第四段是暗色的背景</p>
/* 类选择器也可以不需要相关的元素，只要定义类选择器时不加点前面的HTML标记即可，这样这个类就可用于任何元素*/
.note{ font-size:small }       /* 为note的类可以被用于任何元素*/
/* 一个HTML元素可以同时使用多个类选择器,以空格分开 */
<p class="one two three">使用多个类选择器</p>

ID选择器：id属性指定了某个单一元素，id选择器用来对这个单一元素定义单独的样式
/

#main { text-indent:3em }    /* ID名称main前加上一个#号 */
<p id="main">文本缩进3em</p> /* 在HTML的p标记中指定id属性值为main*/

关联选择器：是一个用空格隔开的两个或更多的单一选择器组成的字符串，他们的优先权比一般的单一选择器大。

table a{ color:red }    /*只有在表格<table>内的链接<a>改变了样式*/

组合选择器

h1,h2,h3,h4,h5,h6{ color:bule; }    /* 使用组合选择器修饰标题 */

伪元素选择器：是指对同一个HTML元素不同状态的一种定义方式

a:link{ color:red }                           /*没有任何动作的状态*/
a:hover { color:yellow; font-size:125%}       /*光标移动到超链接*/
a:active { color:blue; font-size:125%}        /*选中超链接时的状态*/
a:visited { color:green; font-size:85%}       /*访问过的超链接*/