内容简介：通过元素类型通过 属性 / 属性值 匹配一个或多个元素。Presence
通过元素类型 tagName 、 * 、 .class 或 #id 匹配一个或多个元素。
（2）、属性选择器
通过 属性 / 属性值 匹配一个或多个元素。
Presence
| 类型 | 匹配结果 |
|---|---|
[ attr ] |
匹配包含 attr 属性的所有元素 |
[ attr = val ] |
匹配 attr 属性值为 val 的所有元素 |
[ attr ~= val ] |
匹配 attr 属性中包含 val 词汇( space-separated )的所有元素 |
Substring
| 类型 | 匹配结果 |
|---|---|
[ attr ^= val ] |
匹配 attr 属性中以 val 开头的所有元素 |
[ attr |= val ] |
匹配 attr 属性中以 val 或者 val- 开头的所有元素 |
[ attr $= val ] |
匹配 attr 属性中以 val 结尾的所有元素 |
[ attr *= val ] |
匹配 attr 属性中包含 val 的所有元素 |
（3）、伪类和伪元素
伪类：匹配元素的相关状态和属性，如 :hover :first-child :nth-child() ，单冒号。
伪元素：匹配元素的相关位置, 如 ::after ::first-letter ::selection ，双冒号。
（4）、组合选择器
组合选择器：组合使用多个选择器。
| 类型 | 组合 | 匹配结果 |
|---|---|---|
| 选择器组 | A , B | 匹配 A or B选择器规则 |
| 后代选择器 | A B | 匹配B选择器规则，且B是A的后代（子孙） |
| 子代选择器 | A > B | 匹配B选择器规则，且B是A的子代（必须是直接子代） |
| 相邻兄弟选择器 | A + B | 匹配B选择器规则，且B是A的弟弟（AB属于同一父代，且B紧跟A的后面） |
| 任一兄弟选择器 | A - B | 匹配B选择器规则，且B是A的任意弟弟（AB属于同一父代，且B在A之后，不一定紧挨） |
2.2、选择器优先级
优先级按以下规则递增：
- 通配符
*、组合选择器(, > + -'')和否定伪类:not()对优先级没有影响（在:not()内部声明的选择器还是会按照规则影响） - 浏览器默认样式
- 元素类型选择器
tagName、伪元素选择器:: - 类选择器
.class、 属性选择器[ attr ]、伪类选择器: - id选择器
#id - 内联样式
< tagName style="" > -
!important
3、值和单位
3.1、值
- 数值
- 百分比
- 颜色：背景颜色 background-color 文字颜色 color 边框颜色 border
- colorName
- HEX
- RGB
- HSL
- RGBA HSLA
- Opacity
- 函数
- rgb() rgba() hsla() linear-gradient()
- rotate() translate()
- calc()
- url()
复制代码
3.2、单位
- px - em em are the most common **relative** unit you'll use in web development. - rem - ex ch - vw vh - 无单位值 - 动画 s deg 复制代码
4、继承
5、盒模型
5.1、盒模型基础
-
margin：外边距，颜色透明 -
border：边框 -
padding：内边距，颜色透明 -
content：盒子内容-
width和height:Content的宽度和高度，默认为auto，即浏览器自动计算。 -
max-width/min-widthmin-height/max-height
-
注意！再提一下，设置元素的 width 和 height ，实际上是设置的 content 区域的 width 和 height 。 元素的实际尺寸 还需计算 padding 、 border 和 margin 。 有几种计算模型需要了解：
- w3c 标准盒模型
Total element width = width + left padding + right padding + left border + right border + left margin + right margin Total element height = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin 复制代码
- IE 盒模型
5.4、轮廓 outline
OUTSIDE the borders , to make the element "stand out".
轮廓指的是边框外的区域，目的是为了设置使元素显得 突出 的样式
5.2、溢出 overflow
溢出 overflow 控制的是内容区域 content 太大而溢出一片区域时候的情况。
| 值 | 匹配结果 |
|---|---|
visible |
默认值，溢出部分不会被裁减，内容区域 content 会渲染到元素盒子之外 |
hidden |
溢出部分会被裁减, 不可见 |
scroll |
溢出部分会被裁减，但会出现滚动条以查看内容（始终存在垂直和水平滚动条） |
auto |
和 scroll 相似，但只会在必要时，出现滚动条（只有溢出的方向出现滚动条） |
5.3、背景剪裁 background-Clip
background-clip: border-box|padding-box|content-box|initial|inherit; 复制代码
5.5、盒子类型 display
5.6、外边距合并
块级格式化上下文 BFC
BFC ( block-formatting contexts )
- Understanding CSS Layout And The Block Formatting Context
- how to create BFC | MDN
- CSS: What is Block Formatting Context (BFC)?
6、调式CSS
Chrome开发者 工具 使用指南 | Google Developer
7、媒体查询 @media
@media not|only mediatype and (expressions) {
CSS-Code;
}
复制代码
<link rel="stylesheet" media="mediatype and|not|only (expressions)" href="print.css"> 复制代码
参考：
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持 码农网
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
The Facebook Effect
David Kirkpatrick / Simon & Schuster / 2010-6-8 / USD 26.00
《Facebook 效应》的作者近距离地采访了与Facebook相关的人士，其中包括Facebook的创始人、员工、投资人、意向投资人以及合作伙伴，加起来超过了130人。这是真切详实的访谈，更是超级精彩的故事。作者以其细腻的笔触，精巧的叙事结构，解密了Facebook如何从哈佛的宿舍里萌发，创始人的内讧，权力之争，如何放弃华盛顿邮报的投资，怎样争取到第一个广告客户，而第一轮融资又如何获得一亿美元的......一起来看看 《The Facebook Effect》 这本书的介绍吧!
