css3选择器

前言

CSS3 就是CSS2的一个进阶版本 带来很多新属性和新本样式C3和C2最大的区别 C3是加入了动画的概念

CSS3的兼容性历史

不同浏览器为了去兼容css3都使用了在样式前添加前缀的方式来解决兼容性问题。
目前

prefix（前缀）	browser（浏览器）
-webkit	chrome / safari （谷歌/苹果自带）
-moz	firefox（火狐）
-ms	ie（ie）
-o	opera（欧朋）

CSS3选择器

css3中新增了选择器的功能 但是并没有去新增选择器

关系型选择器

css3中有三个常用的关系型选择器为

• 相邻兄弟选择器 下一个满足条件的兄弟元素节点 。+连接
  1. 下一个
  2. 兄弟元素
  3. 满足条件
     例如： div+p 即为div后的第一个兄弟p标签
• 兄弟选择器 选择当前元素后面的所有合乎规则的兄弟元素。~连接。
  例如： div~p 即为div后所有的兄弟p标签
• 子选择器 选择合乎规则的儿子元素
  例如： div>p 即为选中div下的所有子标签p

属性选择器

css2中：
E[attr~=“val”]
标签内有这个属性 并且值包含（独立存在的）
独立存在： 用值开头 或者用两个空格将这个值包括起来
例如： div[class~=“a”]
则class=“abc” 、 class=" a " 、class=“b a c” 都能被选中
E[attr|=“val”]
取到以值开头中间可以用“-”连接
例如：div[class|=“a”]
则class=“abc” 、 class=“a” 、class=“a-b” 都能被选中
css3中：
E[attr^=“val”]
以val 开头
例如：div[class^=“a”]
则 class=“abc” 、 class=“a”
E[attr$=“val”]

例如：div[class$=“a”]
以val 结尾
则class=“cba” class=“a”

E[attr*=“val”]
包含val
例如：div[class*=“a”]
则所有包含“a”的属性都会被选中

伪元素选择器

E::placeholder
改变input控件里面placeholder提示文字的样式
例如：input::placeholder
E::selection(别人不会让你用，但是可以在自己的网站上去使用)
文字被选中的时候产生的样式
只能写三个样式
字体颜色 背景颜色 字体阴影
例如 :

      p::selection
{
color:#ff0000;
}

即为p标签文字选中时变为红色

伪类选择器

E:not(s)
排除拥有某一个属性的元素
:root
html 是一样 这个结论只是存在于我们当前所学习的知识
E:target
被标记成锚点之后点击出现的样式
E:first-child 第一个子元素
例如：div：first-chlid 即为div的第一个子元素被选中
E:last-child 最后一个子元素
例如：div：last-child 即为div的最后一个子元素被选中
E:nth-child(n)
1.要是某一个标签孩子
2.括号里面是数字或者英文单词 或者是公式
例如：div：nth-child(1) 即为div的第一个子元素被选中
CSS 中n是从1开始的 如果使用公式 则n成为了变量就从0开始
E:only-child 唯一的一个元素
例如：div：only-child 即为div的 唯一的一个元素被选中
E:nth-last-child(n) 最后第n个子元素
例如：div:nth-last-child(2) div最后第2个子元素被选中
上面的元素都会被其他元素所影响
E:first-of-type 这个类型的第一个孩子
例如：div:first-of-type div 这个类型的第一个孩子
E:last-of-type 这个类型的最后一个孩子
例如：div：last-of-type div这个类型的最后一个孩子
E:nth-of-type（n） 这个类型的第n个孩子
1.要是某一个标签孩子
2.括号里面是数字或者英文单词 或者是公式 （类型）
例如：div：nth-of-type（3） div这个类型的第三个孩子
E:only-of-type 这个类型唯一的一个元素
例如： div：only-of-type div这个类型唯一的一个元素
E:nth-last-of-type(n) 这个类型最后第n个孩子
例如：div:nth-last-of-type(2) div这个类型最后第二个孩子
上面的元素都不会被其他元素所影响

E:empty 选中这个类型的空元素（全部是空）
E:checked

边框

border-radius 之前都叫做圆角边框
例如：

    border-top-left-radius:250px ;
    border-top-right-radius: 250px;
    border-bottom-left-radius: 250px ;
    border-bottom-right-radius: 250px ;

以上分别是把上左、上右、下左、下右 的边框角弯曲250px;

边框阴影

box-shadow
取值为：
x
y
模糊距离
阴影尺寸
颜色
内外阴影 inset
例如：box-sahdow：5px 5px 5px 5px rad inset 即为x轴偏移，y轴偏移，模糊距离，阴影尺寸都为5px且颜色为red的内阴影。

背景

1.背景渐变
两种或者多种颜色间平滑过渡的一种效果
2.分类
1.线性渐变
2.径向渐变
3.重复渐变
3.语法
1.线性渐变
background-image:;
取值： linear-gradient()
渐变的组成方式
1.色标： 决定了渐变的每种颜色
2.以及出现的位置
写法：
第一个参数 方向或者位置 可以用角度 以及 英语单词 to top…
后面的参数 颜色+空格+所占的比例 % px
如果 所占比例不给的话会 平均分配
2.径向渐变
background-image:;
取值

css3中对像素的算法

calc（Xpx-Zpx）即为取得X减去Z的值的像素
例如：div { left:calc(50%-盒子宽); top: calc(50-盒子高); }
即为把盒子居中