欢迎来到电脑知识网
希望你能够在这里获取到你想要了解的知识

css后代选择器,交集选择器,并集选择器

2020-07-27 12:02:50


第一个示例是后代选择器:

元素代码:
<ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
</ul>
css代码:
ul li{
            color:Red;
} 
这样就可以使ul下面所有的li文字变为红色

第二个示例是交集选择器:

元素代码:
 <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul> 
    <div class="box">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul> 
    </div>
css代码:
 div.box ul li{
            color:red;
        }
这样就可以使所有div 类名为box的下面li变成红色,没有在div盒子中的li没有被选中

第三个示例是并集选择器:

元素代码:
<span>1</span>
    <a href="#">2</a>
    <strong>3</strong>
    
css代码:
span,a,strong{
            color:red;
        }
这样就可以选中 span a strong 这里演示时使用的全部都是标签名称,你可以使用其他的选择,比如说 类名 id名