层级选择器

例：box嵌套box2，box3，box4

子代选择器

.box>.box2{
效果：只对box2起效果
}

+当前元素的后面第一个兄弟元素

.box+.box2{效果：只对box3起效果
}

~当前元素的后面所有的兄弟元素

.box~.box2{
效果：改变box3，box4的效果
}

属性选择器

E[attr]：只使用属性名，但没有确定任何属性值;
E[attr=“value”]：指定属性名，并指定了该属性的属性值;
E[attr~=“value”]：指定属性名，并且具有属性值，此属性值是一个词列表，并且以空格隔开，其中词列表包含了一个value词，而且等号前面的" ~ "不能不写

拓展

E[attr^=“value”]：指定了属性名，并且有属性值，属性值是以value开头的；
E[attr$=“value”]：指定了属性名，并且有属性值，而且属性值是以value结束的;
E[attr*=“value”]：指定了属性名，并且有属性值，而且属性值中包含了value;

[class]{
效果：对页面所有class属性的进行效果设置
}
div[class=box1]{
效果：对页面所有div中带有class=box1属性的进行效果设置
}
div[class~=box1]{
效果：当页面div中class属性含有多个属性值时，只要class中含有box1即可
}

伪类选择器

1.结构性伪类选择器

X:first-child 匹配子集的第一个元素；
X:last-child 匹配父元素中最后一个X元素；
X:nth-child(n) 用于匹配索引值为n的子元素，索引值从1开始；
X:only-child 这个伪类一般用的比较少，比如上述匹配的是div下的有且仅有一个p，也就是说如果div内有多个p将不匹配；
X:root 匹配文档的根元素，在HTML中，根元素永远是HTML；
X:empty 匹配没有任何子元素(包括包含文本)的元素X；

2.目标伪类选择器

E：target 选择匹配E的所有元素，且匹配元素被URL指向;
需配合锚点使用

div:target{
效果：当点击锚点时，div的效果发生变化
}

3.UI元素状态伪类选择器

E:enabled 匹配所有用户界面(form表单)中处于可用状态的E元素；
E:disabled 匹配所有用户界面(form表单)中处于不可用状态的E元素；
E:checked 匹配所有用户界面(form表单)中处于选中状态的E元素;
E::selection 匹配E元素中被用户选中或处于高亮状态的部分;

p::selection {
background:yellow;
color:red;
效果：当选中p标签中的文字时，被选中的文字背景颜色改为红色，字体颜色改为黄色
}

4.否定伪类选择器

E:not(s) 匹配所有不匹配简单选择符s的元素E

li:not(:first-child){
background:yellow;
效果：li中不是第一个li的背景颜色改变为黄色
}

5.动态伪类选择器

E:link
链接伪类选择器：选择匹配的E元素，而且匹配元素被定义了超链接并未访问过，常用于链接锚点上
E:visited
链接伪类选择器：选择匹配的E元素，而且匹配元素被定义了超链接并已被访问过
E:active
用户行为选择器：选择匹配的E元素，且匹配元素被激活。
E:hover
用户行为选择器：选择匹配的E元素，且用户鼠标停留在元素E上。

盒子阴影

	box-shadow 盒子阴影
h-shadow	必须的，水平阴影的位置，允许负值
v-shadow	必须的，垂直阴影的位置，允许负值
blur	可选，模糊距离
spread	可选阴影的大小
color	可选阴影颜色
inset	可选从外层阴影改变阴影内测阴影

Eg：box-shadow:10px 10px 5px #88888;

圆角边框

border-radius:10px 20px 30px 40px;
可设置px或百分比，当值设置大于或等于50%时，盒子会转化成一个圆⚪。
设置一个值时四个角一样。两个值左上右下，左下右上。三个值左上，左下右上，右下。
可对某个角进行单独设置：

border-top-left-radius:10px/30px;
border-top-left-radius:10px 20px 30px 40px /30px 40px 50px 60px
/前边表示水平方向，/后表示垂直方向

字体引入

字体模块：@font-face

@font-face的语法规则:

@font-face{
font-family:<YourWebFontName>;
src:<source>[<format>][<source>[<format>]]*;
[font-weight:<weight>];
[font-style:<style>];
}

@font-face语法说明：
1.YourWebFontName：此值指的就是你自己定义的字体名称，最好是使用你下载的默认字体，他将被引用到你的Web元素中的font-family。如"font-family:“YourWebFontName”;"
2.source：此值指的是你自定义的字体的存放路径，可以是相对路径也可以是绝对路径。

