随手记二——CSS样式和选择器

一、随手记

1、面试问题：我们和什么打交道最多？

　答案是浏览器，那么主流浏览器有哪些，它的内核是什么呢？

主流浏览器	内核
IE	trident
Firefox	Gecko
Geogle Chrome	webkit/blink
Safari	webkit
Opera	presto

2、引入CSS有三种方式

　①行间样式

　　这种是在body里的，可以直接在标签属性里用style来写CSS，如：

<!DOCTYPE html>
<html>
<head>
    <title>列表</title>
</head>
<body>
　　<div style="100px;height:100px;background-color:red;">样式</div>
</body>
</html>

　②页面级CSS

　　这种样式在head部分，如：

<!DOCTYPE html>
<html>
<head>
    <title>列表</title>
    <style type="text/css">
        div{
            100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
<div>样式</div>
</body>
</html>

　③外部CSS文件

　　这种样式是html一个文件，css一个文件

no4.html

<!DOCTYPE html>
<html>
<head>
    <title>列表</title>
    <link rel="stylesheet" type="text/css" href="no3.css">
</head>
<body>
<div>样式</div>
</body>
</html>

no3.css

div{
     100px;
    height: 100px;
    border-radius: 50%;
    background-color: black;
}

3、选择器

　　选择器也有很多，有id选择器、class选择器、标签选择器、通配符选择器、属性选择器等

　①id选择器

　id选择器类似身份证，和组件一对一的关系。

　②clss选择器

　　class选择器类似于一款衣服，可以被多个用户使用。

　③标签选择器

　标签选择器就是，同时为所有该标签的内容使用该样式

　④通配符选择器

　⑤属性选择器

　⑥父子选择器/派生选择器

　　由此可见，父子选择器不是直接的父子关系，间接的也有效(爷孙)。

　⑦直接子元素选择器

　　由此可见，直接子元素选择器不承认间接关系，必须层层筛选。

　⑧并列选择器

　　用p.demo，精确到我希望为哪个文本片段布置样式。

　⑨分组选择器

　⑩相邻兄弟选择器

　　相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。

　　h1 + p {margin-top:50px;} 这个选择器读作：“选择紧接在 h1 元素后出现的段落，h1 和 p 元素拥有共同的父元素”。

　　用一个结合符只能选择两个相邻兄弟中的第二个元素。

4、选择器的优先级

　　优先级排序：

选择器	CSS权重
!important	Infinity
行间样式	1000
id	100
class\|属性\|伪类	10
标签	1
通配符	0

CSS权重小知识：10和1并不是十进制或二进制，而是256进制，即01＋255=10，所以1和10之间的差距是差很远的。

5、权重的计算

　　如图，最终显示的文本是红色背景色的1234567，因为#idDiv p的权重比.classDiv .classP大。

　　权重是可以用加法来算的，#idDiv(100)+p(1) > .classDiv(10)+ .classP(10)，所以一定会显示第一个样式。