前端-css选择器

基本选择器

1.标签选择器（权重为1）

2.类选择器（class  .  权重为10）

3.id选择器（id  #  权重为100）

4.通配符选择器（*  权重为0.1）

其他选择器

1.后代选择器

    <style>
            div span{
                color: red;
            }
        </style>
        <div>
            <p>
                <span>hello world1</span>
            </p>
            <span>hello world2</span>
        </div>

2.子代选择器

<style>
            div>span{
                color: red;
            }
        </style>
        <div>
            <p>
                <span>hello world1</span>
            </p>
            <span>hello world2</span>
        </div>

3.并集选择器（给不同的元素设置相同的样式）

<style>
            div,p{
                color: red;
            }
        </style>
        <div>hello world1</div>
        <p>hello world2</p>

4.交集选择器

<style>
            span.text{
                color: red;
            }
        </style>
　　               <span class="text">hello world1</span>
　　　           <span>hello world2</span>

5.伪类选择器

<style>
    a:hover{
        color: red;
    }
    input:focus{
        background-color: orange;
    }
</style>
<a href="www.baidu.com">百度一下</a>
<input type="text" />

6.类型/属性选择器

<style>
         input[type=text]{
             border: 10px solid red;
         }
     </style>
     <input type="text" />