选择器
- 通用选择器：
* {}
- id选择器
#header {}
- class选择器
.header {}
- 元素选择器
div {}
- 子选择器
ul > li {}
- 后代选择器
div p {}
- 伪类选择器
:hover {}
::selection {}
.action {}
:first-child {}
:last-child {}
:first-of-type {}
:last-of-type {}
:nth-of-type(n) {}
:nth-of-last-type(n) {}
- 伪元素选择器:
:after {}
:before {}
- 属性选择器:
input[type="text"] {}
- 组合选择器：
E,F/E F {} // 后代选择器
/E>F {} // 子元素选择器
/E+F {} // 直接相邻元素选择器----匹配之后的相邻同级元素
/E~F {} // 普通相邻元素选择器----匹配之后的同级元素
- 层次选择器
p~ul {} // 选择前面有p元素的每个ul元素
选择器区别
// 子选择器作用于元素的第一代后代，后代选择器作用于元素的所有后代
ul>li {} // 子选择器
div p {} // 后代选择器
css选择器优先级：
- 选择器优先级由高到低分别为
!important > 作为style属性写在元素标签上的内联样式 >id选择器>类选择器>伪类选择器>属性选择器>标签选择器> 通配符选择器（* 应少用）>浏览器自定义；
当比较多个相同级别的CSS选择器优先级时，它们定义的位置将决定一切。下面从位置上将CSS优先级由高到低分为六级：
1、位于标签里的中所定义的CSS拥有最高级的优先权。
2、第二级的优先属性由位于 标签中的 @import 引入样式表所定义。
3、第三级的优先属性由标签所引入的样式表定义。
4、第四级的优先属性由标签所引入的样式表内的 @import 导入样式表定义。
5、第五级优先的样式有用户设定。
6、最低级的优先权由浏览器默认。
CSS哪些属性可以继承？
-
css继承特性主要是指文本方面的继承(比如字体、颜色、字体大小等)，盒模型相关的属性基本没有继承特性。
-
不可继承的：
display、margin、border、padding、background、height、min-height、max-height、width、min-width、max-width、overflow、position、top、bottom、left、right、z-index、float、clear、 table-layout、vertical-align、page-break-after、page-bread-before和unicode-bidi。
- 所有元素可继承的：
visibility和cursor
- 终极块级元素可继承的：
text-indent和text-align
- 内联元素可继承的：
letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction
- 列表元素可继承的：
list-style、list-style-type、list-style-position、list-style-image
BFC布局规则：
-
内部的Box会在垂直方向，一个接一个地放置。
-
Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
-
每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
-
BFC的区域不会与float box重叠。
-
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
-
计算BFC的高度时，浮动元素也参与计算
BFC的作用及原理：
-
自适应两栏布局
-
清除内部浮动
-
防止垂直 margin 重叠
-
BFC内部的元素和外部的元素绝对不会互相影响，因此， 当BFC外部存在浮动时，它不应该影响BFC内部Box的布局，BFC会通过变窄，而不与浮动有重叠。同样的，当BFC内部有浮动时，为了不影响外部元素的布局，BFC计算高度时会包括浮动的高度。避免margin重叠也是这样的一个道理。
CSS函数有哪些？
根据w3cplus中可以划分为以下几类
-
属性函数：attr()；
-
背景图片函数：linear-gradient()、radial-gradient()、conic-gradient()、repeating-linear-gradient()、repeating-radial-gradient()、repeating-conic-gradient()、image-set()、image()、url()、element()；
-
颜色函数：rgb()、rgba()、hsl()、hsla()、hwb()、color-mod()；
-
图形函数：circle()、ellipse()、inset()、polygon()、path()
-
滤镜函数：blur()、brightness()、contrast()、drop-shadow()、grayscale()、hue-rotate()、invert()、opacity()、saturate()、sepia()；
-
转换函数：matrix()、matrix3d()、perspective()、rotate()、rotate3d()、rotateX()、rotateY()、rotateZ()、scale()、scale3d()、scaleX()、scaleY()、scaleZ()、skew()、skewX()、skewY()、translate()、translateX()、translateY()、translateZ()、translate3d()；
-
数学函数：calc()、min()、max()、mixmax()、repeat()；
-
缓动函数：cubic-bezier()、steps()；
-
其他函数：counter()、counters()、toggle()、var()、 symbols()。
网友评论