css3 子元素的的应用 注意点
已经第二次犯错误,不允许有下次
<ul class="ul">
<li>
<a>哈哈</a>
</li>
<li>
<a>嘿嘿</a>
</li>
<li>
<a>呵呵</a>
</li>
</ul>
需求:除了最后一个a元素,其他a元素都要下边框。
错误写法:
.ul li a:not(:last-child){
border-bottom:1px solid #e4e4e4;
}
↑↑以为自己选择的是第三个a。其实是每个li里面的a。
正确写法:
.ul li:not(:last-child) a{
border:1px solid #e4e4e4;
}
↑↑↑这就是选择除了最后一个li里面的a之外的所有li里面的a。bingo
css3 子元素的的应用 注意点的更多相关文章
- 给div设置background-color: rgba(0, 0, 0, 0.2)属性,并加了css3动画--opacity动画淡出动画,之后div子元素的字体会抖一下
问题:给div设置background-color: rgba(0, 0, 0, 0.2)属性,并加了css3动画--opacity动画淡出动画,之后div子元素的字体会抖一下: 解决:animati ...
- CSS3可伸缩框属性,可用于等分显示子元素或按比例显示子元素的大小
使用方法跟Android的android:layout_weight属性类似.可类比Android中的使用方法.这样比較好记,因为眼下全部浏览器都不支持大部分的属性,所以全部的属性都须要加上Firef ...
- CSS3 04. 伸缩布局、设置主轴,侧轴方向、主/侧轴对齐方式、 伸缩比例、元素换行、换行控制、覆盖父元素的align-items;控制子元素顺序、web字体、突变字体
CSS3 在布局方面做了非常大的改进,对块级元素的布局排列变得十分灵活,适应性非常强,其强大的伸缩性,在响应式开发中可以发挥极大的作用.(兼容性不好) 必要元素: 指定一个盒子为伸缩盒子 displa ...
- 兼容性背景颜色半透明CSS代码(不影响内部子元素)
如何简单兼容性的实现父元素是半透明背景色,而子元素不受影响. 兼容所有浏览器的背景颜色半透明CSS代码: background-color: rgba(, , , .); filter: progid ...
- 关于opacity透明度子元素继承现象的若干研究以及hack方法
[感想]信息时代的信息是有时效性的,今天是确确实实感受到了.互联网资料虽然丰富,但是质量不一,还有大量的跟风雷同,很多人都是随手拷贝过来,根本没有实践.以前端为例,这两年浏览器的迅猛发展,造成很多原有 ...
- CSS 实现:父元素包含子元素,子元素垂直居中布局
☊[实现要求]:父元素包含子元素,子元素垂直居中布局 <div class="demo5"> <div class="child">A& ...
- 解决 border-radius 元素在应用了 transform 的子元素 时overflow:hidden 失效的问题
受大家启迪,于是最近深入研究了一下Css3中的一些属性.之中也是碰到了个不为我知的问题,在这里特此总结并与大家分享. 问题重现:在父元素上应用了 border-radius 的圆角属性.加上 ove ...
- CSS3控制元素排列
需求: 将改变为. 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...
- css 文字和子元素水平垂直居中
关于水平垂直居中,这是一个很简单的问题,但是很多时候,往往简单的东西,反而做不出来.这就是基础不扎实的缘故吧,我参照一些资料,总结了水平垂直居中的几种方法如下: 1 .文字水平垂直居中 这个比较简单, ...
随机推荐
- javascript判断input框只能输入数字的方法
javascript 只允许输入数字有很多方法,总结如下 1,只允许输入数字和小数点. <input onKeypress="return (/[\d.]/.test(String.f ...
- gRPC框架
https://blog.csdn.net/shuanger_/article/details/47281381 https://grpc.io/ gRPC是利用通讯协议是HTTP2,序列化用prot ...
- is 和 == 区别
== 和 is 的区别 == 比较 比较的是两个值 适用于 列表a = '[1:2]'b = '[1:2]'print(a == b) #True 字典a = '{1,2,3}'b = '{ ...
- [转]Using the HTML5 and jQuery UI Datepicker Popup Calendar with ASP.NET MVC - Part 4
本文转自:http://www.asp.net/mvc/overview/older-versions/using-the-html5-and-jquery-ui-datepicker-popup-c ...
- firefox插件-自动化测试工具-selenium IDE
教程:http://www.yiibai.com/selenium/selenium_download_ide.html 下载地址:https://addons.mozilla.org/en-US/f ...
- 【转】Android事件分发机制完全解析,带你从源码的角度彻底理解(下)
转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/9153761 记得在前面的文章中,我带大家一起从源码的角度分析了Android中Vi ...
- java实现汉字转为拼音
java实现汉字转为拼音: 1.需要导入pinyin4j.jar package com.loo.pinyin; import net.sourceforge.pinyin4j.PinyinHelpe ...
- 《Google软件测试之道》之学习笔记01
Google软件测试介绍 软件测试团队->工程生产力(Engineering Productivity) http://googletesting.blogspot.com/2011/01/ho ...
- WinRAR(WinZip)压缩与解压实现(C#版Window平台)
本文的原理是借助Windows平台安装的WinRAR(WinZip)实现C#程序的调用(注:WinRAR压缩解压WinZip同样适用). 先来看WinRAR(WinZip)自身的支持调用命令: 压缩命 ...
- Redis数据类型(字符串)
Redis存放的字符串为二进制是安全的.字符串长度支持到512M. incr 递增数字INCR key 当存储的字符串是整数时,redis提供了一个实用的命令INCR,其作用是让当前键值递增,并返回递 ...