站内搜索:
首页 >> 前端 >> 内容
CSS——很多让p标签变红的方法

时间:2017/9/15 10:18:00

第一种情况——只有一个p标签:

<body>
    <p id="wechat1" class="weixin1">
        <p id="wechat2" class="weixin2">
            <p id="wechat3" class="weixin3">
                <p>Please make me red</p>
            </p>
        </p>
    </p>
</body>

CSS编辑器如下:

1.

<style type="text/css">
    p{
    color:red;
    }
</style>

2.

<style type="text/css">
    p p{
        color:red;
    }
</style>

3.

<style type="text/css">
    p p p{
        color:red;
    }
</style>

4.

<style type="text/css">
    p p p p{
            color:red;
    }
</style>

5.

<style type="text/css">
    #wechat1 p p{
            color:red;
    }
</style>

6.

<style type="text/css">
    #wechat1 p p p{
            color:red;
    }
</style>

7.

<style type="text/css">
    #wechat1 .wechat2 p p{
            color:red;
    }
</style>

8.

<style type="text/css">
    #wechat1 .weixin2 #wechat3 p{
            color:red;
    }
</style>

9.

<style type="text/css">
    #wechat1 #wechat3 p{
            color:red;
    }
</style>

10.

<style type="text/css">
    p.weixin1 #wechat2 p p{
            color:red;
    }
</style>

第二种情况——有多个p标签,有的红有的不红:

<body>
    <p class="tebiede">
        <p class="special">我想红</p>
        <p class="special">我想红</p>
        <p>I want red</p>
    </p>

    <p class="tebiedi">
        <p class="special">我才不想红</p>
        <p>I want red</p>
    </p>
</body>

CSS编辑器如下:

1.

<style type="text/css">
    .special{
        color:red;
    }
</style>

2.

<style type="text/css">
    .tebiede .special{
        color:red;
    }
</style>

如果让指定句段变红:

<body>
    <p class="tebiede">
        <h3 class="special">我想红</h3>
        <p class="special">我想红</p>
        <p>I want red</p>
    </p>

    <p class="tebiedi">
        <p class="special">我才不想红</p>
        <p>I want red</p>
    </p>
</body>

则CSS编辑器如下:

1.

<style type="text/css">
    .tebiede .special{
        color:red;
    }
</style>

2.

<style type="text/css">
    .tebiede p.special{
        color:red;
    }
</style>

3.如果只想让I want red那句变红,则可以(层叠式):

<style type="text/css">
    .tebiede p{
        color:red;
    }
    .tebiede .special{
        color:black;
    }
</style>

 

  • 上一篇:css3伪类伪元素
  • 下一篇:如何在Angular4中引入jquery
  • 返回顶部