怪异盒模型

含义：更改原有布局盒子模型的计算方式通过box-sizing属性的取值进行更改

属性：box-sizing
box-sizing属性允许您以特定的方式定义匹配某个区域的特定元素。
属性值：content-box
这是CSS2.1规定的宽度高度行为。宽度和高度分别应用到匀速的内容框，在宽度和高度之外绘制元素的内边距和外边框。

弹性盒子

display:flex;
弹性盒是一种新的布局方式，特别适合移动端布局

父元素设置弹性盒子对子元素的影响：
1.子元素默认横向排列
2.行内元素，变成了块级元素
3.只有一个元素的时候，margin:auto 自动水平垂直居中

弹性盒-修改主轴方向

display:flex;
flex-direction:column;
可取值：row横向排列，column纵向排列，row-reverse横向反向排列(类似右浮动)

主轴侧轴对齐方式

调整主轴对齐方式

justify-content:center;
可取值：flex-start主轴头部，flex-end主轴尾部，center居中对齐，space-between 两端对齐，space-around 距离环绕

调整侧轴对齐方式

align-items:center;
可取值：flex-start，flex-end，center

折行与行间距问题

在不设置折行时，默认无论有多少个元素都会自动排列在第一行，不会自动换行。
折行

flex-wrap用于控制换行，取值有nowrap(默认，不换行) | wrap(宽度不足换行) | wrap-reverse(向上换行)
不折行不自动缩放
flex-shrink:0;

控制折行后行间距

align-content:center;
可选值flex-start，flex-end，center，space-between ，space-around 。

子元素调整顺序

order:0;
默认值为0，数值越大越靠后，可以取负值

剩余宽高

flex:1;
主轴是横轴时，其他设置宽度的占位之后，设置flex属性的将会沾满其他宽度

渐变

CSS3渐变可以让你在两个或多个指定的颜色之间显示平稳的过渡。以前你必须使用图像来实现这些效果，现在通过CSS3的渐变即可实现。此外，渐变效果的元素在放大时看起来效果更好，因为渐变是由浏览器生成的。

1.线性渐变

语法：background:linear-gradient(direction,color-stop1,color-stop2,…);
说明：direction：默认为to bottom，即从上向下渐变；
stop：颜色的分布位置，默认均匀分布，例如有3个颜色，各个颜色的shop均为33.33%。
示例1：to left, top right, to bottom, to top
div{background:linear-gradient(to left,red,blue)}
div{background:linear-gradient(to right,red,blue)}
div{background:linear-gradient(to bottom,red,blue)} 浏览器默认值
div{background:linear-gradient(to top,red,blue)}
效果分别为：

2.径向渐变

镜像渐变不同于线性渐变，线性渐变是从“一个方向”向“另一个方向”的颜色渐变，而径向渐变是从“一个点”向四周的颜色渐变
语法：background:radial-gradient(center,shape,size,start-color,…,last-color);
说明：center：渐变起点的位置，可以为百分比，默认是图片的正中心。
shape：渐变的形状，ellipse表示椭圆形，circle表示圆形。默认为ellipse，如果元素形状为正方形的元素，则ellipse和circle显示一样。
size：渐变的大小，即渐变到哪里停止，他有四个值。closest-side：最近边；farthest-side：最远边；closest-corner：最近角；farthest-corner：最远角
示例1：多颜色点均匀分布
div{background:radial-gradient(red,green,blue);}
以中心(50%50%)为起点，到最远角，从red到green，blue的均匀渐变

3.重复渐变

(1)重复线性渐变
div{background:repeating-linear-gradient(red,yellow 10%,green 20%);}
说明：10%的位置为yellow，20%位置的位置为green，然后按照这20%向下重复

(2)重复性径向渐变
div{background:repeating-radial-gradient(red,yellow 10%,green 20%);}

背景扩展

/* background-image: url(https://img1.baidu.com/it/u=944552842,2462231783&fm=253&fmt=auto&app=120&f=GIF?w=690&h=388); */
/* 设置背景图片不随着标签的滚动而滚动 */
background-attachment: fixed;
/*  background-blend-mode 设置多层背景的时候如何显示 */
/* normal  默认值  正常混合模式 */
/* normal   默认值。设置正常的混合模式。multiply  正片叠底模式。screen   滤色模式。overlay    叠加模式。darken 变暗模式。   lighten 变亮模式。   color-dodge 颜色减淡模式。 saturation  饱和度模式。  color   颜色模式。   luminosity  亮度模式。 */

