Joomla文档中文翻译 - 如何为页面和模块添加独立的自定义Class
如需转载，请注明官方英文文档及本人译文的出处，谢谢。查看官方英文文档: Use a leading space in Page and Module Class Suffix parameters
在Joomla的菜单项和模块设置中，页面Class后缀(Page Class Suffix)和模块Class后缀(Module Class Suffix)这两个参数允许你为Joomla生成的HTML页面增加自定义的class，使我们可以通过CSS为一些页面或模块设定独特的样式。
在添加自定义class时，我们可以在class名称前增加一个空格，例如“ myNewClass”(即“空格+myNewClass”)，这样该class名称就是一个我们希望得到的独立的class。例如，原本的HTML
<div class="componentheading">
将变为：
<div class="componentheading myNewClass">
注意，如果在新class名称前没有加空格，那么HTML会变为：
<div class="componentheadingmyNewClass">
通过增加空格的方式为元素添加class后缀之后，我们的目标元素div就有两个class名称了。现在元素的样式没有任何变化，因为“componentheading”这个class依然在起作用。想要改变元素的样式，我们必须为新的class增加一些CSS代码。
例如，我们希望class中包含“myNewClass”的元素有一种特殊的背景色，那么可以在CSS文件中增加如下代码：
.componentheading.myNewClass { background-color: #FFE4E1; /* mistyrose */}
因为我们在CSS选择器中采用了连缀的方式，所以只有某元素同时拥有“componentheading”和“myNewClass”这两个class时，该样式才会被使用。
需要注意的是，在通过设定Class后缀参数的方式来增加HTML元素的class名称时，要确保新的class不会与原有的重名。
译者：viiiix.com
| < Prev | Next > |
|---|
RSS Feed
