CSS 元素选择器的基本概念（仅理论知识总结）

本文给予http://www.w3school.com.cn/css/css_selector_type.asp 的理论简化

1，普通的元素选择器和元素分组选择器

标签, 标签, 标签 {
         样式:样式值;
         样式:样式值;
         样式:样式值;
         }

当标签为 * 代表通配所有元素

2，类型选择器

1> 单类

原型  *.类名{  //注意点

样式:样式值;

样式:样式值;

       }

代表所有标签使用了这个类  样式全部一样 

实际简写为  .类型名 //注意点 

如果单指某个标签类通过 

标签.类名{

样式:样式值;

样式:样式值;

       }

2>多类选择   //当一个标签拥有这里所有类的时候，多类选择的样式才会有用

.类名.类名.类名{

样式:样式值;

样式:样式值;

}

使用 <p class = "class1 class2"></p> 在这种情况下 1+1 =3 （两个1分别代表class1和class2 结果多出来的1代表 .class1.class2声明的样式）

3，ID选择器

*#ID名称 {

样式:样式值;

样式:样式值;

}

简写 #ID名称{}

此ID只能在文档中出现一次，ID不可叠加（即1+1=3）

4，属性选择器（此牵扯到HTML标签的一些属性对应的特殊值 的标签的样式设置）

标签[属性表达式] { //单个属性

样式:样式值;

样式:样式值;

}

标签[属性表达式] [属性表达式] { //多个属性

样式:样式值;

样式:样式值;

}

属性表达式 

选择器	描述
[attribute]	用于选取带有指定属性的元素。
[attribute=value]	用于选取带有指定属性和值的元素。
[attribute~=value]	用于选取属性值中包含指定词汇的元素。
[attribute|=value]	用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。
[attribute^=value]	匹配属性值以指定值开头的每个元素。
[attribute$=value]	匹配属性值以指定值结尾的每个元素。
[attribute*=value]	匹配属性值中包含指定值的每个元素。

使用

a[href="http://www.w3school.com.cn/"][title="W3School"] {color: red;}

5,，后代选择器

标签1空格标签2 {// 如p a

样式:样式值;

样式:样式值;

}  

h1 em {color:red;}

作为 标签1 元素后代的任何 标签2 元素  

注意:1>两个元素之间的层次间隔可以是无限的,

     2>标签1，标签2可为ID，可为类（如某个ID下某个ID样式，某个ID下某个类样式 等等）

6，子元素选择器（与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素子元素的元素。）

标签1空格>空格标签2{ //空格可省略

样式:样式值;

样式:样式值;

 }

选择作为 标签1 元素子元素的所有 标签2 元素

7，相邻兄弟选择器

标签1空格+空格标签2{//空格可省略

样式:样式值;

样式:样式值;

}

设置标签1后面相邻兄弟标签2 的样式

标签1 和标签2拥有共同父元素，标签2必须在标签1相邻后面

8，伪类

元素:伪类{

样式:样式值;

样式:样式值;

}

属性	描述	CSS
:active	向被激活的元素添加样式。	1
:focus	向拥有键盘输入焦点的元素添加样式。	2
:hover	当鼠标悬浮在元素上方时，向元素添加样式。	1
:link	向未被访问的链接添加样式。	1
:visited	向已被访问的链接添加样式。	1
:first-child	向元素的第一个子元素添加样式。	2
:lang	向带有指定 lang 属性的元素添加样式。	2

匹配文档的根元素。在HTML中，根元素永远是HTML

:active伪类向激活（在鼠标点击与释放之间发生的事件）的元素添加特殊的样式。 向被激活的元素添加样式

a:link {color: #FF0000}     /* 未访问的链接 */
a:visited {color: #00FF00}  /* 已访问的链接 */
a:hover {color: #FF00FF}    /* 当有鼠标悬停在链接上 */
a:active {color: #0000FF}   /* 被选择的链接 */

注释：为了产生预期的效果，在 CSS 定义中，a:hover 必须位于 a:link 和 a:visited 之后！！

注释：为了产生预期的效果，在 CSS 定义中，a:active 必须位于 a:hover 之后！！

:focus伪类在元素获得焦点时向元素添加特殊的样式。

input:focus
  {
  color:yellow;
  }

:first-child 作为任何一个元素的首个子元素并且子元素为XX的样式

参考这个网址http://www.cnblogs.com/2050/p/3569509.html关于first-child 和 first-type-of

全名应理解为 * > p:first_child 作为所有元素的第一个子元素为p标签的样式 选择属于其父元素的首个子元素为 <p> 元素样式

p:first_child {

样式:样式值;

样式:样式值;

}

9，伪元素

标签::伪元素{//（也可以是单冒号）

样式:样式值;

样式:样式值;

}

属性	描述	CSS
:first-letter	向文本的第一个字母添加特殊样式。	1
:first-line	向文本的首行添加特殊样式。	1
:before	在元素之前添加内容。	2
:after	在元素之后添加内容。	2