CSS中的偏僻知识点

最新推荐文章于 2022-05-24 11:00:54 发布

dejing6575

最新推荐文章于 2022-05-24 11:00:54 发布

阅读量99

点赞数

原文链接：http://www.cnblogs.com/weiyinfu/p/10221914.html

版权

一、css中的calc

在CSS中有calc属性用于尺寸的计算，可以让百分比和像素值进行运算。

div {width : calc(100% - 30px);}

为了兼容性

/*Firefox*/
-moz-calc(expression);
/*chrome safari*/
-webkit-calc(expression);

需要注意：减号前后必须有空格。
在less中，

div {
　　@diff : 30px;
　　width : calc(~"100% - @{diff}");
      or width: calc(~"100% - "@diff)
}

二、CSS选择器中功能最强大的莫过于伪类

应用场景

学校网络实验课程有互评题部分，这部分是同学们互相评价答案对错。
大家当然都是互相打对勾了。
一个HTML页面，有100题，每道题都需要勾选“正确”，“错误”，“部分正确”三个选项，我想F12以下，写一个js语句一下子选中全部正确的单选框。
:not(selector) $("input :not([type=text])")
:contains(text) $("input:contains('正确')")
组合起来 $("input:contains('正确'):not(contains('部分正确'))")

其它CSS伪类选择器

type	child
:first-of-type	:first-child
:last-of-type	:last-child
:only-of-type	:only-child
:nth-of-type(n)	:nth-child(n)
:nth-last-of-type(n)	:nth-last-child(n)

三、使用伪类选定第k个元素

<!DOCTYPE html>
<html>

<head>
    <title></title>
    <style type="text/css">
    /*使用first-child和last-child*/
    
    p:first-child {
        color: red;
    }
    
    p:last-child {
        color: blue;
    }
    /*nth-child(参数),比较灵活,注意n表示自然数,从0,1,2,开始;nth-child(编号),编号从1开始*/
    
    p:nth-child(0) {
        color: red;
    }
    /*nth-last-child(参数)表示倒数几个元素*/
    
    p:nth-last-child(3) {
        color: green;
    }
    /*因为n从0~无穷,当n小于1时没有意义,所以下列css选定前两个元素*/
    
    p:nth-child(-n+2) {
        color: purple;
    }
    /*因为n从0~无穷,下列css选定的是1,3,5,7...元素*/
    
    p:nth-child(2n+1) {
        color: yellow;
    }
    </style>
</head>

<body>
    <p>one</p>
    <p>two</p>
    <p>three</p>
    <p>four</p>
    <p>five</p>
    <p>six</p>
</body>

</html>

四、hover伪类不生效的原因

有一个div，div内文本颜色为蓝色，当鼠标悬浮时div内文本颜色变红。

<html>
  <head>
    <meta charset="utf8" />
    <style>
      div:hover {
        color: red; 
      }
    </style>
  </head>

  <body>
    <div style="color:blue">haha</div>
  </body>
</html>

以上代码并不能实现这样的功能，div内的文本一直是蓝色。原因在于：内联形式的属性选择比外部样式优先级要高，在外部样式中使用important可以解决问题。

转载于:https://www.cnblogs.com/weiyinfu/p/10221914.html

dejing6575

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS中的偏僻知识点

一、css中的calc在CSS中有calc属性用于尺寸的计算，可以让百分比和像素值进行运算。div {width : calc(100% - 30px);}为了兼容性/*Firefox*/-moz-calc(expression);/*chrome safari*/-webkit-calc(expression); 需要注意：减号前后必须有空格。在less中，d...
复制链接

扫一扫