如何在内容后面的css中编写div id

我还有一个问题没有找到答案。我正试图在我的站点中显示每个div的id，以可视化嵌套。这是我迄今为止的代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="frame">
<div id="header">
<div id="navigation"></div>
</div>
<div id="mainContent">
<div id="sidebarLeft">
<div id="calendar"></div>
</div>
<div id="article"></div>
<div id="sidebarRight"></div>
</div>
<div id="footer">
<div id="siteInfo"></div>
</div>
</div>
</body>
<style>
#frame {
display: flex;
flex-direction: column;
height: 100vh;
}
#mainContent {
flex: 1;
background: blue;
}
#header {
height: 64px;
background: red;
}
#header::after{
content:"#header";
color: white;

}
#footer {
height: 64px;
background: green;
}
div[id]{border: 1px solid red;
padding: 5px;}
</style>
</html>

我怎么能在这里使用javascript在每个div的内容之后在divs-css中写divs-id，就像我在#headerdiv中每只手写一样？

只能使用css content:attr(id)。

#frame {
display: flex;
flex-direction: column;
height: 100vh;
}
#mainContent {
flex: 1;
background: blue;
}
#header {
height: 64px;
background: red;
}

/*
#header::after{
content:"#header";
color: white;

}
*/
#footer {
height: 64px;
background: green;
}
/*
div[id]{border: 1px solid red;
padding: 5px;}
*/

/*REM: Show id*/
div[id]::after{
background: lime;
content: '#' '' attr(id);
color: white
}
/*REM: Show class*/
div[class]:not(id)::after{
background: aqua;
content: '.' '' attr(class);
color: white
}

<div id="frame">
<div id="header">
<div id="navigation"></div>
</div>
<div id="mainContent">
<div id="sidebarLeft">
<div id="calendar"></div>
</div>
<div id="article"></div>
<div id="sidebarRight"></div>
</div>
<div id="footer">
<div id="siteInfo"></div>
<div class="siteClass"></div>
</div>
</div>

没有直接的方法，但有两种方法可以实现

使用数据属性对after元素的css使用data-my-id="header"使用content: attr(data-my-id)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="frame" data-my-id="frame">
<div id="header" data-my-id="header">
<div id="navigation" data-my-id="navigation"></div>
</div>
<div id="mainContent" data-my-id="mainContent">
<div id="sidebarLeft" data-my-id="sidebarLeft">
<div id="calendar" data-my-id="calendar"></div>
</div>
<div id="article" data-my-id="article"></div>
<div id="sidebarRight" data-my-id="sidebarRight"></div>
</div>
<div id="footer" data-my-id="footer">
<div id="siteInfo" data-my-id="siteInfo"></div>
</div>
</div>
</body>
<style>
#frame {
display: flex;
flex-direction: column;
height: 100vh;
}
#mainContent {
flex: 1;
background: blue;
}
#header {
height: 64px;
background: red;
}
/* #header::after {
content: "#header";
color: white;
} */
#footer {
height: 64px;
background: green;
}
div[id] {
border: 1px solid red;
padding: 5px;
}
div[id]::after {
content: attr(data-my-id);
background-color: white;
color: black;
font-family: Arial, Helvetica, sans-serif;
padding: 2px 4px;
border: 1px solid black;
display: inline-block;
width: max-content;
}
</style>
</html>

相关内容

最新更新

热门标签：