CSS选择器

CSS样式的主要功能就是通过不同的选择器，来美化body中的不同内容。由于不同的内容需要不同的选择器，所以把CSS的选择器基本上分为9类，分别是标签选择器、ID选择器、类选择器、后代选择器、子类选择器、兄弟选择器、属性选择器、伪类选择、伪元素。

基本用法如下图：

下面分别举例：

• 标签选择器

单个标签基本用法为m{k:v}，例如  ul{color:red;}

多个标签用法为m,n{k:v}，例如  ul,li{color:red;}

• ID选择器

ID选择器选中的是有id属性的标签，基本用法为 #m{k:v;}，例如  #abc{color:red;}

• 类选择器

类选择器选中的是有class属性的标签，基本用法为 .m{k:v;}，例如  .abc{color:red;}

• 后代选择器

后代选择器选中的是元素内部所有的子元素，包括孩子的孩子，基本用法为m n{k:v;}，例如  ul  li{color:red;}

• 子类选择器

子类选择器选中的只是第一级子元素(儿子),再往下的子元素不生效，基本用法为 m>n{k:v;}，例如  ul>li{color:red;}

• 兄弟选择器

选中的是与自己并列的最近相邻的元素，基本用法为 m+n{k:v;}，例如 b+i{color:red;}

• 属性选择器

选中的是指定的或自定义的属性，属性和值之间有5种选择关系，分别为:

~=(包含指定词语)，基本用法为 m[x~=y]{k:v}，例如 li[name~=司机]{color:red;}

*=(包含指定内容)，基本用法为 m[x*=y]{k:v}，例如 li[name*=司机]{color:red;}

^=(以指定内容开始)，基本用法为 m[x^=y]{k:v}，例如 li[name^=司机]{color:red;}

$=(以指定内容结束)，基本用法为 m[x$=y]{k:v}，例如 li[name$=司机]{color:red;}

|=(以指定词语开始)，基本用法为 m[x|=y]{k:v}，例如 li[name|=司机]{color:red;}

• 伪类选择器

主要以hover为代表，表示光标放上去之后的状态，基本用法为 m[type=…]>n:hover{k:v}，

例如  ul[type=circle]>li:hover { color:red; }

• 伪元素

伪元素主要有4种：

fitst-line(向文本的首行设置特殊样式)，基本用法为 m:first-line{k:v}，例如 p:first-line{color:red;}

first-letter(向文本的首字母设置特殊样式)，基本用法为 m:first-letter{k:v},例如 p:first-letter{color:red;}

before(在元素的内容前插入新内容)，基本用法为 m:before{k:v},例如 p:before{content:url(a.jpg);}

after(在元素的内容后插入新内容)，基本用法为 m:after{k:v},例如 p:after{content:url(a.jpg);}