Question

我试图在指定的类中应用样式，即使它包含一些数字或字符串值属性，但样式不适用，我不知道我在哪里犯了错误，下面我有放置我的代码供您参考。

HTML

 <p class="test">Some text contains....</p>
 <p class="test2">Some text contains....</p>
 <p class="test4">Some text contains....</p>
 <p class="testa">Some text contains....</p>
 <p class="test1">Some text contains....</p>

的CSS：

 p.test*
 {
 color: blue;
 font-size:150%;
 }

请告诉我如何解决这个问题？

感谢。

Answer 1

在你的css中使用：

p[class^="test"]{
 color: blue;
 font-size:150%;
}

Answer 2

尝试这种方式

p[class^="test"]{
 color: blue;
 font-size:150%;
}

演示链接https://jsfiddle.net/cne9gebf/

Answer 3

<p>red font color 1</p>
<p>red font color 2</p>
<p>red font color 3</p>
<p>red font color 4</p>
<p>red font color 5</p>
<p>red font color 6</p>

<style>
p{
color:red;
 } 
</style>

现在这将很简单

Answer 4

以下是一些链接，可以帮助您在各种情况下应用css-attribute-selectors （包括您在问题中提到的方案）

http://www.sitepoint.com/web-foundations/attribute-selector-css-selector/

http://www.sitepoint.com/web-foundations/css3-attribute-selectors/

归结为你的情况，它应该如下所示：

p[class^="test"]{
 color: blue;
 font-size:150%;
}

除了将样式应用于满足以下规则的所有p元素

之外，您无需执行任何操作

拥有class属性
class属性的值以模式“test”开头。

Answer 5

在所有p元素中使用相同的类

HTML

<p class="test">Some text contains....</p>
<p class="test">Some text contains....</p>
<p class="test">Some text contains....</p>
<p class="test">Some text contains....</p>
<p class="test">Some text contains....</p>

CSS

.test {
    color: blue;
    font-size:150%;
}

如何在所有课堂上应用这种风格？

5 个答案: