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

02-css的选择器

时间:2018-05-10 20:24:10      阅读:217      评论:0      收藏:0      [点我收藏+]

标签:bsp   选择   ora   样式   gray   css   区分   img   --   

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

 

基本选择器包含:

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

技术分享图片
body{
    color:gray;
    font-size: 12px;
}
/*标签选择器*/
p{
    color: red;
font-size: 20px;
}
span{
    color: yellow;
}
View Code

 

2.id选择器
# 选中id

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

技术分享图片
 1 #box{
 2     background:green;
 3 }
 4             
 5 #s1{
 6     color: red;
 7 }
 8 
 9 #s2{
10     font-size: 30px;
11 }
View Code

 


3.类选择器

3.1 所谓类 就是class . class与id非常相似 任何的标签都可以加类但是类是可以重复,属于归类的概念。

3.2 同一个标签中可以携带多个类,用空格隔开


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

答案:一定要有”公共类“的概念

 1 .lv{
 2     color: green;
 3 
 4 }
 5 .big{
 6     font-size: 40px;
 7 }
 8 .line{
 9     text-decoration: underline;
10 }
1 <!-- 公共类    共有的属性 -->
2     <div>
3         <p class="lv big">段落1</p>
4         <p class="lv line">段落2</p>
5         <p class="line big">段落3</p>
6     </div>
7     

 

总结:

  • 不要去试图用一个类将我们的页面写完。这个标签要携带多个类,共同设置样式
  • 每个类要尽可能的小,有公共的概念,能够让更多的标签使用

玩好了类 就等于玩好了css中的1/2

到底使用id还是用class?
答案:尽可能的用class。除非一些特殊情况可以用id

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

02-css的选择器

标签:bsp   选择   ora   样式   gray   css   区分   img   --   

原文地址:https://www.cnblogs.com/majj/p/9021466.html

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