CSS 相关知识总结

1 什么是CSS?
CSS全称(Cascading Style Sheets)是一门指定文档该如何呈现给用户的语言。

2 为何使用CSS?

CSS 文档信息的内容和如何展现它的细节想分离，文档细节即为样式（style）。你可以将样式与内容进行分离出来，以便我们能够

• 　　避免重复
• 　　更容易维护
• 　　为不同的目的，使用不同的样式而内容相同

3 CSS 如何工作的?

浏览器在展示一个文档内容的时候，必须要把文档和样式信息结合起来展示。这个处理过程一般分为两个阶段：

1 浏览器先将标记语言和CSS转换成DOM（文档对象模型）结构。这时DOM就代表了电脑内存中的相应文档，因为它已经融合文档结构和样式表

2 最后浏览器把DOM的内容展示出来。

4 层叠和继承？

一个元素的样式，可以通过多种方式来定义，而多种定义方式之间通过复杂的影响关系决定了元素的最终样式。这种复杂既造就了CSS的强大，也导致CSS显得如此“混乱”而且难以调试

对于层叠来说，共哟三种主要的样式来源

1. 　　浏览器对HTML定义的默认样式
2. 　　用户定义的样式
3. 　　开发者定义的样式，可以有三种形式

• • 　　　　定义在外部的样式（外链样式）：可以达到共用
  • 　　　　定义在页面头部的样式（内联样式）：通过这种形式定义的样式，只能当前页面使用
  • 　　　　定义在特定元素身上的（行内样式）：这种形式多用于测试，可维护性差

5 选择器（Selectors）

　　标签选择器

　　关系选择器

常见的基于关系的选择器

选择器	选择的元素
A E	任何是元素A的后代元素E (后代节点指A的子节点，子节点的子节点，以此类推)
A > E	任何元素A的子元素
E:first-child	任何元素的第一个子元素E
B + E	任何元素B的下一个兄弟元素E
B ~ E	B元素后面的拥有共同父元素的兄弟元素E

　　类选择器

　　ID选择器

　　伪类选择器

:link

:visited

:active

:hover

:focus

:first-child

:nth-child

:nth-last-child

nth-of-type

:first-of-type

:last-of-type

:empty

:target

:checked

:enabled

:disabled

提示：请使用

　　　　:link 选择器对指向未被访问页面的链接设置样式,

　　　　:visited 选择器用于选取已被访问的链接。

　　　　:hover 选择器用于设置鼠标指针浮动到链接上时的样式

　　　　:active选择器用于设置点击链接时的样式

其四种分别表示：链接 访问过的链接 悬浮在连接上 访问时（点击链接时）

:focus 表示元素获取焦点的

兼容性：

Chrome	Firefox	Internet	Oper	Safari
1.0	1.0	8.0	7.0	1.0

修饰表单元素状态：

　　:checked，:enabled，:disabled

:checked　被选中时

:enabled 　可用状态

:disabled 无效状态

enabled 表示任何启用的（enabled）元素。如果一个元素能够被激活（如选择、点击或接受文本输入）或获取焦点，则该元素是启用的。元素还有一个禁用的状态（disabled state），在被禁用时，元素不能被激活或获取焦点。

:target

　　目标元素一般配合a链接使用，利用其锚点功能，表示当前锚点指向的目标对象

:empty

　　表示没有内容的元素，例如 <hr/> <br/>

:first-child

　　第一个子元素

:nth-child()

　　从开始位置选择指定位置的子元素

　　

    　　:nth-child(2) {
        　　color: red;
  　　  }

        <div>
            <p>111111</p>
            <p>111111</p> //变红
            <p>111111</p>
            <p>111111</p>
        </div>

:nth-last-child()

　　从结束为止开始选择制定子元素

　　

   　　 :nth-last-child(2) {
            color: red;
       }

        <div>
            <p>111111</p>
            <p>111111</p>
            <p>111111</p> //变红
            <p>111111</p>
        </div>    

:nth-of-type()

　　根据类型 当没有指定具体类型时，则全文查找相同类型的指定位置的元素给其添加样式
　　

    <style>
        :nth-of-type(4){
            color:red;
        }
    </style>

    <a href="#d">aaaa</a>
    <a href="#d">aaaa</a>
    <a href="#d">aaaa</a>
    <a href="#d">aaaa</a> //变红
    <div>
        <div>
            111111111111
        </div>
        <div>
            111111111111
        </div>
        <div>
            111111111111
        </div>
        <div>
            111111111111
        </div>   //变红
  </div>

　　也可以指定类型

    div:nth-of-type(4){
        color:red;
    }

    <a href="#d">aaaa</a>
    <a href="#d">aaaa</a>
    <a href="#d">aaaa</a>
    <a href="#d">aaaa</a>
    <div>

        <div>
            111111111111
        </div>
        <div>
            111111111111
        </div>
        <div >
            111111111111
        </div>
        <div >
            111111111111  //变红
        </div>
    </div>

　　也可以指定范围（也就是父元素），例如下

 　　.parent div:nth-of-type(4) {
        color: red;
    }

    <div>
        111111111111
    </div>
    <div>
        111111111111
    </div>
    <div>
        111111111111
    </div>
    </div>
    <div>
        111111111111
    </div>
    <div class="parent">
        <div>
            111111111111
        </div>
        <div>
            111111111111
        </div>
        <div>
            111111111111
        </div>
        <div>
            111111111111
        </div>
    </div>

:first-of-type

　　选择第一个子元素，这与frist-child 区别在于可以进行类型

　　

    :first-child {
        color: red;
    }

    <p>111111</p>
    <p>
        <span>111</span>
    </p>
    <div>
        <p>111111</p>
    </div>

或

     :first-of-type{
        color: red;
    }

    <p>111111</p>
    <p>
        <span>111</span>
    </p>
    <div>
        <p>111111</p>
    </div>

:last-of-type  先筛选例如先找出所有的兄弟节点p元素，再选择最后一个p元素

　　

    p:last-of-type{
        color: red;
    }
    <p>111111</p>
    <p>
        <span>111</span>
    </p>
    <div>
        <p>111111</p>  //变红
    </div>
    <p>
        <span>111</span>  //变红
    </p>

　　//再看看这样的也行
　　
　 　　 p:last-of-type{        color: red;

    　　}
    <p>111111</p>
    <p>
        <span>111</span>
    </p> 
　　 <p>

    <span>111</span>  //变红
  </p>

 <div> <p>111111</p> //变红 </div> 

而last-child不进行筛选，只有满足是父元素中并且是最后一个

   p:last-child{
        color: red;
    }
    <p>111111</p>
    <p>
        <span>111</span>
    </p>
    <div>
        <p>111111</p>  //变红
    </div>
     <p>
        <span>111</span> //变红
    </p>
或者

    p:last-child{
        color: red;
    }
    <p>111111</p>
    <p>
        <span>111</span>
    </p>
    <p>
        <span>111</span> //不变红
    </p>
    <div>
        <p>111111</p>  //变红
    </div>