CSS中的偏僻知识点
一、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次! 浮动最初设计的目 ...
随机推荐
- 接口隔离原则(Interface Segregation Principle, ISP)
使用多个专门的接口,而不使用单一的总接口 接口隔离有两种定义: Clients should not be forced to depend upon interfaces that they don ...
- nexus私服常用设置
https://www.jianshu.com/p/7a09915675d9 或许用得上. settings.xml <server> <!-- 服务器密码 --> <i ...
- BZOJ1051 [HAOI2006]受欢迎的牛 Tarjan 强连通缩点
欢迎访问~原文出处——博客园-zhouzhendong 去博客园看该题解 题目传送门 - BZOJ1051 题意概括 有n只牛,有m个羡慕关系. 羡慕关系具有传递性. 如果A羡慕B,B羡慕C,那么我们 ...
- python开发环境PyCharm安转注册
0x1 ,安装 0x2 , 调整时间到2038年. 0x3 ,申请30天试用 0x4, 退出pycharm 0x5, 时间调整回来. ##注册方法2### 注册方法:在注册时选择 License se ...
- 第一章 Python入门
一. 语言 计算机语言:人和计算机之间沟通的语言计算机语言: 按照级别分类:(越高级月进阶人类) 机器语言: 汇编语言: 助记符 ag. add 2 3 高级语言: c, PHP, java , .n ...
- HTTP协议学习笔记（二）
HTTP协议学习笔记(二) 1.HTTP报文 HTTP报文:用于HTTP协议交互的信息.请求报文:请求端(客户端)的HTTP报文叫做请求报文.响应报文:响应端(服务端)的HTTP报文叫做响应报文. H ...
- 002.Docker安装部署
一 docker安装-CentOS系统 1.1 docker自动安装脚本 root@docker:~# wget -qO- https://get.docker.com/ | sh 或—— root@ ...
- 【*】CAS 是什么,Java8是如何优化 CAS 的
文章结构 前言 想要读懂 Java 中的并发包,就是要先读懂 CAS 机制,因为 CAS 是并发包的底层实现原理.本文主要讨论 CAS 是如何保证操作的原子性的 Java8 对 CAS 进行了哪些 ...
- ruby那些事儿
为了学习sass,客串一下ruby,这是一个破案的过程,探索的过程. Ruby是日本人发明的一种类似于Python和Perl的服务器端脚本语言,它完全面向对象,适合于快速开发,一般开发效率是java的 ...
- C#获得窗口控件句柄
/*整个Windows编程的基础.一个句柄是指使用的一个唯一的整数值,即一个4字节(64位程序中为8字节)长的数值,来标识应用程序中的不同对象和同类中的不同的实例,诸如,一个窗口,按钮,图标,滚动条, ...