WEB学习-CSS基础选择器

• 基础选择器

•  标签选择器
  就是标签的名字。
  
      •    <h1>前端与移动开发<span>1期班</span>基础班</h1>
  css:
      •        <style type="text/css">
      •            span{
      •                color:red;
      •            }
      •        </style>
  
  注意的是：
  ） 所有的标签，都可以是选择器。比如ul、li、label、dt、dl、input
      •            ul{
      •                background-color: yellow;
      •            }
  
  ） 无论这个标签藏的多深，一定能够被选择上：
      •        <ul>
      •            <li>
      •                <ul>
      •                    <li>
      •                        <ul>
      •                            <li>
      •                                <ul>
      •                                    <li>
      •                                        <p>我是很深的p</p>
      •                                    </li>
      •                                </ul>
      •                            </li>
      •                        </ul>
      •                    </li>
      •                </ul>
      •            </li>
      •        </ul>
  css：
      •            p{
      •                color:blue;
      •            }
  能够让很深的p变蓝。
  
  ） 选择的所有，而不是一个。
  
  标签选择器，选择的是页面上所有这种类型的标签，所以经常描述“共性”，无法描述某一个元素的“个性”的。
  
   id选择器
      •        <p>我是段落1</p>
      •        <p id="para2">我是段落2</p>
      •        <p>我是段落3</p>
  css：
      •        <style type="text/css">
      •            #para2{
      •                color:red;
      •            }
      •        </style>
  id选择器的选择符是“#”。
  任何的HTML标签都可以有id属性。表示这个标签的名字。
  这个标签的名字，可以任取，但是：
  ） 只能有字母、数字、下划线
  ） 必须以字母开头
  ） 不能和标签同名。比如id不能叫做body、img、a
  
  一个HTML页面，不能出现相同的id，哪怕他们不是一个类型。比如页面上有一个id为pp的p，一个id为pp的div，是非法的！
  
  一个标签可以被多个css选择器选择，共同作用，这就是“层叠式”的第一层含义。

• 类选择器

• .就是类的符号。类的英语叫做class。
  所谓的类，就是class属性，class属性和id非常相似，任何的标签都可以携带class属性。
  class属性可以重复，比如，页面上可能有很多标签都有teshu这个类：
      <h3>我是一个h3啊</h3>
      <h3 class="teshu">我是一个h3啊</h3>
      <h3>我是一个h3啊</h3>
      <p>我是一个段落啊</p>
      <p class="teshu">我是一个段落啊</p>
      <p class="teshu">我是一个段落啊</p>
  css里面用.来表示类：
          .teshu{
              color: red;
          }
  
  同一个标签，可能同时属于多个类，用空格隔开：
  <h3 class="teshu  zhongyao">我是一个h3啊</h3>
  这样，这个h3就同时属于teshu类，也同时属于zhongyao类。
  
  初学者常见的错误，就是写成了两个class：
  <h3 class="teshu" class="zhongyao">我是一个h3啊</h3>
  
  所以要总结两条：
  1） class可以重复，也就是说，同一个页面上可能有多个标签同时属于某一个类；
  2） 同一个标签可以同时携带多个类。
  
  比如，我们现在要做一个页面：
  
  段落1
  段落2
  段落3
  
  正确的思路，就是用所谓“公共类”的思路，就是我们类就是提供“公共服务”，比如有绿、大、线，一旦携带这个类名，就有相应的样式变化：
      <style type="text/css">
          .lv{
              color:green;
          }
          .da{
              font-size: 60px;
          }
          .xian{
              text-decoration: underline;
          }
      </style>
  每个标签，就去选取自己想要的类：
      <p class="lv da">段落1</p>
      <p class="lv xian">段落2</p>
      <p class="da xian">段落3</p>
  
  也就是说：
  1） 不要去试图用一个类名，把某个标签的所有样式写完。这个标签要多携带几个类，共同造成这个标签的样式。
  2） 每一个类要尽可能小，有“公共”的概念，能够让更多的标签使用。
  
  到底用id还是用class？
  答案：尽可能的用class，除非极特殊的情况可以用id。
  原因：id是js用的。也就是说，js要通过id属性得到标签，所以我们css层面尽量不用id，要不然js就很别扭。另一层面，我们会认为一个有id的元素，有动态效果。

