对于完整的HTML文件和CSS样式,一部分的代码片段如何获取对应的CSS啊?(人工找太难了。)比如下面的,其中HTML只截取了<header>...</header>部分,下面是对应的CSS。
【HTML代码片段】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<header>
<nav class="navbar">
<img src="./images/logo.png" alt="" class="logo">
<ul class="nav-list">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">PortfolioBlog</a></li>
<li><a class="ctn" href="#">Contact Us</a></li>
</ul>
</nav>
</header>
</body>
</html>
【对应的CSS样式】
header {
background-size: 100%;
min-height: 100vh;
position: relative;
}
.navbar {
position: absolute;
left: 0;
top: 0;
display: flex;
width: 100%;
padding: 10px 50px;
align-items: center;
}
.navbar ul {
flex: 1;
text-align: right;
}
.navbar ul li {
display: inline-block;
margin: 0 25px;
list-style: none;
}
.logo {
width: 180px;
}
.ctn {
padding: 10px 20px;
background: var(--gradient-3);
border-radius: 50px;
}
.ctn:hover {
background: linear-gradient(
to bottom right,
rgb(255, 111, 92),
rgb(255, 207, 145)
);
}
两种方式:
1.用getComputedStyle
但你的需求比较特殊,还需要获取所有子节点的样式,可能不满足。
2.用document.styleSheets
这个接口可以获取到所有样式表,并且每个样式表有cssRules属性,其中还有selectorText选择器的属性,可以比较灵活的获取一些样式。