html5常用选择器

HTML5中常见选择器：

一、基本选择器：
1、元素选择器：
格式：标记名{/声明块/}
所有与该标记名匹配的元素，都将应用声明块中的规则
2、类选择器：
格式：**.**类名{/声明块/}
所有class属性为指定类名的元素，都将应用声明块中的规则，其中类型名可以写多个，方便代码复用
所有标签都可以有class属性
3、id选择器：
格式：#id值{/声明块/}

属性id为指定值的元素，都将应用声明块中的规则
在同一个HTML文档中，元素的id值必须唯一，在javascript中常用
4、全局选择器;
格式：*{声明块}

二、层次选择器：
1、子代选择器
格式：父级元素名称+“>”+子级元素名称+{声明块}
例子：div>p{color:red;}
2、后代选择器：
格式：祖先元素名称+空格+后代元素名称+{声明块}
例子：div p{color:red;}
3、兄弟选择器：
格式：A元素名称+“+”+B元素名称+{声明块}
例子：div+p{color:red;}
4、结构选择器 :
格式：first-child :last-child :nth-child(n)
作用：找li中父元素的第几个子元素， 但是一定要条件，找见的孩子必须是li元素，换成其他元素都不行

ul>li:first-child {
            background-color: #55a532;
        }

 ul>li:last-child {
            background-color: #999999;
        }

 ul>li:nth-of-type(4){
            background-color: black;
        }

三、动态伪类选择器
1、鼠标悬停
a:hover{color:black;}
四、伪元素选择器：
css3为了区分伪类和伪元素，伪元素采用双冒号写法，::before和::after下特有的content,用于在css渲染中向元素逻辑上的头部或者尾部添加内容，这些添加不会出现在DOM中，不会改变文档内容，不可复制，仅仅是在CSS渲染层加入。所以不要用::before或::after展示有实际意义的内容，尽量使用它们显示修饰性内容，例如图标。
元素后面加内容：
格式：元素名称+“::after”+{content:“要添加的内容”}

元素前面加内容：
格式：元素名称+“::before”+{content:“要添加的内容”