• 后代选择器

•     <style type="text/css">
          .div1 p{
              color:red;
          }
      </style>
  
  空格就表示后代，.div1 p 就是.div1的后代所有的p。
  强调一下，选择的是后代，不一定是儿子。
  
  比如：
      <div class="div1">
          <ul>
              <li>
                  <p>段落</p>
                  <p>段落</p>
                  <p>段落</p>
              </li>
          </ul>
      </div>
  能够被下面的选择器选择上：
          .div1 p{
              color:red;
          }
  所以，看见这个选择器要知道是后代，而不是儿子。选择的是所有.div1“中的”p，就是后代p。
  
  空格可以多次出现。
           .div1 .li2 p{
               color:red;
           }
  就是.div1里面的后代.li2里面的p。

  后代选择器，就是一种平衡：共性、特性的平衡。当要把某一个部分的所有的什么，进行样式改变，就要想到后代选择器。
  
  后代选择器，描述的是祖先结构。

• 交集选择器

• h3.special{
      color:red;
  }
  选择的元素是同时满足两个条件：必须是h3标签，然后必须是special标签。
  交集选择器没有空格。
  所以有没有空格
  div.red
  和
  div .red
  不是一个意思。

  交集选择器可以连续交（一般不要这么写）

  1        h3.special.zhongyao{

  2               color:red;

  3        }

  交集选择器，我们一般都是以标签名开头，比如div.haha  比如p.special。

• 并集选择器（分组选择器）

• h3,li{
      color:red;
  }
  用逗号就表示并集。

• 通配符*

• *就表示所有元素。
  *{
      color:red;
  }
  效率不高，如果页面上的标签越多，效率越低，所以页面上不能出现这个选择器。

　　CSS3选择器的部分了解

• 兼容问题了解

• IE： 微软的浏览器，随着操作系统安装的。所以每个windows都有IE浏览器。
  windows xp    操作系统安装的IE6
  windows vista 操作系统安装的IE7
  windows      操作系统安装的IE8
  windows      操作系统安装的IE9
  windows10     操作系统安装的edge
  浏览器兼容问题，要出，就基本上就是出在IE6、7身上，这两个浏览器是非常低级的浏览器。
  
  浏览器的市场占有率： http://tongji.baidu.com/data/
  今天：
  IE9    5.94%
  IE8 21.19%
  IE7 4.79%
  IE6 4.11%
  
  要知道典型的IE6兼容问题（面试要问），但是做项目我们兼容到IE8。
  
  HTML5浏览器打分：
  http://html5test.com/results/desktop.html

  各个浏览器的比较： （http://www1.pconline.com.cn/pcedu/specialtopic/css3-doraemon/）

• 儿子选择器（ > ）

• IE7开始兼容，IE6不兼容。
  div>p{.  //注意 没有空格
      color:red;
  }
  div的儿子p。和div的后代p的截然不同。
  能够选择：
      <div>
          <p>我是div的儿子</p>
      </div>
  不能选择：
      <div>
          <ul>
              <li>
                  <p>我是div的重孙子</p>
              </li>
          </ul>
      </div>

• 序选择器

• IE8开始兼容；IE6、7都不兼容
  
  选择第1个li：
      <style type="text/css">
          ul li:first-child{
              color:red;
          }
      </style>
  
  选择最后一个1i：
          ul li:last-child{
              color:blue;
          }
  由于浏览器的更新需要过程，所以现在如果公司还要求兼容IE6、，那么就要自己写类名：
      <ul>
          <li class="first">项目</li>
          <li>项目</li>
          <li>项目</li>
          <li>项目</li>
          <li>项目</li>
          <li>项目</li>
          <li>项目</li>
          <li>项目</li>
          <li>项目</li>
          <li class="last">项目</li>
      </ul>
  用类选择器来选择第一个或者最后一个：
          ul li.first{
              color:red;
          }
  
          ul li.last{
              color:blue;
          }

