css伪类选择器及伪元素选择器

时间:2023-01-16 15:09:50

1、类选择器
在css中可以使用类选择器把相同的元素定义成不同的样式。比如:
css伪类选择器及伪元素选择器

css伪类选择器及伪元素选择器

结果如下:

css伪类选择器及伪元素选择器标题背景未变

2、伪类选择器
类选择器和伪类选择器的区别在于,类选择器我们定义的,而伪类选择器是CSS中已经定义好的选择器。
最常见的伪类选择器
a:link{ color: #ff6600 } /* 未被访问的链接 */
a:visited{ color: #87b291 } /* 已被访问的链接 */
a:hover{ color: #6535b2 } /* 鼠标指针移动到链接上 */
a:active{ color: #55b28e } /* 正在被点击的链接 */

css伪类选择器及伪元素选择器

css伪类选择器及伪元素选择器

结果如下:

css伪类选择器及伪元素选择器

3、伪元素选择器
伪元素选择器,针对于CSS中已经定义好的伪元素使用的选择器。
使用方法:
元素:伪元素{属性:值}
与类配合使用
元素.类名:伪元素{属性:值}
在CSS中,主要有四个伪元素选择器:
1)、first-line伪元素选择器
first-line伪元素选择器用于向某个元素中的第一行文字使用样式。
2)、first-letter伪元素选择器
first-letter伪元素选择器用于向某个元素中的文字的首字母(欧美文字)或第一个字(中文或者是日文等汉字)使用样式。
3)、before伪元素选择器
before伪元素选择器用于在某个元素之前插入一些内容。
4)、after伪元素选择器
after伪元素选择器用于在某个元素之后插入内容。

css伪类选择器及伪元素选择器

css伪类选择器及伪元素选择器

css伪类选择器及伪元素选择器

4、结构性伪类选择器root、not、empty和target
1)、root选择器:root
root选择器将样式绑定到页面的根元素中。
2)、not选择器:not()
想对某个结构元素使用样式,但是想排除这个结构元素下面的子结构元素,让它不使用这个样式时,我们就可以使用not选择器。

css伪类选择器及伪元素选择器

css伪类选择器及伪元素选择器

css伪类选择器及伪元素选择器root设置了网页的背景,body设置了除了h5标题以外背景为白色(自行设置的优先级比body高,不是白色)

3)、empty选择器:empty
empty选择器指定当元素中内容为空白时使用的样式。

css伪类选择器及伪元素选择器

css伪类选择器及伪元素选择器

css伪类选择器及伪元素选择器空的单元格才设置背景

4)、target选择器:target
target选择器对页面中某个target元素指定样式,该样式只在用户点击了页面中的超链接,并且跳转到target元素后起作用。

css伪类选择器及伪元素选择器

css伪类选择器及伪元素选择器

css伪类选择器及伪元素选择器这里点击到C书签,变成棕色

选择器first-child、last-child、nth-child和nth-last-child
1)、first-child选择器
first-child单独指定第一个子元素的的样式。
2)、last-child选择器
last-child单独指定最后一个子元素的的样式。
3)、nth-child选择器
nth-child(n) 选择器匹配正数下来第 N 个子元素
nth-child(odd)选择器匹配正数下来第奇数个子元素
nth-child(even)选择器匹配正数下来第偶数个子元素
4)、nht-last-child选择器
nth-last-child(n) 选择器匹配倒数数下来第 N 个子元素
nth-last-child(odd)选择器匹配倒数数下来第奇数个子元素
nth-last-child(even)选择器匹配倒数下来第偶数个子元素

css伪类选择器及伪元素选择器

css伪类选择器及伪元素选择器

css伪类选择器及伪元素选择器B书签即为div的第二个设成了红色

选择器nth-of-type和nth-last-of-type

nth-of-type和nth-last-of-type在css3中在统计的时候就只针对同类型的子元素进行计算。
nth-of-type正数
nth-last-of-type倒数
兼容性:
nth-of-type和nth-last-of-type都是CSS3开始提供需要在IE8以上的浏览器才会被支持,Chrome浏览器、Firefox浏览器、Opera浏览器、Safari浏览器都支持!

循环使用样式
nth-child(An+B)A表示每次循环*包括几种样式,B表示指定的样式在循环中所处的位置。

only-child选择器
only-child选择器,只对唯一的子元素起作用。
css伪类选择器及伪元素选择器

css伪类选择器及伪元素选择器

css伪类选择器及伪元素选择器

html文档:

 <!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
/*类选择器*/
p.test{background-color: #a4ff56;}
/*伪类选择器*/
a:link{color: #ff65ea;}/*默认状态*/
a:visited{color: #ffd300;}/*页面打开过了*/
a:hover{color : #800a13;}/*鼠标放上上面*/
a:active{color: #ff9535;}/*鼠标点击但不松开*/
/*伪元素选择器*/
p.pseudo:first-line{color: #11caff;}
p.pseudo:first-letter{font-size:26px;}
p.pseudo:before{content:"我是伪元素选择器before加的头";color: #ff3180;}
/*这里颜色没变,依旧是第一行设置的颜色*,线list-style:none,去掉列表默认
的原点,加上自己的样式*/
p.pseudo:after{content:"我是伪元素选择器after加的小尾巴";color: #ff3180;}
/*结构形伪类选择器*/
:root{background-color:darkseagreen;}
body *:not(h5){background-color:white;}/*body下除了h5都为白色*/
table *:empty{background-color:royalblue;}/*这个*不能省略*,表示table下的所有标签*/
:target{background-color:rosybrown;} /*div:nth-child(even){background-color: red;}*或者奇数odd都可生效/
/*div:nth-child(2){background-color: red;}*但这一条无法生效,选择一类标签的某一条,
可用下面的nth-of-type*/
div:nth-last-of-type(2){background-color: red;} li:nth-child(3n+1){background-color: #ffd300;}
li:nth-child(3n+2){background-color: #4db1bc;}
li:nth-child(3n+3){background-color: #4affab;}/*3个为一个循环,对所有li生效,包括其他ul里的*/
li:only-child{background-color: palevioletred;}/*只有元素只有一个时,才能生效*/
.ul2>li{background-color: #19bc3e;}/*将ul2的所有行变为绿色*/
/*li:nth-child(8){background-color: crimson;}无用*/
.ul2 li:nth-child(1){background-color: crimson;}/*将ul2的第一行变成红色,即所有li的第8个*/
ul:nth-of-type(2){background-color: gold;}/*这样将第二个ul列表的头部变成黄色*/
</style>
</head>
<body>
<h5 class="test">test</h5>
<p class="test">test</p>
<a href="#A">伪类选择器测试</a>
<a href="#B">伪类选择器-鼠标放上面</a>
<a href="#C">伪类选择器-点击过了</a><br/>
<p class="pseudo">
伪元素选择器一行<br/>因为并没有first-line这种元素
</p>
<table border="1"cellpadding="0"cellspacing="0">
<tr><td>有内容</td><td></td></tr>
<tr><td>有内容</td><td>有内容</td></tr>
</table>
<div id="A">A书签</div>
<div id="B">B书签</div>
<div id="C">C书签</div>
<ul>
<li>test1</li>
<li>test2</li>
<li>test3</li>
<li>test1</li>
<li>test2</li>
<li>test3</li>
<li>test1</li>
</ul>
<ul class="ul2">
<li>test</li>
<li>test</li>
<li>test</li>
</ul>
<ul>
<li>only child</li>
</ul>
</body>
</html>

css伪类选择器及伪元素选择器