常见的css选择器

常见的css选择器

标签选择器

h1{
   color:red
}

类选择器

<div class='chen'></div>
.chen{
    color:red
}

多类名选择器 （类名之间空格隔开）

<div class='box chen'></div>
.box{
    width:300px
    height:150px
    font-size:30px
}
.chen{
    color:red
}

id选择器

<div id='chen'></div>
#chen{
      color:red
}

通配选择器

*{ } 会选中所有的标签

复合选择器

即同时使用 以上的几种选择器

后代选择器

选中指定标签内的指定标签

<div>
    <ol>
        <li>11111</li>
        <li>11111</li>
    </ol>
    <ul>
        <li>11111</li>
        <li>11111</li>
    </ul>
</div>
<style>
ol li {
      color:red
}
</style>

子元素选择器

格式：选择器 > 选择器
tips：只选择儿子元素

<div class='chen'>
    <p>儿子</p>
    <div>
        <p>孙子</p>
    </div>
</div>
.chen > p{
    color:red
}

并级选择器

tip：就是同时选择多个选择器

<div class='chen'>
    <p>儿子1</p>
</div>
<div class='yun'>
    <p>儿子1</p>
</div>
/***同时选择到儿子1和儿子2 **/
.chen > p , .yun > p{
    color:red
}

**

伪类选择器

**

链接伪类选择器

坑点 ：同时使用的换按顺序写 （link ，visited ，hover ，active ）否则有可能出问题
a 标签是有默认样式的 如果需要改的需要单独选中，即选到a标签本身

a:link                   /**选择所有未被访问的链接**/
a:visited                /**选择所有已经被访问的链接**/
a:hover                  /**选择鼠标位置的连接的链接**/
a:active                 /**选择鼠标按下未弹起的链接**/

focus伪类选择器

用于选中获得焦点的表单类元素

input:focus{
    background-coloer:red
}