这篇文章主要讲解了“css3基础知识点有哪些”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“css3基础知识点有哪些”吧！
div > p 选择父元素为div的所有子元素
div + p 选择紧接在div后的所有子元素
[target] 选择带有target属性的元素 a[target] {...}
[target=_blank] 选择target为_blank的所有子元素
[title~=flower] 选择title属性包含单词flower的元素
[lang|=en]选择lang属性以en开头的所有元素
[p:first-letter] 选择p元素开头的所有首字母
[p:first-line] 选择每个p元素的首行
[p:first-child] 选择属于其父元素的首个子元素的每个 <p> 元素 就是相对比某个父元素下的所有p元素的第一个p 必须声明 <!DOCTYPE>
[p:before] 在每个p元素之前插入内容 p:before{content:"台词：";} ::css3写法 : css2写法
[p:after] 在每个p元素后插入内容
[p:lang(it)] 选择带有以 "it" 开头的 lang 属性值的每个 <p> 元素
[p~ul] 选择前面有<p>元素的每个<ul>元素
a[src^="https"] 选择所有a 属性中src以https开头的 ^表示开头
a[src$=".pdf"] 选择所有a中属性src以pdf结尾的 $表示结尾
a[src*="abc"] 选择所有a中属性src包含abc的元素
div p:first-of-type div下首个p元素 p可以不是第一个
div p:last-of-type div下最后一个p元素
div p:only-of-type div中只有一个p元素 可以包含其他元素
div p:only-child div中只有一个p元素 不能包含其他元素 ie不支持
div p:nth-child（2） div下第二个p元素
div p:nth-last-child(2) div下倒数第二个p元素 Odd 和 even 是可用于匹配下标是奇数或偶数的子元素的关键词 使用公式 (an + b)。描述：表示周期的长度，n 是计数器（从 0 开始），b 是偏移值。
div p:nth-of-type(2) div下第二个p 2可以用奇偶数 可以用公式
div p:nth-last-of-type(2) div下倒数第二个p
div p:last-child div下最后一个p 相当于div p:nth-last-child(1)
p:empty 选择没有子元素的每个 <p> 元素（包括文本节点）
#news:target 选择当前活动的 #news 元素。
input:enabled input:disabled input:checked(只有 Opera 支持 :checked 选择器。)
input[type="text"]:enabled 为所有 type="text" 的已启用的 input 元素设置背景色：
:not(p) 选择所有非 <p> 元素：
::selection 选择被用户选取的元素部分。鼠标选取变色
::selection ::-moz-selection
animation 属性是一个简写属性，用于设置六个动画属性：
animation-name 为 @keyframes 动画规定一个名称：mymove
animation-duration 定义动画完成一个周期所需要的时间，以秒或毫秒计
animation-timing-function 规定动画的速度曲线 liner ease ease-in ease-out ease-in-out
animation-delay 定义动画何时开始
animation-iteration-count 规定动画被播放的次数 n|infinite;n|无限次
animation-direction 定义是否应该轮流反向播放动画 normal|alternate;正|反
animation-play-state 规定动画正在运行还是暂停 paused|running;
animation-fill-mode 规定动画在播放之前或之后，其动画效果是否可见。
none | forwards 保持最后属性 | backwards 开始属性 | both前后都应用
@-moz- 火狐 @-webkit-谷歌和苹果 @-o- 欧朋
例子：
@keyframes mymove
from {top:0px;}
to {top:200px;}
@-moz-keyframes mymove /* Firefox */
from {top:0px;}
to {top:200px;}
@-webkit-keyframes mymove /* Safari 和 Chrome */
from {top:0px;}
to {top:200px;}
@-o-keyframes mymove /* Opera */
from {top:0px;}
to {top:200px;}
div
{width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 5s infinite;
-webkit-animation:mymove 5s infinite; /*Safari and Chrome*/
translate()素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标）
translate(x,y)定义2d转换 xy为数字 x正为右 负为左 y正为下 负为上
translate3d(x,y,z)定义3D转换
scale()方法，元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数
scale(x,y)定义2D转换 x y 为倍数
scale(2,4)把宽度转换为原始尺寸的 2 倍，把高度转换为原始高度的 4 倍
rotate()方法 素顺时针旋转给定的角度。允许负值，元素将逆时针旋转
rotate(30deg)表示旋转30度
matrix()方法
skew(x-angle,y-angle)定义 2D 倾斜转换，沿着 X 和 Y 轴。
transition-property 属性规定应用过渡效果的 CSS 属性的名称 比如：width
transition-property: none|all|property;
transition-duration属性规定完成过渡效果需要花费的时间（以秒或毫秒计）。
transition-timing-function属性规定过渡效果的速度曲线。
transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-
bezier(n,n,n,n); ease：规定慢速开始，然后变快
transition-delay 属性规定过渡效果何时开始。
例子：
div
{width:100px;
height:100px;
background:blue;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
div:hover
width:300px;
box-sizing: content-box | border-box | inherit
box-sizing:content-box，按W3C的盒子模型计算，内容+内边距+边框=元素大小
这是搭积木，三块积木搭出一个房子，任何一块积木大小变化了，房子结构就不稳定了，表现为把元素撑大
box-sizing:border-box，按传统IE盒子模型计算，元素大小=内容+内边距+边框
这是盖房子，事先定好尺寸，盖好一个房子，里边放三块积木，随便你们三个怎么变化，只要不超过房子的大小，随你们折腾
flex-direction：row | row-reverse | column | column-reverse; 横排|反向横排|竖排|反向竖排
flex-wrap： nowrap | wrap | wrap-reverse; 不换行|换行|换行，第一行在下方
flex-flow： flex-flow: <flex-direction> || <flex-wrap>;
justify-content：主轴上的对齐方式。
flex-start | flex-end | center | space-between | space-around;
左对齐 | 右对齐 | 中间 | 两端对齐 | 间隔对等
align-items ： 属性定义项目在交叉轴上如何对齐。
flex-start | flex-end | center | baseline | stretch
交叉轴的起点对齐| 结尾对齐 |中点对齐|第一行文字的基线对齐|未设置高度或设为auto占满整个容器的高度
align-content ： 多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用
flex-start | flex-end | center | space-between | space-around | stretch;
项目的6个属性：
order ： 定义项目的排列顺序。数值越小，排列越靠前，默认为0。
flex-grow ： 属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大 1等分
flex-shrink ：定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
flex-basis ： 属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。
flex ： 属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto
align-self ： self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch
@media screen and (max-width:480px){}
<img src="image.jpg" data-src-600px="image-600px.jpg" data-src-800px="image-800px.jpg" alt="" />
@media (min-device-width:600px){
img[data-src-600px]{
content: attr(data-src-600px,url);
@media (min-device-width:800px){
img[data-src-800px] {
content:attr(data-src-800px,url);
background: radial-gradient(center, shape size, start-color, ..., last-color);
渐变的中心是 center（表示在中心点），渐变的形状是 ellipse（表示椭圆形），渐变的大小是 farthest-corner（表示到最远的角落）。
#grad {
background: -webkit-radial-gradient(red, green, blue); /* Safari 5.1 - 6.0 */
background: -o-radial-gradient(red, green, blue); /* Opera 11.6 - 12.0 */
background: -moz-radial-gradient(red, green, blue); /* Firefox 3.6 - 15 */
background: radial-gradient(red, green, blue); /* 标准的语法 */
感谢各位的阅读，以上就是“css3基础知识点有哪些”的内容了，经过本文的学习后，相信大家对css3基础知识点有哪些这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是本站，小编将为大家推送更多相关知识点的文章，欢迎关注！