html

一、伪元素选择器

选择器：伪元素{属性：值}

选择器.类名：伪元素{属性：值}

（1）first-line伪元素选择器：用于向某个元素中的第一行文字使用样式

<p>段落第一行<br>段落第二行</p>

<style  type="text/css">

p:first-line{

属性：值

}

（2）first-letter:用于向某个元素中的文字的首字母或第一个字使用样式

p:first-letter{

属性：值

}

（3）before:在某个元素之前插入一些内容

<元素>：before

{

content:插入文字

}

li:before{content:??}

（4）after：用于在某个元素后插入一些内容

二、结构性伪选择器（允许开发者根据文档树中的结构来指定元素的样式）

四个最基本的结构性伪类选择器——root，not，empty，target

（1）root选择器：将样式绑定到页面的根元素中，根元素是指位于文档树种最顶层结构的元素，在html页面中就是指包含着整个页面的html部分。

<style type="text/css">

:root{

background-color:yellow;  //舍去的话整个页面变成绿色

}

body{

background-color: imegreen;

}

（2）not：若想对某个结构元素使用样式，但是想排除这个结构元素下面的子结构元素，让它不使用这个样式，用not选择器。

body *:not ( h1);

（3）empty：指定当元素中内容为空白时使用的样式

：empty{

}

（4）target：使用target选择器来对页面中某个target元素（该元素的id被当做页面中的超链接来使用）指定样式，该样式只在用户点击了页面中的超链接，并且跳转到target元素后起作用

三、first-child,last-child,nth-child,nth-last-child

li:first-child{

}

li:last-child{

}

当页面有多个ul列表，则对所有列表都适用。

对指定序号的子元素适用样式

nth-child(n){ //表示第n个子元素

//指定样式

}

<子元素>:nth-last-child(n){ //表示倒数第n个子元素

//指定样式

}

对所有第奇数个子元素或第偶数个子元素使用样式

nth-child(odd){

//指定样式

//所有正数下来的第奇数个子元素

}

//nth-child选择器在计算子元素是第奇数个元素还是第偶数个子元素时，是连同父元素中的所有子元素一起计算的。

<子元素>:nth-child(even){

//所有正数下来的第偶数个子元素

}

nth-of-type ,nth-last-of-type:在计算子元素是第奇数个元素还是第偶数个子元素时，就只针对同类型的子元素进行计算。

循环使用样式

li:nth-child(4n+1){

}