chrome开放者工具元素模块之伪类强制设置状态篇
使用chrome开放者工具元素模块来伪类强制设置状态使用
正常情况下，木有达到触发条件，页面是木有办法显示伪类状态，这个时候可以使用chrome浏览器->开发者工具->元素->样式->强制设置元素状态来触发显示
比如：hover 要常驻，选中需要常驻的元素，然后选中：hov 的：hover，即可让 hover 时候的状态常驻，同样的，也可选择其他状态如：active、focus 等
效果图如下：
代码附上：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width,initial-scale=1 user-scalable=0"
/>
<title>伪类</title>
</head>
<style>
* {
margin: 0;
padding: 0;
}
.main {
max-width: 600px;
height: 100%;
margin: 20px auto 0px;
border: 1px solid #ccc;
font-size: 16px;
color: #444;
padding: 20px;
word-break: break-all;
}
div {
padding: 20px;
}
/* 未访问的链接 */
.link:link {
color: #ff0000;
}
/* 已访问的链接 */
.visited:visited {
color: #00ff00;
}
/* 鼠标划过链接 */
.hover:hover {
color: #ff00ff;
}
/* 已选中的链接 */
.active:active {
color: khaki;
}
input:focus {
background-color: yellow;
}
:target {
border: 2px solid #d4d4d4;
background-color: #e5eecc;
}
.target p {
padding: 4px 0px;
}
.g-father,
.g-children {
padding: 30px;
border: 1px solid #999;
}
.g-father:focus-within {
background: #ffeb3b;
}
.g-children:focus-within {
background: #4caf50;
}
</style>
<body>
<!--页面主体部分-->
<div class="main">
<div>
a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。 a:active
必须被置于 a:hover 之后，才是有效的。
</div>
<a class="link" href="http://www.runoob.com/">link</a>
<a class="visited" href="http://www.runoob.com/">visited</a>
<a class="active" href="http://www.runoob.com/">active</a>
<a class="hover" href="http://www.runoob.com/">hover</a>
<div>
<p>--------------- 伪类选择器 :target--------------</p>
锚的名称是在一个文件中链接到某个元素的URL。元素被链接到目标元素。
:target选择器可用于当前活动的target元素的样式
</div>
<div class="target">
<p><a href="#news1">Jump to New content 1</a></p>
<p><a href="#news2">Jump to New content 2</a></p>
<p>
Click on the links above and the :target selector highlight the
current active HTML anchor.
</p>
<p id="news1"><b>New content 1...</b></p>
<p id="news2"><b>New content 2...</b></p>
<p><b>注意:</b> IE 8 以及更早版本的浏览器不支持 :target 选择器.</p>
</div>
<div>
<p>----------------- 伪类选择器 :focus-within --------------</p>
它表示一个元素获得焦点，或，该元素的后代元素获得焦点。
这也就意味着，它或它的后代获得焦点，都可以触发 :focus-within。
:focus-within 的冒泡性 这个属性有点类似 Javascript
的事件冒泡，从可获焦元素开始一直冒泡到根元素 html，都可以接收触发
:focus-within 事件
</div>
<div class="g-father">
<div class="g-children">
<input type="button" value="Button" />
</div>
</div>
</div>
</body>
</html>
