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

标签 javascript html css angularjs

考虑一下:

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

hm类是由我不允许修改的工具构建的。 我想在此且仅此位置更改“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) 继承,除非您覆盖此行为。

您在 .level4 中有文本内容 Level 3 ,然后是类 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>

关于javascript - 更改运行时内置的特定 div 的字体大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43129081/

相关文章:

javascript - 如何在 avada 主题中使用响应式 html?

javascript - 在 Blogger 中将博客文章标题或标签存储为字符串

css - HTML 和 CSS 没有正确定位 div

jquery - 尝试使用 jQuery fadeIn/fadeOut 实现不透明动画

javascript - D3 : get the bounding box of a selected element

javascript - 如何显示 JSON 字符串中的特定数据?

javascript - select onchange 获取选项名称属性值

javascript - 在按键上使 javaScript(不是 JQuery!) "activate"成为 CSS 按钮 :active style

html - CSS 计数器重置在 div-s 中不起作用

javascript - Internet Explorer 的 pushState 回退?