前端-CSS-3-高级选择器

高级选择器

总结：

 <!--
        总结：
            基础选择器：
                1.标签选择器    div
                2.类选择器     .div1
                3.id选择器     #box
                4.通配符选择器  *
            高级选择器：
                1.群组选择器  中间用,
                    .title,.content,.footer{}
                2.交集选择器  选择器之间不能有空格，第一个标签必须是标签选择器，第二个标签可以是id或者类选择器
                    p.p1{}   p#title1{}
                3.后代选择器  选择器之间用 空格
                    ul a{}
                4.子代选择器  选择器之间用 >
                    ul>li{}
                5.毗邻选择器  选择器之间用 +  紧跟着h3标题的标签
                    h3+p{}
                6.兄弟选择器  选择器之间用~
                    h3~p{}
                7.属性选择器
                     [class='baidu']{}
                     [class^='btn']{}
                     [class$='ault']{}
            css样式优先级：
                行内样式 > 内部样式表 > 外部样式表
                ID选择器 > 类选择器 > 标签选择器
    -->

 并集选择器：

/*并集选择器 （组合）  设置多个标签中的统一样式*/
        a,h4{
            color: #666;
            font-size: 20px;
            text-decoration: none;
        }
        
        /* *   通配符选择器   */
        /* 性能有点差*/
        html,body,div,p,span,a{

            color: red;
        
        }

交集选择器：

/*交集选择器*/

        h3{
            300px;
            color: red;
        }

        .active{
            font-size: 30px;
        }

        h3.active{
            background-color: yellow;
        }

后代选择器

    
        /*后代选择器 在css中使用非常频繁*/
        /*div  p{
            color: red;
        }

        div div p{
            color: yellow;
        }

        .container div p{
            color: green;
        }*/

子代选择器：

/*子代选择器*/

        .container>p{
            color: yellowgreen;
        }

属性选择器:

除了HTML元素的id属性和class属性外，还可以根据HTML元素的特定属性选择元素。

 <div class="box">
        <form>
            <label for="user">用户名</label>
            <input type="text" name="" id="user">
            <label for="pwd">密码：</label>
            <input type="password" id="pwd">
        </form>

    </div>
---------------------------------------------------
根据属性查找

[title] {
  color: red;
}
---------------------------------------------------
根据属性和值查找
找到所有title属性等于hello的元素：
[title="hello"] {
  color: red;
}
-----------------------------------------------------
找到所有title属性以hello开头的元素：

[title^="hello"] {
  color: red;
}

------------------------------------------------------
找到所有title属性以hello结尾的元素：
[title$="hello"] {
  color: red;
}
------------------------------------------------------
找到所有title属性中包含（字符串包含）hello的元素：

[title*="hello"] {
  color: red;
}
----------------------------------------------------
找到所有title属性(有多个值或值以空格分割)中有一个值为hello的元素：
[title~="hello"] {
  color: red;
}
---------------------------------------------------
表单常用
input[type="text"] {
  backgroundcolor: red;
}