css面试点-伪类选择符

最新推荐文章于 2024-04-25 20:37:26 发布

wflynn

最新推荐文章于 2024-04-25 20:37:26 发布

阅读量937

点赞数 3

分类专栏： css 面试知识点

文章来源：原创地址

本文链接：https://blog.csdn.net/weixin_40013817/article/details/102542096

版权

面试知识点同时被 2 个专栏收录

169 篇文章 7 订阅

订阅专栏

css

24 篇文章 0 订阅

订阅专栏

伪类与伪元素的区别：伪类和伪元素都是用来修饰不在文档树中的部分
区别在于：
伪类：用于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的(如:hover/:active)。
伪元素：用于创建一些不在文档树中的元素，并为其添加样式（如:before/:after）。之所以被称为伪元素，是因为他们不是真正的页面元素，html没有对应的元素，但是其所有用法和表现行为与真正的页面元素一样。伪元素不属于文档，所以js无法操作它
伪元素属于主元素的一部分，因此点击伪元素触发的是主元素的click事件

w3c的CSS3规范中规定：
:单冒号，用于伪类 ::双冒号，用于伪元素
但是在css2规范中，伪元素的写法是:before——单冒号的形式。
CSS3中引入双冒号(::)除了IE8及其以下版本不支持外，所有的浏览器均支持伪元素中双冒号的使用。一些伪元素，如::backdrop只接受双冒号的使用。
如果想要兼容低版本的浏览器，都使用单冒号即可，在那些指定使用双冒号的伪元素上必须还是使用双冒号。

Selectors 选择符	CSS Version 版本	Description 简介
link	CSS1	设置超链接a在未被访问前的样式。
visited	CSS1	设置超链接a在其链接地址已被访问过时的样式。
hover	CSS1/2	设置元素在其鼠标悬停时的样式。
active	CSS1/2	设置元素在被用户激活（在鼠标点击与释放之间发生的事件）时的样式。
focus	CSS1/2	设置元素在成为输入焦点（该元素的onfocus事件发生）时的样式。
lang(fr)	CSS2	匹配使用特殊语言的E元素。
not(s)	CSS3	匹配不含有s选择符的元素E。
root	CSS3	匹配E元素在文档的根元素。
first-child	CSS2	匹配父元素的第一个子元素E。
last-child	CSS3	匹配父元素的最后一个子元素E。
only-child	CSS3	匹配父元素仅有的一个子元素E。
nth-child(n)	CSS3	匹配父元素的第n个子元素E。
nth-last-child(n)	CSS3	匹配父元素的倒数第n个子元素E。
first-of-type	CSS3	匹配同类型中的第一个同级兄弟元素E。
last-of-type	CSS3	匹配同类型中的最后一个同级兄弟元素E。
only-of-type	CSS3	匹配同类型中的唯一的一个同级兄弟元素E。
nth-of-type(n)	CSS3	匹配同类型中的第n个同级兄弟元素E。
nth-last-of-type(n)	CSS3	匹配同类型中的倒数第n个同级兄弟元素E。
empty	CSS3	匹配没有任何子元素（包括text节点）的元素E。
checked	CSS3	匹配用户界面上处于选中状态的元素E。(用于input type为radio与checkbox时)
enabled	CSS3	匹配用户界面上处于可用状态的元素E。
disabled	CSS3	匹配用户界面上处于禁用状态的元素E。
target	CSS3	匹配相关URL指向的E元素。
@page:first	CSS2	设置页面容器第一页使用的样式。仅用于@page规则
@page:left	CSS2	设置页面容器位于装订线左边的所有页面使用的样式。仅用于@page规则
@page:right	CSS2	设置页面容器位于装订线右边的所有页面使用的样式。仅用于@page规

link：设置超链接a在未被访问前的样式。

如果需要给超链接定义：访问前，鼠标悬停，当前被点击，已访问这4种伪类效果，而又没有按照一致的书写顺序，不同的浏览器可能会有不同的表现
超链接的4种状态，需要有特定的书写顺序才能生效。

a:link{}
a:visited{}
a:hover{}
a:active{}