• 下一个兄弟选择器

• IE7开始兼容，IE6不兼容。
  +表示选择下一个兄弟
      <style type="text/css">
          h3+p{
              color:red;
          }
      </style>
  选择上的是h3元素后面紧挨着的第一个兄弟。
      <h3>我是一个标题</h3>
      <p>我是一个段落</p>
      <p>我是一个段落</p>
      <p>我是一个段落</p>
      <h3>我是一个标题</h3>
      <p>我是一个段落</p>
      <p>我是一个段落</p>
      <p>我是一个段落</p>
      <h3>我是一个标题</h3>
      <p>我是一个段落</p>
      <p>我是一个段落</p>
      <p>我是一个段落</p>
      <h3>我是一个标题</h3>
  
  所有的css3选择器，我们放在HTML5和CSS3课上介绍。

• 继承性

• 有一些属性，当给自己设置的时候，自己的后代都继承上了，这个就是继承性。
  哪些属性能继承？
  color、 text-开头的、line-开头的、font-开头的。
  
  这些关于文字样式的，都能够继承； 所有关于盒子的、定位的、布局的属性都不能继承。
  
  所以，如果我们的页面的文字，都是灰色，都是14px。那么就可以利用继承性：
  body{
      color:gray;
      font-size:14px;
  }
  
  继承性是从自己开始，直到最小的元素。

• 层叠性

• 层叠性：就是css处理冲突的能力。 所有的权重计算，没有任何兼容问题！
  当选择器，选择上了某个元素的时候，那么要这么统计权重：
  id的数量，类的数量，标签的数量
  不进位，实际上能进位（奇淫知识点：255个标签，等于1个类名）但是没有实战意义！
  如果权重一样，那么以后出现的为准：
  如果不能直接选中某个元素，通过继承性影响的话，那么权重是0。
  如果大家都是0，那么有一个就近原则：谁描述的近，听谁的。
  权重问题大总结：
  ） 先看有没有选中，如果选中了，那么以（id数，类数，标签数）来计权重。谁大听谁的。如果都一样，听后写的为准。
  ） 如果没有选中，那么权重是0。如果大家都是0，就近原则。

  　　

• !important标记

•     <style type="text/css">
          p{
              color:red !important;
          }
          #para1{
              color:blue;
          }
          .spec{
              color:green;
          }
      </style>
  important是英语里面的“重要的”的意思。我们可以通过语法：
  k:v !important;
  来给一个属性提高权重。这个属性的权重就是无穷大。
  一定要注意语法：
  正确的：
  font-size:60px !important;
  错误的：
  font-size:60px; !important;     → 不能把!important写在外面
  font-size:60px important;      →  不能忘记感叹号
  
  !important需要强调3点：
  ） !important提升的是一个属性，而不是一个选择器
  
          p{
              color:red !important;   → 只写了这一个!important，所以就字体颜色属性提升权重
              font-size: 100px ;      → 这条属性没有写!important，所以没有提升权重
          }
          #para1{
              color:blue;
              font-size: 50px;
          }
          .spec{
              color:green;
              font-size: 20px;
          }
  所以，综合来看，字体颜色是red（听important的）；字号是50px（听id的）;
  
  ） !important无法提升继承的权重，该是0还是0
  比如HTML结构：
      <div>
          <p>哈哈哈哈哈哈哈哈</p>
      </div>
  有CSS样式：
          div{
              color:red !important;
          }
          p{
              color:blue;
          }
  由于div是通过继承性来影响文字颜色的，所以!important无法提升它的权重，权重依然是0。
  干不过p标签，因为p标签是实实在在选中了，所以字是蓝色的（以p为准）。
  
  ）!important不影响就近原则
  如果大家都是继承来的，按理说应该按照“就近原则”，那么important能否影响就近原则呢？
  答案是：不影响。远的，永远是远的。不能给远的写一个important，干掉近的。
  
  ! important做站的时候，不允许使用。因为会让css写的很乱。
  现在，我们知道层叠性能比较很多东西：
  选择器的写法权重，谁离的近，谁写在下面。