02-CSS的选择器

css的选择器: 1.基本选择器 2.高级选择器

基本选择器包含:

1.标签选择器

标签选择器可以选中所有的标签元素,比如   div ,  ul  ,  li  ,  p  等等  , 不管标签藏的多深 , 都能选中,选中的是所有的, 而不是某一个, 所以说 " 共性" 而不是"特性 "

        body {
            /*将整个body都选中,改成红色, 字体改成12px*/
            color: red;
            font-size: 12px;
        }
        p{
            /*p标签选择器*/
            color: blueviolet;
            font-size: 20px;
        }
        span{
            color: yellow;
        }    

2.id选择器

格式 :   #选中 id

同一个页面中id 不能重复

任何的标签都可以设置id

id命名规范  要以字母 可以有数字 下划线 大小写严格区分 , 

#box{
     background-color: yellow;
 }
#s1{
    color: red;
}
#s2{
    font-size: 15px;
}    

3.类选择器

格式:  .选中类名

所谓类 : 就是class   .class 与 id 非常相似 任何的标签都可以加类 , 但是类是可以重复 , 属于归类的概念 , 同一个标签中可以携带多个类 , 用空格隔开

类的使用 , 能够决定前端工程师的css的水平到底有多牛逼

玩类  一定要有  " 公共类"   的概念.

 .lv{
     color: green;
 
 }
 .big{
     font-size: 40px;
 }
 .line{
    text-decoration: underline;

  }

<!-- 公共类    共有的属性 -->
     <div>
         <p class="lv big">段落1</p>
         <p class="lv line">段落2</p>
         <p class="line big">段落3</p>
     </div>

总结 : 

　　不要去试图用一个类将我们的页面写完. 这个标签要携带多个类,共同设置样式

　　每个类要尽可能的小 , 有公共的概念, 能够让更多的标签使用

到底使用id 还是使用class?

答案 :  尽可能的用class , 除非一些特殊情况可以使用id

原因 :  id 一般是用在  js  的 , 也就是说 js  是通过  id  来获取到标签