是否可以使用CSS＆＃34;内容＆＃34;属性（在：之前/：在伪元素之前）实际用它的标签名称标记一个块？比如attr(...)，但是对于代码而不是它的属性。
PseudoCSS：
body *:before{
content: tagname;
color: red;
}
应该在页面中添加其标记名称以红色显示的所有元素。
答案 0 :(得分：2)
使用css是不可能的。据我所知，这样做的唯一方法就是手工写出内容。
答案 1 :(得分：0)
这里有一些Javascript + CSS可以做到这一点（原谅CDATA部分，添加以解除对解析器的混淆，因此可以将其粘贴到此处）。我注意到先前评论者的代码链接已被破坏，因此认为值得发布我自己的代码。
<![CDATA[
<html>
<head>
<!-- Javascript and CSS to display tag name, class attribute, and ID on all
elements in an HTML file. "." is put before the class attribute, and
"#" before the ID (following CSS selector usage).
Written 2016-02-03 by Steven J. DeRose.
-->
<style type="text/css">
<!--
*:before {
content: "<" attr(info) ">";
font-size: smaller;
color: blue;
vertical-align: 40%;
}
*:after {
content: "</" attr(info) ">";
font-size: smaller;
color: blue;
vertical-align: 40%;
}
-->
</style>
<script type="text/javascript">
<!--
// Call this from body via @onload.
function init() {
var el = document.documentElement;
addTagNameAsClass(el);
}
// Recursively copies tag names onto @tag, so CSS 'content' can get them.
function addTagNameAsClass(el) {
if (el.nodeType != 1) { return; }
var inf = el.tagName;
if (el.hasAttribute('class')) { inf += " ." + el.getAttribute('class'); }
if (el.hasAttribute('id')) { inf += " #" + el.getAttribute('id'); }
el.setAttribute('info', inf);
var children = el.childNodes;
for (var i=0; i<children.length; i++) {
addTagNameAsClass(children[i]);
}
}
-->
</script>
</head>
<body onload="init();">
...
]]>
答案 2 :(得分：0)
我不想添加属性和修改文档，所以我写了一个小脚本来制作each type of HTML element的CSS。我没有在此处包含该脚本，但是执行此操作非常简单。
这是CSS输出，以及一个包含contenteditable="true"和一个用于切换标签的按钮的示例。我认为它可以很好地编辑带文本的文本，并可以选择显示标签。我记得 WordPerfect 具有“显示代码”功能，有点类似。
function toggle_tags() {
document.body.classList.toggle("tags");
}
toggle_tags();
document.getElementById("btn_tags").addEventListener("click", toggle_tags);.tags *::before, .tags *::after {
background: #faa;
border-radius: 3px;
font: normal normal 400 10px/1.2 monospace;
}
.tags *::before {
content: "(";
}
.tags *::after {
content: ")";
}
.tags html::before { content: "<html>"; }
.tags html::after { content: "</html>"; }
.tags base::before { content: "<base>"; }
.tags base::after { content: "</base>"; }
.tags head::before { content: "<head>"; }
.tags head::after { content: "</head>"; }
.tags link::before { content: "<link>"; }
.tags link::after { content: "</link>"; }
.tags meta::before { content: "<meta>"; }
.tags meta::after { content: "</meta>"; }
.tags style::before { content: "<style>"; }
.tags style::after { content: "<\/style>"; }
.tags title::before { content: "<title>"; }
.tags title::after { content: "</title>"; }
.tags body::before { content: "<body>"; }
.tags body::after { content: "</body>"; }
.tags address::before { content: "<address>"; }
.tags address::after { content: "</address>"; }
.tags article::before { content: "<article>"; }
.tags article::after { content: "</article>"; }
.tags aside::before { content: "<aside>"; }
.tags aside::after { content: "</aside>"; }
.tags footer::before { content: "<footer>"; }
.tags footer::after { content: "</footer>"; }
.tags header::before { content: "<header>"; }
.tags header::after { content: "</header>"; }
.tags h1::before { content: "<h1>"; }
.tags h1::after { content: "</h1>"; }
.tags h2::before { content: "<h2>"; }
.tags h2::after { content: "</h2>"; }
.tags h3::before { content: "<h3>"; }
.tags h3::after { content: "</h3>"; }
.tags h4::before { content: "<h4>"; }
.tags h4::after { content: "</h4>"; }
.tags h5::before { content: "<h5>"; }
.tags h5::after { content: "</h5>"; }
.tags h6::before { content: "<h6>"; }
.tags h6::after { content: "</h6>"; }
.tags hgroup::before { content: "<hgroup>"; }
.tags hgroup::after { content: "</hgroup>"; }
.tags main::before { content: "<main>"; }
.tags main::after { content: "</main>"; }
.tags nav::before { content: "<nav>"; }
.tags nav::after { content: "</nav>"; }
.tags section::before { content: "<section>"; }
.tags section::after { content: "</section>"; }
.tags blockquote::before { content: "<blockquote>"; }
.tags blockquote::after { content: "</blockquote>"; }
.tags dd::before { content: "<dd>"; }
.tags dd::after { content: "</dd>"; }
.tags div::before { content: "<div>"; }
.tags div::after { content: "</div>"; }
.tags dl::before { content: "<dl>"; }
.tags dl::after { content: "</dl>"; }
.tags dt::before { content: "<dt>"; }
.tags dt::after { content: "</dt>"; }
.tags figcaption::before { content: "<figcaption>"; }
.tags figcaption::after { content: "</figcaption>"; }
.tags figure::before { content: "<figure>"; }
.tags figure::after { content: "</figure>"; }
.tags hr::before { content: "<hr>"; }
.tags hr::after { content: "</hr>"; }
.tags li::before { content: "<li>"; }
.tags li::after { content: "</li>"; }
.tags main::before { content: "<main>"; }
.tags main::after { content: "</main>"; }
.tags ol::before { content: "<ol>"; }
.tags ol::after { content: "</ol>"; }
.tags p::before { content: "<p>"; }
.tags p::after { content: "</p>"; }
.tags pre::before { content: "<pre>"; }
.tags pre::after { content: "</pre>"; }
.tags ul::before { content: "<ul>"; }
.tags ul::after { content: "</ul>"; }
.tags a::before { content: "<a>"; }
.tags a::after { content: "</a>"; }
.tags abbr::before { content: "<abbr>"; }
.tags abbr::after { content: "</abbr>"; }
.tags b::before { content: "<b>"; }
.tags b::after { content: "</b>"; }
.tags bdi::before { content: "<bdi>"; }
.tags bdi::after { content: "</bdi>"; }
.tags bdo::before { content: "<bdo>"; }
.tags bdo::after { content: "</bdo>"; }
.tags br::before { content: "<br>"; }
.tags br::after { content: "</br>"; }
.tags cite::before { content: "<cite>"; }
.tags cite::after { content: "</cite>"; }
.tags code::before { content: "<code>"; }
.tags code::after { content: "</code>"; }
.tags data::before { content: "<data>"; }
.tags data::after { content: "</data>"; }
.tags dfn::before { content: "<dfn>"; }
.tags dfn::after { content: "</dfn>"; }
.tags em::before { content: "<em>"; }
.tags em::after { content: "</em>"; }
.tags i::before { content: "<i>"; }
.tags i::after { content: "</i>"; }
.tags kbd::before { content: "<kbd>"; }
.tags kbd::after { content: "</kbd>"; }
.tags mark::before { content: "<mark>"; }
.tags mark::after { content: "</mark>"; }
.tags q::before { content: "<q>"; }
.tags q::after { content: "</q>"; }
.tags rb::before { content: "<rb>"; }
.tags rb::after { content: "</rb>"; }
.tags rp::before { content: "<rp>"; }
.tags rp::after { content: "</rp>"; }
.tags rt::before { content: "<rt>"; }
.tags rt::after { content: "</rt>"; }
.tags rtc::before { content: "<rtc>"; }
.tags rtc::after { content: "</rtc>"; }
.tags ruby::before { content: "<ruby>"; }
.tags ruby::after { content: "</ruby>"; }
.tags s::before { content: "<s>"; }
.tags s::after { content: "</s>"; }
.tags samp::before { content: "<samp>"; }
.tags samp::after { content: "</samp>"; }
.tags small::before { content: "<small>"; }
.tags small::after { content: "</small>"; }
.tags span::before { content: "<span>"; }
.tags span::after { content: "</span>"; }
.tags strong::before { content: "<strong>"; }
.tags strong::after { content: "</strong>"; }
.tags sub::before { content: "<sub>"; }
.tags sub::after { content: "</sub>"; }
.tags sup::before { content: "<sup>"; }
.tags sup::after { content: "</sup>"; }
.tags time::before { content: "<time>"; }
.tags time::after { content: "</time>"; }
.tags u::before { content: "<u>"; }
.tags u::after { content: "</u>"; }
.tags var::before { content: "<var>"; }
.tags var::after { content: "</var>"; }
.tags wbr::before { content: "<wbr>"; }
.tags wbr::after { content: "</wbr>"; }
.tags area::before { content: "<area>"; }
.tags area::after { content: "</area>"; }
.tags audio::before { content: "<audio>"; }
.tags audio::after { content: "</audio>"; }
.tags img::before { content: "<img>"; }
.tags img::after { content: "</img>"; }
.tags map::before { content: "<map>"; }
.tags map::after { content: "</map>"; }
.tags track::before { content: "<track>"; }
.tags track::after { content: "</track>"; }
.tags video::before { content: "<video>"; }
.tags video::after { content: "</video>"; }
.tags embed::before { content: "<embed>"; }
.tags embed::after { content: "</embed>"; }
.tags iframe::before { content: "<iframe>"; }
.tags iframe::after { content: "</iframe>"; }
.tags object::before { content: "<object>"; }
.tags object::after { content: "</object>"; }
.tags param::before { content: "<param>"; }
.tags param::after { content: "</param>"; }
.tags picture::before { content: "<picture>"; }
.tags picture::after { content: "</picture>"; }
.tags source::before { content: "<source>"; }
.tags source::after { content: "</source>"; }
.tags canvas::before { content: "<canvas>"; }
.tags canvas::after { content: "</canvas>"; }
.tags noscript::before { content: "<noscript>"; }
.tags noscript::after { content: "</noscript>"; }
.tags script::before { content: "<script>"; }
.tags script::after { content: "</script>"; }
.tags del::before { content: "<del>"; }
.tags del::after { content: "</del>"; }
.tags ins::before { content: "<ins>"; }
.tags ins::after { content: "</ins>"; }
.tags caption::before { content: "<caption>"; }
.tags caption::after { content: "</caption>"; }
.tags col::before { content: "<col>"; }
.tags col::after { content: "</col>"; }
.tags colgroup::before { content: "<colgroup>"; }
.tags colgroup::after { content: "</colgroup>"; }
.tags table::before { content: "<table>"; }
.tags table::after { content: "</table>"; }
.tags tbody::before { content: "<tbody>"; }
.tags tbody::after { content: "</tbody>"; }
.tags td::before { content: "<td>"; }
.tags td::after { content: "</td>"; }
.tags tfoot::before { content: "<tfoot>"; }
.tags tfoot::after { content: "</tfoot>"; }
.tags th::before { content: "<th>"; }
.tags th::after { content: "</th>"; }
.tags thead::before { content: "<thead>"; }
.tags thead::after { content: "</thead>"; }
.tags tr::before { content: "<tr>"; }
.tags tr::after { content: "</tr>"; }
.tags button::before { content: "<button>"; }
.tags button::after { content: "</button>"; }
.tags datalist::before { content: "<datalist>"; }
.tags datalist::after { content: "</datalist>"; }
.tags fieldset::before { content: "<fieldset>"; }
.tags fieldset::after { content: "</fieldset>"; }
.tags form::before { content: "<form>"; }
.tags form::after { content: "</form>"; }
.tags input::before { content: "<input>"; }
.tags input::after { content: "</input>"; }
.tags label::before { content: "<label>"; }
.tags label::after { content: "</label>"; }
.tags legend::before { content: "<legend>"; }
.tags legend::after { content: "</legend>"; }
.tags meter::before { content: "<meter>"; }
.tags meter::after { content: "</meter>"; }
.tags optgroup::before { content: "<optgroup>"; }
.tags optgroup::after { content: "</optgroup>"; }
.tags option::before { content: "<option>"; }
.tags option::after { content: "</option>"; }
.tags output::before { content: "<output>"; }
.tags output::after { content: "</output>"; }
.tags progress::before { content: "<progress>"; }
.tags progress::after { content: "</progress>"; }
.tags select::before { content: "<select>"; }
.tags select::after { content: "</select>"; }
.tags textarea::before { content: "<textarea>"; }
.tags textarea::after { content: "</textarea>"; }
.tags details::before { content: "<details>"; }
.tags details::after { content: "</details>"; }
.tags dialog::before { content: "<dialog>"; }
.tags dialog::after { content: "</dialog>"; }
.tags menu::before { content: "<menu>"; }
.tags menu::after { content: "</menu>"; }
.tags summary::before { content: "<summary>"; }
.tags summary::after { content: "</summary>"; }
.tags slot::before { content: "<slot>"; }
.tags slot::after { content: "</slot>"; }
.tags template::before { content: "<template>"; }
.tags template::after { content: "</template>"; }
.tags acronym::before { content: "<acronym>"; }
.tags acronym::after { content: "</acronym>"; }
.tags applet::before { content: "<applet>"; }
.tags applet::after { content: "</applet>"; }
.tags basefont::before { content: "<basefont>"; }
.tags basefont::after { content: "</basefont>"; }
.tags bgsound::before { content: "<bgsound>"; }
.tags bgsound::after { content: "</bgsound>"; }
.tags big::before { content: "<big>"; }
.tags big::after { content: "</big>"; }
.tags blink::before { content: "<blink>"; }
.tags blink::after { content: "</blink>"; }
.tags center::before { content: "<center>"; }
.tags center::after { content: "</center>"; }
.tags command::before { content: "<command>"; }
.tags command::after { content: "</command>"; }
.tags content::before { content: "<content>"; }
.tags content::after { content: "</content>"; }
.tags dir::before { content: "<dir>"; }
.tags dir::after { content: "</dir>"; }
.tags element::before { content: "<element>"; }
.tags element::after { content: "</element>"; }
.tags font::before { content: "<font>"; }
.tags font::after { content: "</font>"; }
.tags frame::before { content: "<frame>"; }
.tags frame::after { content: "</frame>"; }
.tags frameset::before { content: "<frameset>"; }
.tags frameset::after { content: "</frameset>"; }
.tags image::before { content: "<image>"; }
.tags image::after { content: "</image>"; }
.tags isindex::before { content: "<isindex>"; }
.tags isindex::after { content: "</isindex>"; }
.tags keygen::before { content: "<keygen>"; }
.tags keygen::after { content: "</keygen>"; }
.tags listing::before { content: "<listing>"; }
.tags listing::after { content: "</listing>"; }
.tags marquee::before { content: "<marquee>"; }
.tags marquee::after { content: "</marquee>"; }
.tags menuitem::before { content: "<menuitem>"; }
.tags menuitem::after { content: "</menuitem>"; }
.tags multicol::before { content: "<multicol>"; }
.tags multicol::after { content: "</multicol>"; }
.tags nextid::before { content: "<nextid>"; }
.tags nextid::after { content: "</nextid>"; }
.tags nobr::before { content: "<nobr>"; }
.tags nobr::after { content: "</nobr>"; }
.tags noembed::before { content: "<noembed>"; }
.tags noembed::after { content: "</noembed>"; }
.tags noframes::before { content: "<noframes>"; }
.tags noframes::after { content: "</noframes>"; }
.tags plaintext::before { content: "<plaintext>"; }
.tags plaintext::after { content: "</plaintext>"; }
.tags shadow::before { content: "<shadow>"; }
.tags shadow::after { content: "</shadow>"; }
.tags spacer::before { content: "<spacer>"; }
.tags spacer::after { content: "</spacer>"; }
.tags strike::before { content: "<strike>"; }
.tags strike::after { content: "</strike>"; }
.tags tt::before { content: "<tt>"; }
.tags tt::after { content: "</tt>"; }
.tags xmp::before { content: "<xmp>"; }
.tags xmp::after { content: "</xmp>"; }<p><button id="btn_tags">Tags</button></p>
<p>This following is set <code>contenteditable="true"</code>, you can try rich-text editing with visible tags!</p>
<div contenteditable="true">
<h2>Abstract</h2>
<a name="z14" href="https://www.w3.org/MarkUp/1995-archive/html-spec.html">HyperText Markup Language</a> (HTML)
can be used to represent
<ul>
<li>Hypertext news, mail, online documentation,
and collaborative hypermedia;</li>
<li>Menus of options;</li>
<li>Database query results;</li>
<li>Simple structured documents with
inlined graphics.</li>
<li>Hypertext views of existing bodies
of information</li>
</ul>The World Wide Web (W3) initiative
links related information throughout
the globe. HTML provides one simple
format for providing linked information,
and all W3 compatible programs are
required to be capable of handling
HTML. W3 uses an Internet protocol
(Hypertext Transfer Protocol, HTTP),
which allows transfer representations
to be negotiated between client and
server, the result being returned
in an extended MIME message. HTML
is therefore just one, but an important
one, of the representations used
with W3.<p>
HTML is proposed as a MIME content
type.</p><p>
HTML refers to the <a name="z21" href="References.html#z7">URI</a> specification
RFCxxxx.</p><p>
Implementations of HTML parsers and
generators can be found in the various<a name="z22" href="References.html#z10">
W3</a> servers and browsers, in the public
domain W3 code, and may also be built
using various public domain SGML
parsers such as [SGMLS] . HTML documents
are SGML documents with fairly generic
semantics appropriate for representing
information from a wide range of
applications.</p>
<h3>Status of this memo</h3>This document is an Internet Draft.
Internet Drafts are working documents
of the Internet Engineering Task
Force (IETF), its Areas, and its
Working Groups. Note that other
groups may also distribute working
documents as Internet Drafts. <p>
Internet Drafts are working documents
valid for a maximum of six months.
Internet Drafts may be updated, replaced,
or obsoleted by other documents at
any time. It is not appropriate
to use Internet Drafts as reference
material or to cite them other than
as a "working draft" or "work in
progress".</p> <p>
Distribution of this document is
unlimited.</p>
</div>