问题描述
我的网页设计为我设置了CMS,但是我遇到了一些问题。
当前,各节都使用相同的css标记.SectionOuteralt或.SectionOuter(如果有多个,则变为'Alt'。.SectionInner也是如此。
我搜索了“ SectionOuter”并发现了这一行代码。在我看来,它像在它上面添加了“ Alt”。
问题是我需要每个部分都是唯一的,因此我可以添加CSS。如果我可以保留“ SectionOuter”或“ SectionOuteralt”,但为每个类都包含一个唯一的css类,这样我可以对每个单独的部分进行独特的更改,那将是很好的。
console.log(...splitNParts(23,2));
有人可以帮忙吗?
谢谢
解决方法
如果每个类都需要唯一的值,则可以执行以下操作:
<?php
for ($k = 1; $k <= 2; $k++)
echo '<section class="SectionOuter SectionOuterAlt SectionOuterAlt-' . $k . '">';
for ($k = 1; $k <= 2; $k++)
echo '<section class="SectionInner SectionInnerAlt SectionInnerAlt-' . $k . '">';
输出将是这样的:
<section class="SectionOuter SectionOuterAlt SectionOuterAlt-1">
<section class="SectionOuter SectionOuterAlt SectionOuterAlt-2">
<section class="SectionInner SectionInnerAlt SectionInnerAlt-1">
<section class="SectionInner SectionInnerAlt SectionInnerAlt-2">
,
另一个答案不起作用的原因是,因为它正在应用可能不合适的类,因此可能需要替换其他类。
您需要做的是保持现有类不变,并添加一个 new 类,您可以将其用于独特的样式。
在页面顶部,您可以添加全局变量,例如
<?php $SectionCount = 0; ?>
然后,在要添加唯一类的位置,可以执行以下操作:
<section class="SectionOuter<?php echo $alt; ?> UniqueClass-<?php echo $SectionCount++; ?>" >
<section class="SectionInner<?php echo $alt; ?> UniqueClass-<?php echo $SectionCount++; ?>" >
这将自动为每个节添加一个新的唯一类,称为UniqueClass-n
(其中n
在页面中是唯一的),而不会影响现有功能或样式。也不仅仅限于每页2个数字或部分。
使其具有全球性
您可以通过多种方式将此设置为全局设置,具体取决于页面的设置方式。
- 在标头代码中添加全局变量
- 在页面
body
上使用唯一的类来定位每个页面(例如.homepage .UniqueClass-1 {} .contactpage .UniqueClass-1 {}
等)
但是,如果没有更多有关如何设置当前站点的信息(例如CMS或可能存在哪些模板文件以将代码添加到其中),我们将无法确切告诉您如何实现此目标。
更新:
在所有页面的每个部分中添加唯一的编号实际上是不可行的,这是可行的,但是与手动添加它们相比,要花更多(或更多)的精力(要使其持久且一致,必须分配给每个部分)。
您可以:
- 将页面正文和节类的唯一类/ id结合使用(如上所述)或
- 根据页面的某些唯一标识符为每个部分生成一个新类
无论哪种情况,您都需要在每个页面上使用唯一的标识符。这将取决于页面的设置方式,但是如果您使用的是CMS,则每个<body>
元素都可能会添加一个唯一的类。
1。类的组合
例如,您的主页可能有类似<body class="homepage page-452">
的内容,而“关于”页面可能是:<body class="page-about page-818">
等。
在这种情况下,您可以结合使用这些类(例如,
// target ONLY UniqueClass-1 on the page with the specified body class
.page-452 .UniqueClass-1 { /* CSS HERE FOR HOMEPAGE ONLY */ }
.page-818 .UniqueClass-1 { /* CSS HERE FOR ABOUT PAGE ONLY */ }
在不了解您的CMS或生成的HTML的情况下,很难给出确切的答案,但这是您可以做到的方式。
(在我开始回答此问题后发表的评论中,您的CMS没有唯一的主体类,因此您需要使用下一个选项:)
2。生成唯一类
或者,要为每个页面生成一个唯一的类,可以使用slug(如果CMS生成了一个),或者如果页面标题始终是唯一的,则可以通过添加将其转换为适合于类名的字符串这在您声明$ SectionCount的页面顶部,例如:
在页面顶部:
<?php
$SectionCount = 0;
$pageClass = preg_replace( '/[^A-Za-z0-9_-]/','',$pageTitle);
?>
然后,您可以按照以下步骤创建唯一的类:
<section class="SectionOuter<?php echo $alt; ?> ClassPrefix-<?php echo $pageClass."-".($SectionCount++); ?>" >
<section class="SectionInner<?php echo $alt; ?> ClassPrefix-<?php echo $pageClass."-".($SectionCount++); ?>" >
现在,您可以按如下所示分别定位每个页面的每个部分:
.ClassPrefix-generated-page-class-1 { /* CSS HERE */ }
.ClassPrefix-generated-page-class-2 { /* CSS HERE */ }
/* etc */