week3 day2

来源:互联网 发布:mac预览怎么编辑pdf 编辑:程序博客网 时间:2024/06/09 16:16
 1·几类选择器

    1)交集选择器,如“divp{样式}”给div中的p添加样式<没有间距>

       多个选择器共同包含的选择器

    2) 并集选择器,用英文“,”进行分隔,可同时对多个进行编辑

       选择多个所有匹配的元素

    3)相邻兄弟选择器,用“+”号,对单个作用

       必须严格相邻不允许出现其他元素间隔

    4)通用兄弟选择器,用“~”号对多个作用

       所有同级兄弟

    5)子代选择器:选择指定元素的所有子代,不包含孙子代以及以后的代,用“>”进行选择

    6)属性选择器

         p[id^=q] 匹配所有属性值以“q”开头的“p”
         p[id$=u] 匹配所有属性值以"u"结尾的“p”
         p[id*=e] 匹配所有属性值包含“e”的“p”
         p[id=f]  匹配属性值为“f”的“p”
         p[id]    所有属性值有id的“p”
         如input[value=ttt]  也可匹配任意一个属性
            


    7)同级别 同类项

      1>同级别的第几个

      p:first-child  选中同级别中的第一个,若第一个不是“p”元素则不会添加样式

      p:first-of-type 选中同级别且同类项中的第一个

        nth-child(n)同级别中的第n个

        nth-last-child(n) 同级别中的倒数第n个

        only-child   选中父元素中只有一个子元素的元素

      2>同类项的第几个

      p:first-of-child  同级别且同类型的第一个

      p:last-of-type 选中同级别且同类型中的最后一个

        nth-of-type(n) 选中同级别且同类型的第n个

        nth-last-of-type(n)选中同级别且同类项的倒数第n个

        only-of-type  选中父元素中元素类项只有一种的元素

   8)状态伪类选择器

      凡是属性为布尔类型的  其值可取以下几种

      1·true

      2·属性值等于属性名

      3·直接给空字符串

      4·只写属性名

      不想生效不写就可以    disabled 被禁用的选项   

                         checked+label 给所有被选择激活的元素后面紧跟的label元素添加样式

    9)not

      p:not([id=text]) 给除了id=text的p添加样式


    10)target  对a标签定义的锚点进行样式的添加

      所有的元素都可以用来定义锚点,锚点的属性可以用两个属性name和id

      name用的比较少,有点浏览器不支持通过name来指定锚点   只支持id

      比较通用的方法是同时定义name和id  只需将name和id定义为同一个值即可


    11)和段落相关的

      firsr-letter  对首个字符编辑

      first-line    对段落第一行编辑

      em:字体大小只会受到父元素字体大小影响

      rem:只会受到根元素(html)字体大小的影响  可以做到修改一次字体大小来改变整个页面的字体大小


     12)背景图片知识点补充

     background-origin:border/padding/content-box   定义背景图片从边框/内边距内容区开始显示

     background-clip:border/padding/content-box    背景图片从边框/内边距/内容区开始剪切

     background-attachment    图片显示形式

     图片默认的展示起点是从内容区开始的


    13)transform的变形效果

         translate(Xpx,Ypx)让元素在x轴上发生X个值偏移  y轴上发生Y个值偏移

         transformX 只在X轴上偏移   transformY  只在Y轴上偏移

         scale(X,Y) 让元素在X轴上发生X倍缩放 在Y轴上发生Y倍数缩放

         scaleX 只在X轴上缩放   scaleY 只在Y轴上缩放

         rotate(Xdeg,Ydeg)  让元素按指定的中心点进行旋转(图片中心)

         rotateX 让元素沿X轴旋转  rotateY 让元素沿Y轴选转

         skew (Xdeg,Ydeg) 让元素在X轴上倾斜Xdeg角度  在Y轴上倾斜Ydeg角度

         skewX  只在X轴上倾斜    skewY 只在Y轴上倾斜







                           

        

    

     



原创粉丝点击