CSS选择器

css选择器作用

可以同时给多个标签加相同的样式

标签选择器

格式：标签名{
属性名：属性值；
}
比如 所有标签都可以用标签选择器

    h3{
        background: red;
        text-align: center;
    }
    span{
        background: black;
        text-align:left;
    }
</style>
小编就不每个都举例子啦，总之所有标签都可以哦~

类选择器

    div{
        background: yellow;
    }
    .box{
        background: red;
    }
</style>
<div class="box">div1</div>
<div>div2</div>  
<!--div2也可以用class  可以重复的-->

class命名规范

• 不能以数字作为开头
• 不要用中文
• 用单词命名
• 尽量不要用缩写，除非一看就明白的单词
• 可以用多个单词命名 比如 student_info student-info studentInfo
• 不要用a1 a2 a3
• 最好用小写

id选择器

一个id名在同一个文件只能出现一次，唯一性，一般用在js中

格式：

<style>
    #div3 {
        color: red;
        background: blue;
    }
</style>
<div id="div3">div3</div>

通配符选择器：

他可以选择全部的标签

<style>
    *{
        padding: 0;
        /*内边距*/
        margin: 0;
        /*外边距*/
     }
</style>

小编给大家总结下，其实我们可以把标签选择器当作是姓名中的姓氏，而类选择器就是姓名中的名，id选择器呢就是我们的身份证，只可以有一次，不可以重复哦！

下面来认识下CSS其他选择器

后代选择器 最常用

可以选择隔代 每个选择器之前用空格隔开
里面可以加类选择器给标签加样式

<style>
    ul li{
        color: pink;
    }
    ul .text{
        color:red;
    }
</style>

子代选择器

只能选择下一级，不能选择隔代的 有限制
每个选择器之前用>隔开 也可以用空格 也可以用类标签

<style>
    div>p>span{
        background: blue;
    }
</style>

交集选择器

选择的同一个元素 增加权重 标签名写在最前面 每个小选择器之间不要加空格

<style>
   li{
       /*1*/
        color:blue;
    }
    .list1{
        /*10*/
        color:red;
    }
    li.list1{
        /*1+10=11*/
        color:yellow;
    }
</style>
<ul>
    <li class="list1">选项一</li>
    <li>选项二</li>
    <li>选项三</li>
</ul>

并集选择器

可以同时选择多个元素，设置相同样式
逗号两边的选择器没有任何关系

<style>

    第一种方法
    div{
        color: red;
        background: lavenderblush;
    }
    span{
        color: red;
        background: lavenderblush;
    }

    第二种方法

    div,span{
        color: red;
        background: lavenderblush;
    }
</style>
<div>div</div>
<span>span</span>

类选择器

一般用在表单里面 比如文本框密码框按钮 给这些标签加样式

<style>
    input[type=test]{
        width: 300px;
        height: 200px;
        border-color: blue;
    }
    input[type=password]{
        width: 300px;
        height: 200px;
        border-color: blue;

    }
</style>
<input type="text"/>
<input type="password"/>

伪类选择器

:hover 鼠标经过时的样式

<style>
    a:hover{
        /*鼠标经过a标签的样式*/
        color: red;
        text-decoration: none;
        /*去掉下划线*/
    }
</style>
<a href="##">我是一个a链接</a>