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

时间:2015-10-19 11:20:24

标签: html css

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

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%;
 }

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

感谢。

5 个答案:

答案 0 :(得分:6)

在你的css中使用:

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

答案 1 :(得分:1)

尝试这种方式

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

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

答案 2 :(得分:1)

<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>

现在这将很简单

答案 3 :(得分:1)

以下是一些链接,可以帮助您在各种情况下应用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元素

之外,您无需执行任何操作
  1. 拥有class属性
  2. class属性的值以模式“test”开头。

答案 4 :(得分:0)

在所有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%;
}