前端---基础篇

一、样式优先级（内部样式=外部样式<行内样式）

二、基本选择器

1、元素选择器   E(element){}       

特例： *{}--代表选择所有元素

*{
    background:pink;
}

div {
    background:green;
}

2、属性选择器    E[attr]{}    attr所有的属性都可以

注意：index=xx;  其中命名规则，xx要以字母或_开头，不可以纯数字

div[index]{            //有index属性的div
    background : red;
}

div[index=xx]{
    background: red;    //有index属性的div,并且index属性等于xx
}

div[index*=xx]{
                        //有index属性的div,并且index属性包含xx
    background : red;
}

div[index^=xx]{         //有index属性的div,并且index属性以x开头的
    background: red;
}
div[index$=xx]{        //有index属性的div,并且index属性以xx结尾的
    background: red;
}

3、id选择器 直接用'#'表示id选择器的前缀只能是id = aa的情况

特例:结合选择器 div#aa（表示id是aa的div）

      class选择器用'.'代表class选择器的前缀只能是class = aa的情况

特例:结合选择器div.aa（表示class是aa的div）

注意：div#aa/div.aa    中间不能加空格

<div id="aa">你好</div>

<div class="aa">你好</div>

div#aa {

    background-color: blue;

}

div.aa{

    background: red;

}

4、包含选择器 selector selector .....{}（弱包含关系，不一定是父子，祖孙也可以）
     子选择器   selector>selector .....{}（强包含关系必须是父子）

<div>

        <p>div里的p标签</p>

        <span><p>span下的p标签</p></span>

   </div>

div p {

    background-color: blue;

}

div>p{

    background: red;

}

5、兄弟选择器selector1~selector2（匹配selector1对应元素后边能匹配selector2的兄弟节点）

找所有弟弟:selecto2为*;   找哥哥，反向思维

快捷语句：ul>li*{asdf$}

------------------------------------------------------html

<ul>

    <li class="qq">asdf1</li>

    <li class="qq">asdf2</li>

    <li class="php">asdf3</li>

    <li class="qq">asdf4</li>

    <li class="qq">asdf5</li>

   </ul>

---------------------------------------------------css

.php~.qq{

    background-color: blue;

}

 -------------------------------------css//找哥哥，反向思维

.php~.qq{

    background: none;

}

.qq{

    background: red;

}

 6、选择器组合selecto1,selecto2,selecto3{}

-----------------------------html

<div>asd</div>

   <p>sdf</p>

   <span>wertyu</span>

    <h1>dgf</h1>

--------------------------------------------css

div,span,p {

    background: pink;

}