一、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可以解决问题。

CSS中的偏僻知识点的更多相关文章

css 中font属性知识点总结
一. font属性值可以继承.例如子元素可以继承父元素的行高,字体大小等等. 二.font属性可以进行连写:font: font-sytle font-weight font-size/line- ...
前端笔试面试中的常用知识点总结(CSS)
1.CSS选择器的优先级!important > 内联 > id选择器 > 类选择器 > 标签选择器多个类选择器叠加(256)之后的优先级大于一个id选择器!importan ...
CSS中对图片(background)的一些设置心得总结
写网页的时候很多情况需要对图片进行操作,如何在不进行专业的美工裁切操作的情况下而让自己的素材度达到最大的满意度呢,这是一个问题,对于懒得开ps切图的我,通常会直接在网络上download一张图片,直接 ...
深入理解CSS中的层叠上下文和层叠顺序(转)
by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=5115 零.世间的道 ...
深入理解css中的margin属性
深入理解css中的margin属性之前我一直认为margin属性是一个非常简单的属性,但是最近做项目时遇到了一些问题,才发现margin属性还是有一些“坑”的,下面我会介绍margin的基本知识以及 ...
css中的浮动以及清除浮动
对于css中的浮动问题,曾经有一段时间我是懵懵懂懂的感觉,对于float这个属性一直是似懂非懂的赶脚,对于这种让我们一直懵懵懂懂的知识点,我们就需要找个时间点,仔仔细细的去将它搞懂,从这个过程中我们也 ...
CSS中盒子模型和position（一）
今天遇到几个css中的重要的知识点,记得这些都是以前看过的:margin.padding.border和position.可是用起来还是有很多的问题,以前自己看过去总是懒得记录,等到用起来了都不知道自 ...
CSS中Position属性
也许你看到这个标题觉得很简单,确实这是一篇关于CSS中Position属性基础知识的文章,但是关于Position的一些细节也许你不了解. 1.简介 position有五个属性: static | r ...
【转】CSS中的浮动和清除浮动
以下转自<CSS中的浮动和清除浮动,梳理一下!> 浮动到底是什么? 浮动核心就一句话:浮动元素会脱离文档流并向左/向右浮动,直到碰到父元素或者另一个浮动元素.请默念3次! 浮动最初设计的目 ...

随机推荐

LINQ学习之旅 C#3.0新特性（一）
一:C#3.0新语言的特性自动属性(Auto-Implemented Properties) 隐含类型局部变量(Local Variable Type Inference) 匿名类型(Anonymo ...
Django2.0 path与Django1.x版本url正则匹配问题
2.0内的path匹配正则时候无效, 导入re_path即可匹配正则
鼠标hover元素scale/zoom中心点放大效果实例页面
CSS代码: .box { /* 可见视觉区域 */ width: 480px; height: 250px; position: relative; overflow: hidden; cursor ...
P1197 [JSOI2008]星球大战并查集反向
题目描述很久以前,在一个遥远的星系,一个黑暗的帝国靠着它的超级武器统治着整个星系. 某一天,凭着一个偶然的机遇,一支反抗军摧毁了帝国的超级武器,并攻下了星系中几乎所有的星球.这些星球通过特殊的以太隧 ...
ListView优化中的细节问题
1.android:layout_height属性: 必须将ListView的布局高度属性设置为非“wrap_content”(可以是“match_parent / fill_parent / ...
Android Firebase Android google-cloud-tools
Firebase 让不懂服务端的开发者也可以快速写出实时性的Web端和移动端应用. firebase的功能包括推送通知,云存储,活动监视,远程部署针对国内三方推送,只能在国内使用,到了国外就不支持了 ...
HDU.4352.XHXJ's LIS(数位DP 状压 LIS)
题目链接 $Description$ 求$[l,r]$中有多少个数,满足把这个数的每一位从高位到低位写下来,其LIS长度为$k$. $Solution$ 数位DP. 至于怎么求LIS, ...
zabbix 添加用户配置权限
点击 Administration → Users 添加新用户,单击 Create user ,在新的用户表单中,确保将用户添加到现有用户组之一,例如“Zabbix administators”. ...
向安装包中添加设备 UDID. 蒲公英内测
向安装包中添加设备 UDID 前言注:本文适用于只有苹果个人开发者账号.公司开发者账号.或教育开发者账号的 iOS 开发者. 对于没有企业开发者账号(299$)的开发者来说,要想使用蒲公英将自己的应 ...
Android Binder学习的网站
1. Binder系列 http://gityuan.com/2015/10/31/binder-prepare/ 2. Binder机制 http://jcodecraeer.com/a/anzhu ...

CSS中的偏僻知识点