资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/css学习归纳总结（一）

css学习归纳总结（一）

wwolf / 2791人阅读

摘要：子选择器只对直接后代有影响的选择器，而对孙子后代以及多层后代不产生作用。注意在中，只支持后代选择器，不支持子选择器盒子模型框模型介绍给下的设置宽度，那么他们将平均掉它们所占容器的宽度。元素要多带带占一行。

赞助我以写出更好的文章，give me a cup of coffee?

2017最新最全前端面试题

选择器的分组

CSS选择器分为

1.群组选择器  如：p, body, img, div{}

2.兄弟选择器  如：p + p { color:#f00; }

3.属性选择器  如： p[title] { color:#f00; }

4.包含（后代）选择器  如：body ul li{}

5.子元素选择器 如：div > p{}

6.ID选择器  如：#myDiv{}

7.类选择器  如：.class1{}

8.伪元素选择器  如：E:first-line，E:before

9.伪类选择器  如：E:first-child ，E:visited，E:focus，E:enabled

10.标签选择器  如：p { font-size:1em; }

子选择器和后代选择器的区别：

后代选择器的写法就是把外层的标记写在前面，内层的标记写在后面，之间用空格分隔。
子选择器只对直接后代有影响的选择器，而对“孙子后代”以及多层后代不产生作用。

注意：在IE6中，只支持后代选择器，不支持子选择器

盒子模型

css框模型介绍：


给ul下的li设置宽度，那么他们将平均掉它们所占容器的宽度。div >ul> li> a标签所占宽度和高度：

当你为body元素指定div时，每个div默认的宽为浏览器的100%，高度在每个浏览器的解析都是不一样的，比如在火狐下是131px，在chrome下则是142px，具体机制不明

css字体速记规则

当用css定义字体样式的时候，你也许会这样做：

font-weight: bold;
font-style: italic;
font-variant: small-caps;
font-size: 1em;
line-height: 1.5em;
font-family: verdana,sans-serif

没有必要这么做，因为你可以使用css速记属性：

 font: bold italic small-caps 1em/1.5em verdana,sans-serif

值得注意的是：css速记版本只会在你同时指定 font-size和font-family 属性时才会生效。如果你没有指定font-weight, font-style,或者 font-variant，那么这些值将会自动默认为 normal

避免多余选择器

有时候你会有如下的写法：

ul li { ... }

ol li { ... }
    
table tr td { ... }

但实际上这是没必要的写法，因为

  • 会且只会与