html"><!-- 页面布局xxx.hml -->
<div id="containerId" class="container">
    <text id="titleId" class="title">标题</text>
    <div class="content">
        <text id="contentId">内容</text>
    </div>
</div>

/* 页面样式xxx.css */
/* 对所有div组件设置样式 */
div {
    flex-direction: column;
}
/* 对class="title"的组件设置样式 */
.title {
    font-size: 100px;
}
/* 对id="contentId"的组件设置样式 */
#contentId {
    font-size: 60px;
}
/* 对所有class="title"以及class="content"的组件都设置padding为5px */
.title, .content {
    padding: 10px;
}
/* 对class="container"的组件下的所有text设置样式 */
.container text {
    color: #007dff;
},
 /* 对class="container"的组件下的直接后代text设置样式 */
 .container > text {
    color: #fa2a2d;
}

这里的逗号，原文档是分号

.container text {
    color: #007dff;
},

CSS、HTML、JS并不是一定得三者必有

JS主管互动

CSS主管样式

HTML主管内容