css3的一些基本选择器

Css3其实跟css差不多,只是比css多了点东西,它的选择器也是有标签选择器,类选择器,id选择器,后代选择器等等。

先说说兄弟选择器,它和css中有点不一样,css中是除了自己的所有兄弟,而css3有点不一样:

它是指从secondH2开始往后找所有的p标签,在secondH2之前的是找不到的。

Css3有属性选择器:

所有拥有skill属性,不需要考虑属性的值。

属性=fire的那个标签

属性值以sell开头的,其中^就是以什么开头的意思。

属性值以s结尾,$就是以什么结束。

属性值中包含it的,*就是包含的意思。

查找属性中以-进行分割,第一个为dog的。

伪类选择器是标签加:

第一个是所有li中的第一个,last-child是所以li中的最后一个。

Nth-child中可以写数字,可以写各种公式比如:2n,2n-1,还可以写odd,even。其中2n-1和odd是获取所有奇书,2n和even是获取所有偶数。

里面的索引值是所有的兄弟节点算的,就算中间有其他的标签,也会进行计算。

伪类选择器中还有not选择器,

找到所有没有price的属性的li标签。

伪元素选择器before,after,他们两个可以为双标签添加子元素。用他们的必须要加上content,他的值可以为空,也可以赋值给他,但不能给标签。

它默认的是行内元素,所以必须转为块级元素。

 

Content必须要,定位或者display一定要用个。

First-letter是第一个字母的意思:

查找P标签中的第一个字母

First-line是首行的意思。

Selection是选中p标签中文字时,那些文字的属性会变成设置的那样。

上面说了那么多css3的选择器,有个选择器的兼容性很差的是placeholder,要加一些前缀,不同的浏览器的前缀都不同的。

 

Css3中可以做成立体效果,看上去有阴影,可以分为边框阴影和文字阴影:

边框阴影是box-shadow,它后面有五个参数:

第一个参数如果不写,影子方向就是往外,写inset就是方向往内。

文字阴影是text-shadow,它只有四个参数:

在css3中我们设置颜色一般都是用rgb或hsl,因为他们对应的有rgba和hsla。因为用这四个他们的值不会被继承的,而#000000,red这些是会被继承。

rgb()后面有三个0-255的值。

Rgba()后面有四个值,前三个和rgb的一样,第四个是0-1的值,是设置透明度的。

hsl()后面有三个0-255的值。

hsla()后面有四个值,前三个和hsl的一样,第四个是0-1的值,是设置透明度的。

还有一个可以直接设置透明度为0,是transparent。

边框倒角,在css3中可以弄成你想要的各种形状,边框四个角可以随你倒:

它写的是有顺序的,从左上角开始,顺时针写。

Box-sizing:border-box是首先保证盒子的大小。

Box-sizing:contentr-box是首先保证盒子里内容的大小。

Transform也有好几个属性,它可以做各种动画:

Transform:rotate(60deg)是旋转角度的意思,里面deg是角度意思。

Transform:translate(x,y)是移动的意思,第一个是x方向移动的距离,第二个是y方向的移动距离。

Transform:scale(a,b)a是改变x方向的倍数,b是改变y方向的倍数。

Transform:skewX是x方向的扭曲值

Transform:skewY是y方向的扭曲值

Transform后面是可以连写的,直接用空格隔开就可以了

 

原文地址:https://www.cnblogs.com/cykblogs/p/5819444.html