美文网首页
css基础选择器

css基础选择器

作者: 胡自鲜 | 来源:发表于2017-08-18 19:50 被阅读0次

    1.基础选择器-通配选择器:作用于所有标签,无论你这个标签有没有写,有没有在文档中出现

    *{

    }

    2.基础选择器-标签名选择器:作用于一类标签,方式是通过标签名称,使用场景:重置某类标签的样式

    body{

          margin: 0;

          background-color: red;

          font-size:14px;

          color:#ccc;

          font-family: "微软雅黑"

    }

    h1{

          margin:0;

          padding:0;

    }

    div{

          width: 100px;

           height: 100px;

           background: red;

    }

    3.基础选择器-群组选择器:选择器1,选择器2,...{}  ,使用场景:用于优化代码,减少文档体积

    body,p,h1,h2,h3{

           margin: 0px;

    }

    4.基础选择器-类选择器:.类名称{} .使用场景:可以应付各种场景,是我们最常用的一种选择器。class名可以多个,多个class名用空格隔开。主要用于具有相同样式的元素

    .logo{

          background: red;

    }

    5.基础选择器-id选择器:#id名称{} .使用场景:ID选择器只能使用一次,而且仅一次。成熟网站里,你很少看到css里用id选择器的,都是用class,id选择器留给写js的人用,这样避免冲突。

    #first{

          width:200px;

    }

    id和class的区别:

    id就像身份证号码,是唯一的,该身份证号码就能代表你。一个人不能有两个身份证号码,也不能一个身份证号码表示两个人。而class就像昵称,该昵称也能代表你。一个人可以有多个昵称,也可以多个人用同个昵称。

    6.基础选择器-后代选择器:选择器1 选择器2 选择器3... 使用场景:样式作用于最后一个选择器,前面的选择器只是过滤条件 .

    div div span{

          width:200px;

    }

    相关文章

      网友评论

          本文标题:css基础选择器

          本文链接:https://www.haomeiwen.com/subject/nqxzrxtx.html