时间戳

首页 > 解决方案 > 文本颜色取决于文本对齐方式

html - 文本颜色取决于文本对齐方式

问题描述

使用样式表和属性选择器，定义允许放置在页面上并保存在段落中的文本根据页面上这些文本的对齐方式以不同颜色显示的样式（例如，对于左对齐的文本，它将为蓝色，对于与右对齐的文本 - 绿色）但是，对于放置在 h2 标签中的文本，颜色将根据所使用的字体大小而有所不同（例如，字体大小为 16px - 黄色等）我完全不不知道怎么做，有人能帮我吗？

<div>
<p>Text formatting</p>
<p>Text formatting</p>
<p>Text formatting</p>
<h2> Text formatting </h2>
<h2> Text formatting </h2>
</div>

`

标签： htmlcss

解决方案

我希望我的回答不会因为无效的 HTML 而被否决。

所以我的第一个想法——在阅读了“使用样式表和属性选择器”之后——是不可能的，除非你的老师想在标签上使用过时 align的属性。p不过我不会感到惊讶，所以如果是这种情况，您可以使用p[align="left"]andp[align="right"]作为属性选择器。

但后来我看到他们也想h2根据他们的标签来设置样式font-size，而仅使用 CSS 是不可能的。除非他们想使用另一个属性，size.

size是一个完全有效的属性，至少对于inputandselect标记是这样。你不能用在其他任何东西上。他们想用这个吗？或者他们只是想添加一个不存在的font-size属性？我的意思是，这是一个学校练习，我们都看到了奇怪的事情......

无论如何，虽然它不是有效的 HTML，但这些示例仍然有效。我不确定这是否是正确的答案。如果你能告诉我们你的导师的解决方案，我将非常感激，一旦他们告诉你。:) 

p[align="left"] {
  color: blue;
}

p[align="right"] {
  color: green;
}

h2[size="16px"] {
  background-color: #363636;
  color: yellow;
}

h2[font-size="16px"] {
  background-color: #363636;
  color: yellow;
}
<div>
  <p>Text formatting</p>
  <p align="left">Text formatting</p>
  <p align="right">Text formatting</p>
  <h2>Text formatting</h2>
  <h2 size="16px">Text formatting</h2>
  <h2 font-size="16px">Text formatting</h2>
</div>

推荐阅读