伪元素选择器

伪元素创建了一个虚拟容器，这个容器不包含任何DOM元素 不存在于DOM树上，但是可以包含内容

伪元素推荐用::  伪类推荐:  为了更好区分 其实都行

p:first-letter 为第一个字设置样式 只对块级元素有效

p:first-line   为第一行设置样式 只对块级元素有效

div::before 元素最前边的部分 通过content可以向before或after的位置添加一些内容

div::after{ content:'kkkkkk' ;}

* 为p标签中选中的内容使用样式 可以使用::selection伪类 只能设置两个属性，一个是background,另一个是color属性

 p::selection * 为p标签中鼠标选中的部分设置样式 兼容IE9+ 及其他大部分浏览器的 

p::-moz-selection 注意：这个伪类在火狐中需要采用另一种方式编写

属性选择器

[attribute] 选取含有指定属性的元素

[attribute="val"] 选取含有指定属性值的元素

[attribute^="val"] 选取属性值以指定内容开头的元素

[attribute$="val"] 选取属性值以指定内容结尾的元素

[attribute*="val"] 选取属性值以包含指定内容的元素

[attribute~="value"] 选择attribute属性包含单词“value”的元素 

[attribute~="value"]  选择attribute属性值为“value”或者 "value-"开头的元素 

关系选择器 

后代选择器div span .nav 

子选择器   div>span   IE6及以下的浏览器不支持子元素选择器

div.nav 复合选择器(交集 并且 群组选择器)

兄弟选择器 span + p "后一个p兄弟"      span ~ p "后面所有p兄弟" 

优先级的规则

!important > 内联>ID > 类和伪类>元素>*通配符 > 继承的样式

* 内联样式 ， 优先级  1000

* id选择器，优先级  100

* 类和伪类， 优先级  10

* 元素 伪元素 选择器，优先级 1

* 通配* ，    优先级 0

* 继承的样式，没有优先级   可以在样式的最后，添加一个!important，则此时该样式将会获得一个最高的优先级

css常用的样式命名:

1)页面结构

页头:header 导航:nav

页面主体:main 侧栏:sidebar

页尾:footer 栏目:column

内容:content/container 页面外围控制:wrapper

容器:container 左中右:left center right

2)导航

导航:nav 左导航:leftsidebar

主导航:mainnav 右导航:rightsidebar

子导航:subnav 菜单:menu

顶导航:topnav 子菜单:submenu

边导航:sidebar 标题:title 摘要:summary

3)功能

标志:logo 注册:register

广告:banner 搜索:search

登录:login 功能区:shop

登录条:loginbar 标题:title