HTML+CSS学习笔记四

CSS基础选择器

        CSS的style标签写在head标签中，它是一个容器级标签。具体代码为：<style type="text/css"></style>

一、标签选择器

        每种标签都可以作为标签选择器，包括p、h1、hl、div等。标签选择器选择的是所有的标签而不是某一个标签。

       

二、id选择器

       在style标签中，使用#来选择id。任何的标签都可以有id，id的命名要以字母开头，可以有数字、下划线，大小写严格区别。同一个页面内id不能重复，即使不一样的标签，也不能是相同的id。

三、类选择器

       在style标签中，使用.XX来作为类选择器。所谓类，就是class属性。任何标签都可以携带class属性，并且页面中多个标签可以使用同一个class属性。

        同一个标签，也可以同时属于多个类。类之间用空格隔开。如;<p class="special normal">XXX</p>。意思就是p标签同时属于special和normal两个类。

CSS高级选择器

一、后代选择器

       在style标签中，空格就代表后代。div p就代表div标签中的p标签。

       例如：

       

       效果为：

由此可见后代选择器起到了选择div中p标签的作用。

二、交集选择器

        交集选择器没有空格，交集选择器一般以标签名为开头，例如：p.special表示同时满足p标签和special类。同时，交集选择器可以连续交，比如p.special#normal这种，也是可行的。

三、并集选择器

        并集选择器用逗号表示并集。例如p,h1，就表示p标签与h1标签的并集。

        p,h1{

                  color:red;

                 }

        与

         p{

                color:red;

              }

         h1{

                  color:red;

                }

         效果一样。

四、通配符

       *表示通配符。*{ color:red; }表示页面中的所有元素的颜色为红色。

一些简单的CSS3选择器

一、儿子选择器

       儿子选择器从IE7开始兼容。代码是>。它与后代选择器完全不同，儿子选择器只能选择下一级标签，而不是标签内包含的所有元素。

       例如：

       

       效果是：

       

二、序选择器

       需选择器可以用来直接选择列表中的某一项，用XX:xx-child来表示序选择器。

       例如：

       

       效果为：

       

CSS的继承性和层叠性

一、继承性

       继承性表示当给某个标签设置一些属性时，后代标签都继承了这些属性。

       像color、text-decoration、font-size、font-style之类的关于文字样式的属性都可以被继承。所有关于盒子的、定位的、布局的属性都不能继承。

二、层叠性

       层叠性，就是CSS处理冲突的能力。CSS通过计算权重来处理冲突问题，这不存在兼容问题。

       权重统计需要统计id的数量，类的数量，标签的数量。然后从左到右进行对比。

       例如：

       （此图片引用自传智播客）

       当权重一样时，以后出现的为准。

       例如：

       

       效果为：

       

       如果不能直接选中某个元素，而是靠继承性影响的话，此时权重为0。当权重都为0时，按照就近原则，即谁描述的近，听谁的。