内容简介：通过元素类型通过 属性 / 属性值 匹配一个或多个元素。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"> 复制代码
参考：
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持 码农网
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
Data Structures and Algorithms in Java
Robert Lafore / Sams / 2002-11-06 / USD 64.99
Data Structures and Algorithms in Java, Second Edition is designed to be easy to read and understand although the topic itself is complicated. Algorithms are the procedures that software programs use......一起来看看 《Data Structures and Algorithms in Java》 这本书的介绍吧!
