对所有元素有效,写法为一个星号: * ,且当星号'*'不是选择唯一组成可以省略星号。

* { text-align : left } /*页面中所有元素均左对齐 */
*.div { text-align : left } /* *.div中星号不是唯一组成,可省略星号直接写成.div,类选择符后面介绍*/
.div { text-align : left } /*.div是*.div的简写形式,常用*/

匹配文档中指定名称的元素,写法为: 元素名 ,如a,也被称为元素选择符。

a { color : red }/*页面中所有a标签均设置为红色*/

匹配文档中,元素的class属性的属性值，含有指定类名的元素 ,写法为: 元素名.类名 ,如a.student、*.teacher。

a.student { color : red }/*所有class属性值含有student的a标签,均设置为红色*/
*.teacher { font-size : 16px }/*所有class属性值含有student的所有标签,均设置为红色,*可省略*/
.teacher { font-size : 16px }/*上一行星号省略的结果,*.teacher中,*不是唯一组成部分,可省*/

匹配文档中指定id的元素(标准规定id不能重复),写法: 元素名#id ,元素为*时可以省略。如*#part1、#part2、a#part3。

#part2 { color : red }/*id为part2的元素字体设置为红色,相当于*#part2*/
a#part1 { color : red }/*id为part1的a元素字体设置为红色,若id为part1,但非a元素,也不会匹配*/

写法: 选择符1 选择符2 ,匹配所有包含在 选择符1 中的 选择符2(无论嵌套了多少层)。注意,影响的是选择符2中的内容。如 p.detail a、p a。

p.detail a { color : red }/*使用了detail类的所有p标签(不影响),里面的a标签(有影响)设置为红色*/
p a { color : red }/*所有的p标签里面的所有a标签,都设置为红色*/

写法: 选择符1>选择符2 ,匹配 选择符1 中的直接子元素 选择符2。选择符2 必须是 选择符1 的直接父元素,不可以是父父元素或更高层。注意,影响的是选择符2中的内容。选择符1的内容不会产生影响。如 p.detail > a、p > a。

p.detail > a { color : red }/*使用了detail类的所有p标签的直接子元素a标签(有影响)设置为红色*/
p > a { color : red }/*所有的p标签里面的所有直接子元素a标签,都设置为红色*/

写法: 选择符1 + 选择符2 ,匹配 选择符1 中的直接相邻 选择符2(是相邻,不是嵌套),不可以中间隔其它标签。注意,影响的是选择符2中的内容。选择符1的内容不会产生影响。如 div.test + span、h1 + p。

div.test + span { color : red }/*使用了detail类的所有div标签的直接相邻span标签设置为红色*/
h1 + p { color : red }/*与h1标签直接相邻的p标签设置为红色*/

写法: 选择符1 ~ 选择符2 ,匹配 选择符1 中的普通相邻 选择符2(选择符2 在 选择符1 之后出现且父元素相同,不必直接相邻)。注意,影响的是选择符2中的内容。选择符1的内容不会产生影响。如 div.test ~ span、h1 ~ p。

div.test ~ span { color : red }/*使用了detail类的所有div标签后续兄弟结点span标签设置为红色*/
h1 ~ p { color : red }

写法: 选择符1 , 选择符2 , …… ,选择符N ,匹配逗号分隔的所有选择符(匹配上任意一个即可,而不是需要全部匹配)。注意，这个不是严格意义上的选择符，只不过希望大家认识一下它，看别人代码时有逗号不要陌生

div.test,p,#part,a { color : red }/*这4种选择符(符合其中一种即可)对应的标签全部设置成红色*/
h1 , p { color : red }

写法1: 元素名 [ 属性名 ] 具有指定属性名(书写上属性名即可,无关属性值)的标签,如img[title]
写法2: 元素名 [ 属性名=属性值 ] ,具有指定属性名且属性值相等的标签,如img[title="flag"]
写法3: 元素名 [ 属性名~=属性值 ] ,具有指定属性名且属性值(多个值用空格分隔)其中之一与 属性值相等
写法4: 元素名 [ 属性名|=属性值 ] ,具有指定属性名且属性值其中之一与 属性值 相等,或是以 属性值开始后面跟一个连字符'-'
写法5: 元素名 [ 属性名^=属性值 ] ,具有指定属性名且属性值以指定的属性值开始,
写法6: 元素名 [ 属性名$=属性值 ] ,具有指定属性名且属性值以指定的属性值结束,
写法7: 元素名 [ 属性名*=属性值 ] ,具有指定属性名且属性值含有指定的属性值,

img [title] { color : red }/*这4种选择符(符合其中一种即可)对应的标签全部设置成红色*/
a[ href="http://www.juliusun.com/"] { color : red }
img [ title^="flag"] { color: red }/*<img title="flag123">匹配*/
img [ title$="123"] { color: red }/*<img title="flag123">匹配*/
img [ title*="g1"] { color: red }/*<img title="flag123">匹配*/

伪类用于向某些选择器添加特殊的效果。写法: 选择符 : 伪类名 ,如 a : link 中link即为伪类名。

提示：a:hover 必须放在 a:link 和 a:visited 之后，才有效
提示：a:active 必须放在 a:hover 之后，才有效

类名列表如下：

伪类	意义
active	向被激活的标签添加样式
focus	向拥有键盘输入焦点的标签添加样式
hover	当鼠标悬浮在标签上方时，向标签添加样式
link	向未被访问的链接添加样式
visited	向已被访问的链接添加样式
first-child	向标签的第一个子标签添加样式
lang	向带有指定 lang 属性的标签添加样式

a:link { color : red }/*a标签,设置为红色*/
a.student:link { color : red }/*未访问过的,具有student类属性的链接,设置为红色*/

于向某些选择器设置特殊效果。写法: 选择符 : 伪元素 。
伪元素/伪对象列表如下：

伪类	意义
first-letter	向文本的第一个字母添加特殊样式,注意：仅能用于块级元素
first-line	向文本的首行添加特殊样式,注意：仅能用于块级元素
before	在元素之前添加内容
after	在元素之后添加内容

first-letter仅能用于块级元素,且仅可使用下列属性:

• font
• color
• background
• margin
• padding
• border
• text-decoration
• vertical-align (仅当 float 为 none 时)
• text-transform
• line-height
• float
• clear

first-line仅能用于块级元素,且仅可使用下列属性:

• font
• color
• background
• word-spacing
• letter-spacing
• text-decoration
• vertical-align
• text-transform
• line-height
• clear

before和after用于向选择符的前、后插入新内容,可用content插入,如插入图片可以写content(flag.png)

div.student:after { content:url(flag.png);}