码迷,mamicode.com
首页 > Web开发 > 详细

web前端——CSS 02 选择器

时间:2019-10-18 15:28:10      阅读:94      评论:0      收藏:0      [点我收藏+]

标签:选中   box   code   答案   段落   代码   gif   text   工程师   

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

 

基本选择器包含:

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

body{
    color:gray;
    font-size: 12px;
}
/*标签选择器*/
p{
    color: red;
font-size: 20px;
}
span{
    color: yellow;
}

 

2.id选择器
# 选中id

同一个页面中id不能重复。
任何的标签都可以设置id 
id命名规范 要以字母 可以有数字 下划线 - 大小写严格区分 aa和AA是两个不一样的属性值

#box{
    background:green;
}
            
#s1{
    color: red;
}

#s2{
    font-size: 30px;
}

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来获取到标签

 

web前端——CSS 02 选择器

标签:选中   box   code   答案   段落   代码   gif   text   工程师   

原文地址:https://www.cnblogs.com/bilx/p/11698299.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!