欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

关于css伪类的实例分析

程序员文章站 2022-04-19 18:40:30
关于css伪类 包括两种:UI伪类 结构化伪类 一 UI伪类:基于特定HTML元素的状态应用样式。 1 链接伪类(四种状态) link 点击前;Visited 点击之后;H...

关于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.