HTML片段如何获取相应的CSS样式啊？

Question

HTML片段如何获取相应的CSS样式啊？

发布于
2021-11-23

新手上路，请多包涵

对于完整的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)
  );
}

前端 css html

阅读 2.1k

1 个回答

得票最新

Gomi

2.4k41734

发布于
2021-11-27

两种方式：

1.用getComputedStyle
但你的需求比较特殊，还需要获取所有子节点的样式，可能不满足。

2.用document.styleSheets
这个接口可以获取到所有样式表，并且每个样式表有cssRules属性，其中还有selectorText选择器的属性，可以比较灵活的获取一些样式。

撰写回答