注意，a:hover 必须位于 a:link 和 a:visited 之后，a:active 必须位于 a:hover 之后
可靠的顺序是：l(link)ov(visited)e h(hover)a(active)te, 即用喜欢和讨厌两个词来概括

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>CSS 链接伪类选择符 link选择器-CSS教程</title>
<style>
a:link{color:#03c;}
.external:link{color:#f00;}
</style>
</head>
<body>
<ul>
	<li><a href="?" class="external">外部链接</a></li>
	<li><a href="?">内部链接</a></li>
	<li><a href="?" class="external">外部链接</a></li>
	<li><a href="?">内部链接</a></li>
</ul>
</body>
</html>

visited：设置超链接a在其链接地址已被访问过时的样式。

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>CSS 链接伪类选择符 visited选择器-CSS教程</title>
<style>
:link{color:#03c;}
:visited{color:#f00;}
</style>
</head>
<body>
<ul>
	<li><a href="http://www.doyoe.com/" class="external">外部链接</a></li>
	<li><a href="http://blog.doyoe.com/">内部链接</a></li>
	<li><a href="http://demo.doyoe.com/" class="external">外部链接</a></li>
	<li><a href="http://css.doyoe.com/">内部链接</a></li>
</ul>
</body>
</html>

hover：设置元素在其鼠标悬停时的样式。

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>CSS 用户行为伪类选择符 hover选择器-CSS教程</title>
<style>
h1{font-size:16px;}
a,div{display:block;margin-top:10px;padding:10px;border:1px solid #ddd;}
a:hover{display:block;background:#ddd;color:#f00;}
div:hover{background:#ddd;color:#f00;}
</style>
</head>
<body>
<h1>请将鼠标分别移动到下面2个元素上</h1>
<a href="?">我是一个a</a>
<div>我是一个div</div>
</body>
</html>

active：设置元素在被用户激活（在鼠标点击与释放之间发生的事件）时的样式。

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>CSS 用户行为伪类选择符 active选择器-CSS教程</title>
<style>
h1{font-size:16px;}
a,div{display:block;margin-top:10px;padding:10px;border:1px solid #ddd;}
a:active{display:block;background:#ddd;color:#f00;}
div:active{background:#ddd;color:#f00;}
</style>
</head>
<body>
<h1>请将分别激活(点击与释放之间)下面2个元素</h1>
<a href="?">我是一个a</a>
<div>我是一个div</div>
</body>
</html>

focus：设置对象在成为输入焦点（该对象的onfocus事件发生）时的样式。webkit内核浏览器会默认给:focus状态的元素加上outline的样式。

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>CSS 用户行为伪类选择符 focus选择器-CSS教程</title>
<style>
h1{font-size:16px;}
ul{list-style:none;margin:0;padding:0;}
input:focus{background:#f6f6f6;color:#f60;border:1px solid #f60;outline:none;}
</style>
</head>
<body>
<h1>请聚焦到以下输入框</h1>
<form action="#">
	<ul>
		<li><input value="姓名" /></li>
		<li><input value="单位" /></li>
		<li><input value="年龄" /></li>
		<li><input value="职业" /></li>
	</ul>
</form>
</body>
</html>

lang(fr)：匹配使用特殊语言的E元素。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS 语言伪类选择符 lang(fr)选择器-CSS教程</title>
<style>
p:lang(zh-cn){color:#f00;}
p:lang(en){color:#090;}
</style>
</head>
<body>
<p lang="zh-cn">大段测试文字</p>
<p lang="en">english</p>
</body>
</html>

not(s)：匹配不含有s选择符的元素E。

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>CSS 否定伪类选择符 not(s)选择器-CSS教程</title>
<style>
p:not(.abc){color:#f00;}
</style>
</head>
<body>
<p class="abc">否定伪类选择符 not(s)</p>
<p id="abc">否定伪类选择符 not(s)</p>
<p class="abcd">否定伪类选择符 not(s)</p>
<p>否定伪类选择符 not(s)</p>
</body>
</html>

root：匹配E元素在文档的根元素。在HTML中，根元素永远是HTML

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>CSS 结构性伪类选择符 root选择器-CSS教程</title>
<style>
html:root{color:#f00;}
</style>
</head>
<body>
<ul>
	<li>列表项一</li>
	<li>列表项二</li>
	<li>列表项三</li>
</ul>
</body>
</html>

first-child：匹配父元素的第一个子元素E。要使该属性生效，E元素必须是某个元素的子元素，E的父元素最高是body，即E可以是body的子元素。

这里可能存在误解：

<ul>
	<li>列表项一</li>
	<li>列表项二</li>
	<li>列表项三</li>
	<li>列表项四</li>
</ul>

在上述代码中，如果我们要设置第一个li的样式，那么代码应该写成li:first-child{sRules}，而不是ul:first-child{sRules}。

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>CSS 结构性伪类选择符 first-child选择器-CSS教程</title>
<style>
h1{font-size:16px;}
li:first-child{color:#f00;}
</style>
</head>
<body>
<h1>注意是li:first-child，而不是ul:first-child</h1>
<ul>
	<li>结构性伪类选择符 first-child</li>
	<li>结构性伪类选择符 first-child</li>
	<li>结构性伪类选择符 first-child</li>
	<li>结构性伪类选择符 first-child</li>
</ul>
</body>
</html>

last-child：匹配父元素的最后一个子元素E。

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>CSS 结构性伪类选择符 last-child选择器-CSS教程</title>
<style>
h1{font-size:16px;}
li:last-child{color:#f00;}
</style>
</head>
<body>
<h1>注意是li:last-child，而不是ul:last-child</h1>
<ul>
	<li>结构性伪类选择符 last-child</li>
	<li>结构性伪类选择符 last-child</li>
	<li>结构性伪类选择符 last-child</li>
	<li>结构性伪类选择符 last-child</li>
</ul>
</body>
</html>

only-child：匹配父元素仅有的一个子元素E。

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>CSS 结构性伪类选择符 only-child选择器-CSS教程</title>
<style>
h1{font-size:16px;}
li:only-child{color:#f00;}
</style>
</head>
<body>
<h1>只有唯一一个子元素</h1>
<ul>
	<li>结构性伪类选择符 only-child</li>
</ul>
<h1>有多个子元素</h1>
<ul>
	<li>结构性伪类选择符 only-child</li>
	<li>结构性伪类选择符 only-child</li>
	<li>结构性伪类选择符 only-child</li>
</ul>
</body>
</html>

nth-child：匹配父元素的第n个子元素E，假设该子元素不是E，则选择符无效。该选择符允许使用一个乘法因子(n)来作为换算方式，比如我们想选中所有的偶数子元素E，那么选择符可以写成：nth-child(2n)

使用nth-child(n)实现奇偶：

<style>
li:nth-child(2n){color:#f00;} /* 偶数 */
li:nth-child(2n+1){color:#000;} /* 奇数 */
</style>

<ul>
	<li>列表项一</li>
	<li>列表项二</li>
	<li>列表项三</li>
	<li>列表项四</li>
</ul>

因为(n)代表一个乘法因子，可以是0, 1, 2, 3, ..., 所以(2n)换算出来会是偶数，而(2n+1)换算出来会是奇数

有一点需要注意的是：

<div>
	<p>第1个p</p>
	<p>第2个p</p>
	<span>第1个span</span>
	<p>第3个p</p>
	<span>第2个span</span>
	<p>第4个p</p>
	<p>第5个p</p>
</div>

p:nth-child(2){color:#f00;} 
// 很明显第2个p会被命中然后变成红色

p:nth-child(3){color:#f00;} 
// 这是会命中第3个p么？如果你这么认为那就错了，这条选择符就不会命中任何一个元素。

p:nth-child(4){color:#f00;} 
// 这时你以为会命中第4个p，但其实命中的却是第3个p，因为它是第4个子元素

// nth-child(n)会选择父元素的第n个子元素E，如果第n个子元素不是E，则是无效选择符，但n会递增。

nth-last-child(n)：匹配父元素的倒数第n个子元素E，假设该子元素不是E，则选择符无效。

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>CSS 结构性伪类选择符 nth-last-child(n)选择器-CSS教程</title>
<style>
h1{font-size:16px;}
li:nth-last-child(1){color:#f00;}
</style>
</head>
<body>
<h1>最后一行要变成红色 <code>li:nth-last-child(1){color:#f00;}</code></h1>
<ul>
	<li>结构性伪类选择符 nth-last-child(n)</li>
	<li>结构性伪类选择符 nth-last-child(n)</li>
	<li>结构性伪类选择符 nth-last-child(n)</li>
</ul>
</body>
</html>

first-of-type：匹配同类型中的第一个同级兄弟元素E。该选择符总是能命中父元素的第1个为E的子元素，不论第1个子元素是否为E

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>CSS 结构性伪类选择符 first-of-type选择器-CSS教程</title>
<style>
p:first-of-type{color:#f00;}
</style>
</head>
<body>
<div class="test">
	<div>我是一个div元素</div>
	<p>我是一个p元素</p>
	<p>我是一个p元素</p>
</div>
</body>
</html>

last-of-type：匹配同类型中的最后一个同级兄弟元素E。该选择符总是能命中父元素的倒数第1个为E的子元素，不论倒数第1个子元素是否为E

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>CSS 结构性伪类选择符 last-of-type选择器-CSS教程</title>
<style>
p:last-of-type{color:#f00;}
</style>
</head>
<body>
<div class="test">
	<div>我是一个div元素</div>
	<p>我是一个p元素</p>
	<p>我是一个p元素</p>
</div>
</body>
</html>

only-of-type：匹配同类型中的唯一的一个同级兄弟元素E。该选择符总是能命中父元素的唯一同类型子元素E，不论该元素的位置。

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>CSS 结构性伪类选择符 only-of-type选择器-CSS教程</title>
<style>
p:only-of-type{color:#f00;}
</style>
</head>
<body>
<div class="test">
	<p>结构性伪类选择符 only-of-type</p>
</div>
</body>
</html>

nth-of-type(n)：匹配同类型中的第n个同级兄弟元素E。该选择符总是能命中父元素的第n个为E的子元素，不论第n个子元素是否为E

有一点需要注意的是：

<div>
	<p>第1个p</p>
	<p>第2个p</p>
	<span>第1个span</span>
	<p>第3个p</p>
	<span>第2个span</span>
</div>

// 如上HTML，假设要命中第一个span：
span:nth-of-type(1){color:#f00;}

// 如果使用nth-child(n)：
span:nth-child(3){color:#f00;}

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>CSS 结构性伪类选择符 nth-of-type(n)选择器-CSS教程</title>
<style>
p:nth-of-type(2){color:#f00;}
</style>
</head>
<body>
<div class="test">
	<p>我是一个p元素</p>
	<div>我是一个div元素</div>
	<p>我是一个p元素</p>
	<p>我是一个p元素</p>
</div>
</body>
</html>

nth-last-of-type(n)：匹配同类型中的倒数第n个同级兄弟元素E。

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>CSS 结构性伪类选择符 nth-last-of-type(n)选择器-CSS教程</title>
<style>
p:nth-last-of-type(1){color:#f00;}
</style>
</head>
<body>
<div class="test">
	<p>我是一个p元素</p>
	<div>我是一个div元素</div>
	<p>我是一个p元素</p>
	<p>我是一个p元素</p>
</div>
</body>
</html>

empty：匹配没有任何子元素（包括text节点）的元素E。

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>CSS 结构性伪类选择符 empty选择器-CSS教程</title>
<style>
p:empty{height:25px;border:1px solid #ddd;background:#eee;}
</style>
</head>
<body>
<div class="test">
	<p>结构性伪类选择符 empty</p>
	<p><!--我是一个空节点p，请注意我与其它非空节点p的外观有什么不一样--></p>
	<p>结构性伪类选择符 empty</p>
</div>
</body>
</html>

checked：匹配用户界面上处于选中状态的元素E。(用于input type为radio与checkbox时)

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>CSS 用户界面(UI)元素状态伪类选择符 checked选择器-CSS教程</title>
<style>
input:checked+span{background:#f00;}
input:checked+span:after{content:" 我被选中了";}
</style>
</head>
<body>
<form method="post" action="#">
<fieldset>
	<legend>选中下面的项试试</legend>
	<ul>
		<li><label><input type="radio" name="colour-group" value="0" /><span>蓝色</span></label></li>
		<li><label><input type="radio" name="colour-group" value="1" /><span>红色</span></label></li>
		<li><label><input type="radio" name="colour-group" value="2" /><span>黑色</span></label></li>
	</ul>
</fieldset>
<fieldset>
	<legend>选中下面的项试试</legend>
	<ul>
		<li><label><input type="checkbox" name="colour-group2" value="0" /><span>蓝色</span></label></li>
		<li><label><input type="checkbox" name="colour-group2" value="1" /><span>红色</span></label></li>
		<li><label><input type="checkbox" name="colour-group2" value="2" /><span>黑色</span></label></li>
	</ul>
</fieldset>
</form>
</body>
</html>

enabled：匹配用户界面上处于可用状态的元素E。

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>CSS 用户界面(UI)元素状态伪类选择符 enabled选择器-CSS教程</title>
<style>
li{padding:3px;}
input[type="text"]:enabled{border:1px solid #090;background:#fff;color:#000;}
input[type="text"]:disabled{border:1px solid #ccc;background:#eee;color:#ccc;}
</style>
</head>
<body>
<form method="post" action="#">
<fieldset>
	<legend>enabled与disabled</legend>
	<ul>
		<li><input type="text" value="可用状态" /></li>
		<li><input type="text" value="可用状态" /></li>
		<li><input type="text" value="禁用状态" disabled="disabled" /></li>
		<li><input type="text" value="禁用状态" disabled="disabled" /></li>
	</ul>
</fieldset>
</form>
</body>
</html>

disabled：匹配用户界面上处于禁用状态的元素E。

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>CSS 用户界面(UI)元素状态伪类选择符 disabled选择器-CSS教程</title>
<style>
li{padding:3px;}
input[type="text"]:enabled{border:1px solid #090;background:#fff;color:#000;}
input[type="text"]:disabled{border:1px solid #ccc;background:#eee;color:#ccc;}
</style>
</head>
<body>
<form method="post" action="#">
<fieldset>
	<legend>enabled与disabled</legend>
	<ul>
		<li><input type="text" value="可用状态" /></li>
		<li><input type="text" value="可用状态" /></li>
		<li><input type="text" value="禁用状态" disabled="disabled" /></li>
		<li><input type="text" value="禁用状态" disabled="disabled" /></li>
	</ul>
</fieldset>
</form>
</body>
</html>

target：匹配相关URL指向的E元素。解释：URL后面跟锚点#，指向文档内某个具体的元素。这个被链接的元素就是目标元素(target element)，:target选择器用于选取当前活动的目标元素。

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>CSS 目标伪类选择符 target选择器-CSS教程</title>
<style>
.test .hd{padding:10px 0;}
.test .nav{position:fixed;right:10px;left: 540px;}
.test .nav a{display:block;margin: 10px 0;}
.test .bd .panel{width:500px;margin-top:5px;border:1px solid #ddd;}
.test .bd h2{border-bottom:1px solid #ddd;}
.test .bd .panel:target{border-color:#f60;}
.test .bd .panel:target h2{border-color:#f60;}
h2,p{margin:0;padding:10px;font-size:16px;}
</style>
</head>
<body>
<div class="test">
	<div class="hd nav">
		<a href="#panel1">前往区块1</a>
		<a href="#panel2">前往区块2</a>
		<a href="#panel3">前往区块3</a>
		<a href="#panel4">前往区块4</a>
		<a href="#panel5">前往区块5</a>
	</div>
	<div class="bd">
		<div id="panel1" class="panel">
			<h2>区块1</h2>
			<div><p>区块1内容</p><p>区块1内容</p><p>区块1内容</p></div>
		</div>
		<div id="panel2" class="panel">
			<h2>区块2</h2>
			<div><p>区块2内容</p><p>区块2内容</p><p>区块2内容</p></div>
		</div>
		<div id="panel3" class="panel">
			<h2>区块3</h2>
			<div><p>区块3内容</p><p>区块3内容</p><p>区块3内容</p></div>
		</div>
		<div id="panel4" class="panel">
			<h2>区块4</h2>
			<div><p>区块4内容</p><p>区块4内容</p><p>区块4内容</p></div>
		</div>
		<div id="panel5" class="panel">
			<h2>区块5</h2>
			<div><p>区块5内容</p><p>区块5内容</p><p>区块5内容</p></div>
		</div>
	</div>
</div>
</body>
</html>

css面试题之css选择符之属性选择符

css面试题之css选择符之伪对象（伪元素）选择符

css面试题之css选择符之元素选择符与关系选择符

wflynn

关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
css面试点-伪类选择符

伪类与伪元素的区别：伪类和伪元素都是用来修饰不在文档树中的部分区别在于：伪类：用于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的(如:hover/:active)。伪元素：用于创建一些不在文档树中的元素，并为其添加样式（如:before/:after）。之所以被称为伪元素，是因为他们不是真正的页面元素，html没有对应的元素，但是其所有用法和表现行为与真正的页面...
复制链接

扫一扫