一、伪元素选择器
选择器:伪元素{属性:值}
选择器.类名:伪元素{属性:值}
(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){
}