属性选择器
伪类选择器
n遵循线性变化，其取值1、2、3、4、…
n取值为n>=12、当n做一个系数时，n取值为n>=0者n<0，例如nth-child(2n+1)
-n+5做为一个整体不能小于1；
伪元素选择器
其它选择器
.box::first-letter
.box::first-line
Hue、Saturation、Lightness、Alpha即HSLA
R、G、B 取值范围0~255
H 取值范围0~360，0/360表示黑色、120表示绿色、240表示蓝色
S 取值范围0%~100%
L 取值范围0%~100%
A 取值范围0~1
关于透明度：
1、opacity子元素会继承父元素的透明度，在实际开发中会带来干扰；
2 、transparent 设置透明度时完全类似于“玻璃”一样的透明；
文字阴影：左偏移量、上偏移量、模糊度、颜色（可设透明度）。单位(px)
文本溢出：
white-space
多行文本溢出处理可参照下面的方法，但是有比较严重的兼容性，需要慎重选择，比较完备的多行溢出需要JS辅助完成。多行文本文字溢出处理，非标准属性，可应用于移动端
边框圆角
理解before after
可分别设置长、短半径，以“/”进行分隔，遵循“1，2，3，4”规则。
border-radius: 45px 0 0 45px / 90px 0 0 90px; border-radius: 45px / 90px;
表格运用圆角需要要 border-collapse: separate;
当圆角半径小于或等于边框宽度时，元素内角是直角
50%可绘制圆和椭圆。
边框图片
slice 上右下左设置切割
round 会自动调整尺寸，完整显示边框图片。
repeat 单纯平铺多余部分，会被“裁切”而不显示。
边框阴影
设置边框阴影不会影响盒子的布局
spread可以与blur、h-shadow、v-shadow相互抵消，blur不可为负值
模糊度不能为负。
border:50px solid transparent; Chrome将此属性写在前面。
关于盒模型存在两种形式，分别是W3C标准盒模型和IE盒模型，如下图所示，其区别主要在于宽度和高度的计算方式，对盒模型做出了新的定义，即允许开发人员指定盒子宽度和高度的计算方式。
IE盒模型只会出现在IE5版本和IE6+的怪异模式中。
box-sizing: border-box; 类似IE模型 按padding+border计算总宽
box-sizing: content-box; 默认width为内容
background-size会以background-clip设定的盒模型计算。
cover 会使“最大”边，进行缩放，另一边同比缩放，铺满容器，超出部分会溢出。
contain 会使“最小”边，进行缩放，另一边同比缩放，不一定铺满容器，会完整显示图片。
background-size:100% 100%; 铺满背景图片的默认位置。
background-clip: padding-box; //背景不绘制边框底部 从padding位置开始绘制
:content-box; //背景不绘制padding 只绘制内部
background-origin背景图片的起始位置，实际上改变的是background-position的原点值。
background-origin:border-box; //背景图片从边框的左上角开始绘制
:padding-box; //padding的左上角
:content-box; //content的左上角
同时设置origin和clip, clip设置从content开始绘制，origin设置背景图起点为padding左上角。此时背景图只显示一部分。不写origin默认也是padding开始，显示背景图部分。
background组合设置 属性的两个位置是从padding左上开始计算的。
background-size设置的cover/contain属性与background-clip无关，缩放不以它设置的背景绘制区域为参考点，而以background-origin设置的为主。
线性渐变：linear-gradient(to right bottom, #fff, red);
Linear-gradient(135deg, #fff, red);
让坐标轴顺时针旋转角度，渐变方向为Y轴正方向。180deg为默认方向
background-image: linear-gradient(90deg, #fff 30%, red 30%); 
background-image: linear-gradient(90deg, #fff 30%, red 60%); 
径向渐变：radial-gradient(circle at center center, red 30%, yellow 60%);
(ellipse at 50px 50px, red 30%, yellow 60%);
(50px 120px at center center, red 30%, yellow 60%);
重复渐变：repeating-linear-gradient()
repeating-radial-gradient() 具体参数试着设置
旧版：display: -webkit-box;
过渡：display: -webkit-flex;
新版：display: flex;
指定一个盒子为伸缩盒子 display:flex;
设置属性调整此盒的子元素的布局方式
（，不算文字等内容）
-webkit-box-flex: 1; 均分剩余宽度
flex: 1; 均分宽度
(对齐方式)-webkit-box-align:center; (start左 | end右 | justify分散对其)
(垂直对齐)-webkit-box-pack: center; (垂直居中 )
（反转）-webkit-box-direction: normal; (reverse)
(排列方式) -webkit-box-orient: horizontal; (vertical)
(主轴)justify-content:flex-start; (flex-end center space-between space-around) 水平
(侧轴)align-items:flex-start; (flex-end center baseline stretch) 垂直
(子元素侧轴)align-self: center; 同align-items属性值，覆盖父盒子的align-items。
(收缩比例)flex-shrink:1; （默认收缩 | 0不参与收缩 | 值越大收缩比例越大）
(扩展比例)flex-grow: 1; （默认不收缩为0 | ）
(预先分配) flex-basis: 300px;
(方向)flex-direction:column; (column-reverse row row-column)
(换行)flex-wrap:wrap; (默认no-wrap，会缩放)
(行间距)align-content:flex-start;
(flex-end center space-between space-around stretch)
(子元素顺序)order: 2; 按order顺序从小到大展示。
flex-basis在分配空间之前已经分得的像素，也可直接写具体的w/h大小。
注：属性设置成stretch时，height必须设置成auto才能显示效果。
设置了align-items 再设置align-content属性，不显示效果。
设置align-content必须要设置flex-wrap:wrap;
flex的缩写：flex: 1 0 600px; （flex-grow拓展 flex-shrink收缩 flex-basis）
当一个元素过大容不下时，其他元素又不允许参与收缩，此时会换行，不再是全部收缩。
新版伸缩布局
主轴：Flex容器的主轴主要用来配置Flex项目。
侧轴：与主轴垂直的轴称作侧轴，是侧轴方向的延伸。
主轴和侧轴并不是固定不变的，通过flex-direction可以调整。
兼容性
为了更好的兼容性，我们需要给容器声明flex-h/flex-v，而不是一般的flex：
新属性
可用CSS3新属性替代： -webkit-user-modify:read-write;（read-only | read-write-plaintext-only 富文本粘贴会丢失） 多列布局
transition-property设置过渡属性
transition-duration设置过渡时间
transition-timing-function设置过渡速度
transition-delay设置过渡延时
transition组合写法：属性 | 时间 | 延迟时间 | 运动的类型
多次可重复动画
animation-name: change;
animation-duration: 2s;
animation-fill-mode: forwards; /保持状态/ none | backwards(起始点) | both
animation-iteration-count: infinite; /无限循环/ number
animation-delay: 1s; /延时/
animation-play-state: paused; /暂停/ running
animation-direction: alternate; /倒方向/ 反向运动计次
animation-timing-function: linear; /速度/
@keyframe change { …… }
可以hover暂停动画。
-webkit-box-reflect: below 10px -webkit-linear-gradient(t,t 50%, rgba(255,255,255,.6));
（2）缩放
（3）旋转 正值顺时针，负值逆时针。
（4）斜切
（5）变换的轴心点 transform-origin: top left; 也可用像素
3D:
必须先加景深perspective: 200px; （值越小离物体越近，推荐500~800）
再开启3D transform-style: preserve-3d;
然后才能看到Z轴变换的各种效果
pointer-events: none; 屏蔽鼠标事件。
到此这篇css伪类选择器顺序（css中伪类和伪元素选择器）的文章就介绍到这了,更多相关内容请继续浏览下面的相关推荐文章，希望大家都能在编程的领域有一番成就！版权声明：
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！
转载请注明出处，原文链接：https://www.xkablog.com/qdhtml/71978.html