更改运行时内置的特定 div 的字体大小

考虑一下：

<div>
<div class="h">header</div>
<div class="m">menu</div>
<div class="m">menu</div>
</div>

h和m类是由不允许修改的工具构建的。我想更改这个地方的"h"字体大小。使用"h"类的所有其他地方必须保持相同的字体大小。

我正在考虑像这样添加自己的类：

<div class='myheader'>
<div class="h">header</div>
<div class="m">menu</div>
<div class="m">menu</div>
</div>

并在我的.css文件中定义它，如下所示：

.myheader > * {
}
.myheader.h {
font-size:20px;
}

不幸的是，它不起作用，因为它没有"看到".myheader.h。它只应用从.h和.myheader读取的样式，但不能同时应用两者。

还有其他方法可以更改标题字体大小吗？在你说"修改<div class='h'>header</div>"之前，我需要重申 - 这些喜欢是由工具创建的 - 在运行时 - 所以我无法修改它们。

附言。我正在使用angularJS，但我不允许使用jQuery调用。

提前谢谢你！ -格雷格

有关示例，请参阅 http://plnkr.co/edit/R0elLsOdcOfsLpHB1NT1。我能够更改字体大小，这很酷，但是当我添加颜色更改时，它会向下扩散，我不想要它。我想在这个例子中更改级别 3，仅此而已。

看这个.myheader.h是不正确的，你需要的是.myheader .h

.myheader .h {
font-size: 20px;
color: red;
}

<div class='myheader'>
<div class="h">header</div>
<div class="m">menu</div>
<div class="m">menu</div>
</div>

接下来 css 子元素将继承其父元素的某些属性

div.level4在level3内部，因此它将从其父级(.level3)继承，除非您覆盖此行为。

您将文本内容Level 3.level4，然后是具有类level4的单个div。您可以简单地覆盖继承的规则，但使用color:initial使子元素保留其"默认值"

.level3 > * {
color:initial;
}

下面的代码片段

/* Put your css in here */
.level1 {
font-size: 10px;
}
.level2 {
font-size: 20px;
}
.level3 {
font-size: 30px;
}
.level4 {
font-size: 40px;
}
.changer .level3 {
font-size: 100px;
color: red;
}
.level3 {
border: solid green;
}
.level3>* {
color: initial;
}

<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.5.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-semver="1.5.11"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div class='level1, changer'>
Level 1
<div class='level2'>
Level 2
<div class='level3'>
Level 3
<div class='level4'>
Level 4
</div>
</div>
</div>
</div>
</body>
</html>

相关内容

最新更新

热门标签：