Question

？是否可以为影响以相同前缀开头的所有html元素的样式定义名称请不要偏离课程或标签...... 请不要使用SASS，LESS或类似的处理器请注意，问题在于定义样式，而不是使用选择器

进行过滤像这样的东西（星号*东西可以用作通配符） - ＆gt;

in CSS <style> section
#prfxStyle1* { background-color: #ABCDEF; }

in <HTML> section
<div id="prfxStyle1Metals"> ... </div>
<div id="prfxStyle1Plastics"> ... </div>
<div id="prfxStyle1Organics"> ... </div>

Answer 1

＆＃34;以＆＃34;开头选择器仅适用于属性选择器。

因此，在这种情况下，要查找以 prfxStyle1 开头的ID，请执行以下操作：

[id^="prfxStyle1"] {
    /* styles */
}

通过属性选择器，您可以定位到任何内联元素定义的属性（包括自定义属性）：

<div attribute="value">

可能的属性选择器:(来自MDN docs）

<强> [ATTR]
  表示属性名称为attr的元素。

  的 [ATTR =值]
  表示属性名称为attr的元素，其值正好为＆＃34; value＆＃34;。

  的 [ATTR〜=值]
  表示属性名称为attr的元素，其值是以空格分隔的单词列表，其中一个正好是＆＃34;值＆＃34;。

  的 [ATTR | =值]
  表示属性名称为attr的元素。它的值可以是“值”，也可以以“值”开头，后跟“ - ”（U + 002D）。它可用于语言子码匹配。

  的 [ATTR ^ =值]
  表示属性名称为attr的元素，其值的前缀为＆＃34; value＆＃34;。

  的 [ATTR $ =值]
  表示属性名称为attr的元素，其值后缀为＆＃34; value＆＃34;。

  的 [ATTR * =值]
  表示属性名称为attr的元素，其值至少包含一次字符串＆＃34; value＆＃34; as substring。

Answer 2

你可以添加更多的类或id（即使它不是很常用的方式），只需用空格分隔它们：

<div id="prfxStyle1 Metals"> ... </div>
<div id="prfxStyle1 Plastics"> ... </div>
<div id="prfxStyle1 Organics"> ... </div>

在CSS中：

#prfxStyle1 {
    //some CSS that will affect all divs
}

#Metals {
    //CSS that will affect just the div with the Metal id
}

#Plastics {
    //CSS that will affect just the div with the Plastics id
}

#Organics {
    //CSS that will affect just the div with the Organics id
}

CSS前缀范围影响所有相同的起始名称样式

2 个答案: