CSS伪类

语法：selector:伪类{}  或者与CSS类结合 selector.class:伪类{}

锚伪类:a:link{}  a:visited{}  a:hover{}  a:active{}

first-child伪类  selector:first-child{}   选择作为某元素的first-child的selector

例子 1 - 匹配第一个 <p> 元素

在下面的例子中，选择器匹配作为任何元素的第一个子元素的 p 元素：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <title></title>
 5 <style type="text/css">
 6 li+li{
 7 font-weight: bolder;
 8 }
 9 p:first-child{
10 color: red;
11 }
12 </style>
13 </head>
14 <body>
15 <!-- <ul>
16 <li>Coffee</li>
17 <li>Water</li>
18 <li>tea</li>
19 </ul>
20 <ol>
21 <li>Coffee</li>
22 <li>Water</li>
23 <li>tea</li>
24 </ol>
25 <hr/> -->
26 <p>自认惊叹的桥段终沦为老生常谈</p>
27 <p>自认惊叹的桥段终沦为老生常谈</p>
28 <p>自认惊叹的桥段终沦为老生常谈</p>
29 </body>
30 </html>

 

例子 2 - 匹配所有 <p> 元素中的第一个 <i> 元素

在下面的例子中，选择器匹配所有 <p> 元素中的第一个 <i> 元素：

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
li+li{
font-weight: bolder;
}
p:first-child{
color: red;
}
p>i:first-child{
color: blue;
}
</style>
</head>
<body>
<!-- <ul>
<li>Coffee</li>
<li>Water</li>
<li>tea</li>
</ul>
<ol>
<li>Coffee</li>
<li>Water</li>
<li>tea</li>
</ol>
<hr/> -->
<p>自认<i>惊叹</i>的桥段终<i>沦为</i>老生常谈</p>
<p>自认<i>惊叹</i>的桥段终<i>沦为</i>老生常谈</p>
<p>自认<i>惊叹</i>的桥段终<i>沦为</i>老生常谈</p>

</body>
</html>

　

例子 3 - 匹配所有作为第一个子元素的 <p> 元素中的所有 <i> 元素

在下面的例子中，选择器匹配所有作为元素的第一个子元素的 <p> 元素中的所有 <i> 元素：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <title></title>
 5 <style type="text/css">
 6 li+li{
 7 font-weight: bolder;
 8 }
 9 p:first-child{
10 color: red;
11 }
12 p>i:first-child{
13 color: blue;
14 }
15 p:first-child i{
16 color:yellow;
17 }
18 </style>
19 </head>
20 <body>
21 <!-- <ul>
22 <li>Coffee</li>
23 <li>Water</li>
24 <li>tea</li>
25 </ul>
26 <ol>
27 <li>Coffee</li>
28 <li>Water</li>
29 <li>tea</li>
30 </ol>
31 <hr/> -->
32 <p>自认<i>惊叹</i>的桥段终<i>沦为</i>老生常谈</p>
33 <p>自认<i>惊叹</i>的桥段终<i>沦为</i>老生常谈</p>
34 <p>自认<i>惊叹</i>的桥段终<i>沦为</i>老生常谈</p>
35 
36 </body>
37 </html>

lang伪类

q:lang(haha){
quotes: "*" "*"
}

<p>自认<q lang="haha">惊叹</q>的桥段终沦为老生常谈</p>

 focus伪类

 1 <form>
 2 UserName:&nbsp;<input type="text" id="un"><br/>
 3 PassWord:&nbsp;&nbsp;<input type="password" id="pw">
 4 </form>
 5 
 6 #un:focus{
 7 background-color: lightgray;
 8 }
 9 #pw:focus{
10 background-color: lightseagreen;
11 }

 

 

 

CSS伪元素

CSS 伪元素用于向某些选择器设置特殊效果。

可以结合多个伪元素来使用。

3.before.after

":before" 伪元素可以在元素的内容前面插入新内容。

":after" 伪元素可以在元素的内容后面插入新内容。

语法：selector:伪元素{}  也可以结合类名一起使用  selector.class:伪元素{}

1.first-line伪元素  用于向文本第一行设置特殊效果

 

注释："first-line" 伪元素只能用于块级元素。

注释：下面的属性可应用于 "first-line" 伪元素：

  • font
  • color
  • background
  • word-spacing
  • letter-spacing
  • text-decoration
  • vertical-align
  • text-transform
  • line-height
  • clear

2.first-letter

注释："first-letter" 伪元素只能用于块级元素。

注释：下面的属性可应用于 "first-letter" 伪元素：

  • font
  • color
  • background
  • margin
  • padding
  • border
  • text-decoration
  • vertical-align (仅当 float 为 none 时)
  • text-transform
  • line-height
  • float
  • clear