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

css选择器

时间:2018-05-22 20:43:17      阅读:264      评论:0      收藏:0      [点我收藏+]

标签:doctype   title   命名   设置   big   段落   css   line   cal   

css选择器

 

css选择器主要分为:1.基本选择器;2.高级选择器;

  • 基础选择器(都是要写在head部分里)

    • 标签选择器:标签选择器可以选中所有的标签元素,比如div,ul,li ,p等等,不管标签藏的多深,都能选中,选中的是所有的,而不是某一个,所以说 "共性" 而不是 ”特性“
body{
    color:gray;
    font-size: 12px;
}
/*标签选择器*/
p{                      #选中的是body里面的所有p标签。
    color: red;
font-size: 20px;
}
span{
    color: yellow;
}
    • id选择器(一般用在JS中

      • 表示方式:  #+id号码

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

 

 

 

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
    <title></title>
    <style type="text/css">
        #p1{                            ##在head部分通过id选择器对body里的p标签进行选择操作。
            color: green;
            font-size: 30px;
           }

    </style>
    
</head>
<body>
    <p id="p1">尝试id选择器标签</p>

</body>
</html>

 

    • 类选择器
      • 所谓类 就是class . class与id非常相似 任何的标签都可以加类但是类是可以重复,属于归类的概念。
      • 同一个标签中可以携带多个类,用空格隔开 
      • 每个类要尽可能的小,有公共的概念,能够让更多的标签使用。 
      • 语法:“.” 加上 类名         

例:head部分:

<head>
    <meta charset=utf-8>
    <meta name=description content="">
    <meta name=viewport content="width=device-width, initial-scale=1">
    <title></title>
    <style type="text/css">   #在head部分,通过选择body里的类来进行样式改变。
                .lv{
            color: green;

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

body部分:

<body>
         <div>
               <p class="lv big">段落1</p>
               <p class="lv line">段落2</p>
               <p class="line big">段落3</p>    #通过给p标签归类来批次操作标签样式
                 </div>
</body>    

 

  

 

    

css选择器

标签:doctype   title   命名   设置   big   段落   css   line   cal   

原文地址:https://www.cnblogs.com/yangbinqiji/p/9073713.html

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