关于css伪类的实例分析
关于css伪类
包括两种:UI伪类 结构化伪类
一 UI伪类:基于特定HTML元素的状态应用样式。
1 链接伪类(四种状态)
link 点击前;Visited 点击之后;Hover 鼠标悬停在链接上;Active 点击时;
以下是4个伪类选择符:
a:link{color:black;} a:visited{color: #ccc;} a:hover{text-decoration: none;} a:active{color: black;}
PS:有些伪类可以用于任何元素,例:
p:hover{background-color:gray;}
2 focus伪类 e:focus
e表示任何元素,如p,h1,input
表单中的文本字段在用户单击它时会获得焦点,然后用户才能在其中输入字符。下面的规则input:focus {border:1px solid blue;}
会在光标位于input字段中时,为该字段添加一个蓝色边框。这样可以让用户明确地知道输入的字符会出现在哪里。
3 target伪类 e:target
如果用户点击一个指向页面中其他元素的链接,则那个元素就是目标(target),可以用:target伪类选中它
二 结构化伪类
1 first-child和last-child
e:first-child e:last-child
:first-child代表一组同胞元素中的第一个元素,而:last-child则代表最后一个。
#main ul li:first-child{color:red} 表示将ul下的第一个元素颜色设置为红色
#main ul li:last-child{color:red}表示将ul下的最后一个元素颜色设置为红色
2 nth-child
e:nth-child(n)
设置属于其父元素的第n个子元素
3 伪元素
1 ::first-letter伪元素 e::first-letter (一般用于段落的第一个字)
比如:p::first-letter {font-size:300%;} 段落首字符放大效果
2 ::first-line伪元素 e::first-line (一般用于段落的第一行)
比如:p::first-line{font-variant:small-caps;} 把第一行变成了大写字母显示
3 ::before和::after
可用于在特定元素前面或后面添加特殊内容。 以下标记:
25
和如下样式: p.age::before {content:"Age: ";} p.age::after {content:" years.";} 注意,每个content属性值中都包含了空格,以便输出结果中有适当的空距。 能得到以下结果: Age: 25 years.