zoukankan      html  css  js  c++  java
  • 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后面是可以连写的,直接用空格隔开就可以了

     

  • 相关阅读:
    最详细易懂的CRC-16校验原理(附源程序)(转)
    深入理解Java的接口和抽象类(转)
    同步、更新、下载Android Source & SDK from 国内镜像站(转载)
    django字段查询参数及聚合函数
    django不返回QuerySets的API
    django查询集API
    django查询操作
    django用包来组织模型
    django模型的继承
    django模型的元数据Meta
  • 原文地址:https://www.cnblogs.com/cykblogs/p/5819444.html
Copyright © 2011-2022 走看看