边框阴影

1.阴影水平方向的偏移量, 正值阴影在右边赋值阴影在左边
2.阴影垂直方向的偏移量, 正值阴影在下边赋值阴影在上边
3.阴影的模糊程度只能是正值值越大阴影越模糊,如果值为0 表示阴影不具有模糊效果
4.阴影的扩展半径正值阴影延伸扩大负值阴影缩小
5.阴影颜色 (英文别名十六进制 rgb )
6.inset设置阴影在元素内部显示
box-shadow: -10px 10px 20px 10px black inset;

滤镜

高斯模糊默认是0 取值范围[0 - ∞] 值越大越模糊
filter: blur(40px);
设置亮度默认是1 设置比1小的数会变暗设置比1大的数比变亮取值范围[0 - ∞]
filter:brightness(1.5);
灰度默认是0 取值范围[0 - 1]
filter:grayscale(0.3)
设置褐色默认是0 取值范围[0 - 1]
filter: sepia(0.5);
设置饱和度默认值是1 取值范围[0 - ∞]
filter: saturate(3);
反色默认0 取值范围[0 - 1]
filter: invert(0.5);
色相旋转取值范围[0deg - 360deg]
filter: hue-rotate(90deg);
设置透明度
filter: opacity();
设置阴影
filter: drop-shadow(10px 10px 10px red);

基线对齐

    <style>.item {width: 100px;height: 100px;border: 1px solid #000;display: inline-block;vertical-align: top; //基线对齐，顶部对齐}</style></head><body><div class="item">1</div><div class="item"></div><div class="item">3</div></body>

2.8 CSS3新特性相关推荐

01-移动端开发教程-CSS3新特性（上）
1. 移动端开发课程概述移动互联网的兴起,让移动端的开发迅速蹿红.对于前端开发者来说,移动端的开发已经占据了他们大部分工作时间.接下来老马带大家一起学习移动端开发的相关前端开发技术. 这边课程内容包 ...
HTML5和CSS3新特性(完整版)
css3新特性选择器背景和边框文本效果 2D/3D 转换 - 变形(transform).过渡(transtion).动画(animation) 1.选择器 :last-child /* 选择元 ...
Html5、CSS3新特性
h5的新特性? 1.新增一些语义化标签 <article> <section> <aside><header> <footer><n ...
CSS3新特性——新增选择器，2D/3D转换，动画
CSS3新特性--新增选择器,2D/3D转换,动画欢迎大家去博客冰山一树Sankey,浏览效果更好.直接右上角搜索该标题即可博客园主页:博客园主页-冰山一树Sankey CSDN主页:CSDN主页 ...
css3新特性和其他常见问题（三）
css3新特性参考网站 css3选择器属性选择器(IE7及以上支持) E[attr]表示存在attr属性即可: E[attr=val]表示属性值完全等于val E[attr~=val]表示的一个单 ...
CSS3新特性详解(三)：CSS3 2D转换和3D转换 transform 变形使用详解
关于CSS3新特性,在上篇博文中"CSS3新特性详解(二):CSS3 字体@font-face详解.如何创建和修改woff字体文件及text-shadow等文本效果",讨论了C ...
web前端 --- CSS（04） -- 盒子模型、div+css网页布局、css3新特性
盒子模型 (1)网页标签分类: 行内元素: 块级元素:有宽高,可以设置大小,同时不会让其他块元素默认占据当前行 (2)内边距: 内容和边线之间存在空白区域,空白区域被称为:内边距(padding) 盒 ...
山东标梵Biaofun详解CSS3新特性
CSS3 新特性 CSS 盒模型设置一个元素的背景颜色,背景颜色会填充哪些区域 margin/padding 设置百分比是相对谁的 link 和 @import 的区别 CSS 选择器的解析规则 C ...
CSS3新特性（摘要）
目录 CSS3 简介 CSS3规则 @media @font-face @keyframes CSS3 函数 rgba linear-gradient repeating-linear-gradien ...
Html5与CSS3新特性
H5新特性新增的语义化标签 <header> : 头部标签 <nav> : 导航标签 <article> : 内容标签 <main> : 主体标签 & ...

2.8 CSS3新特性