2.1.3 多标签

  多标签选择器一般和html上下文有关,它有以下集中分类

  1. 选择一个祖先的所有子孙节点,例如 div p{…}
  2. 选择一个父元素的所有直属节点,例如 div > p{…}
  3. 选择某一个元素紧挨着的兄弟节点,例如 li + li{…}
  4. 选择某一个元素的所有同胞节点,例如 span ~ a{…}
  5. 以上各种情况的组合应用(不要组合过于复杂,编码讲求可读性第一)

  给大家列举一个比较典型的应用,如下图

  

  上图中的效果应该比较常见,在各个菜单之间加下划线。我之前的实现是:每个li都加一个border-bottom,在把最后一个li的border-bottom去掉。

  其实完全没必要这样麻烦,下面一个样式设置即可解决:

  

兄弟选择节点第一个li没选中,后面的都选中了

前面提到,为盒子模型设置宽度,结果只是设置了内容的宽度,这个不合理。如何解决这一问题?答案就是:box-sizing:border-box

  

  如上图,div设置了box-sizing:border-box之后,300px的宽度是内容 + border + 边框的宽度(不包括margin),这样就比较符合我们的实际要求了。

  建议大家在为系统写css时候,第一个样式是:

  大名鼎鼎的bootstrap也把box-sizing:border-box加入到它的 * 选择器中,我们为什么不这样做呢?

CSS中的各个选择节点,都有样式最后一个无样式的快捷解决方法的更多相关文章

  1. WPF:指定的命名连接在配置中找不到、非计划用于 EntityClient 提供程序或者无效的解决方法

    文/嶽永鹏 WPF 数据绑定中绑定到ENTITY,如果把数据文件做成一个类库,在UI文件中去应用它,可能遇到下面这种情况. 指定的命名连接在配置中找不到.非计划用于 EntityClient 提供程序 ...

  2. zend studio中ctrl+鼠标左键无法转到类或函数定义文件的解决方法

    转载自:http://blog.csdn.net/wide288/article/details/21622183 zend studio中ctrl+鼠标左键无法转到类或函数定义文件的解决方法: ze ...

  3. ExtJs4.2中Tab选项卡的右击关闭其它和关闭当前功能不准确的解决方法

    一.ExtJs4.2中Tab选项卡的右击关闭其它和关闭当前功能不准确的解决方法 二.找到ux目录下的TabCloseMenu.js文件,将内容替换成下面代码. 三.代码: /** * Plugin f ...

  4. Emacs中编辑保存makefile文件时会错误地将TAB转成空格的解决方法

    问题描述 我的Emacs使用了Purcell的配置,在其配置中使用了whitespace-cleanup,且通过在.emacs.d/lisp/init-edit-utils.el中设定: (requi ...

  5. Android开发中怎样用多进程、用多进程的好处、多进程的缺陷、解决方法(转)

    转自:http://blog.csdn.net/spencer_hale/article/details/54968092 1.怎样用多进程 Android多进程概念:一般情况下,一个应用程序就是一个 ...

  6. python中引入包的时候报错AttributeError: module 'sys' has no attribute 'setdefaultencoding'解决方法?

    python中引入包的时候报错:import unittestimport smtplibimport timeimport osimport sysimp.reload(sys)sys.setdef ...

  7. 网页中"IE限制网页访问脚本或ActiveX控件"的提示问题的解决方法

    以前从来没有注意过"IE限制网页访问脚本或ActiveX控件"的提示问题,对于这个小细节问题,虽然感觉很别扭,但一直没考虑解决方法,今天才发现该问题可以轻松解决,以下做个小小记录. ...

  8. iframe中使用模态框提交表单后,iframe加载父页面的解决方法

    在iframe中使用模态框提交表单后,会出现iframe加载整个父页面的问题,如下图: 解决方法: 在form表单中添加target属性 _parent 这个属性会使目标文档载入父窗口或者包含来超链接 ...

  9. Centos7.5中Nginx报错:nginx: [error] invalid PID number "" in "/run/nginx.pid" 解决方法

    服务器重启之后,执行 nginx -t 是OK的,然而在执行 nginx -s reload 的时候报错 nginx: [error] invalid PID number "" ...

随机推荐

  1. 关于使用"/"来 dispatcherServlet 的url-pattern带来的问题

    之前一直使用*.do来做的,但是绝的*.do很丑,于是就改用"/"来配置: <servlet> <servlet-name>dispatcherServle ...

  2. Web设计者和开发者必备的28个Chrome插件

    摘要 对于许多Web设计者和开发者来说,Firefox浏览器是无法超越的,对于其他人Chrome正在蚕食Firefox的浏览器市场. 在过去的两年,谷歌Chrome浏览器的发布以来,引起了人们激烈争论 ...

  3. php实现斐波那契数列以及由此引起的联想

    斐波那契数列(Fibonacci sequence),又称黄金分割数列.因数学家列昂纳多·斐波那契(Leonardoda Fibonacci)以兔子繁殖为例子而引入,故又称为“兔子数列”,指的是这样一 ...

  4. EncodingAESKey

    关键字:EncodingAESKey 公众平台消息体签名及加解密方案概述 1.新增消息体签名验证,用于公众平台和公众账号验证消息体的正确性 2.针对推送给微信公众账号的普通消息和事件消息,以及推送给设 ...

  5. Ubuntu 上安装 Freemind 并支持中文

    Ubuntu 上安装 Freemind 并支持中文 JAVA 运行时 Freemind 是一个使用 Java 编写的思维导图工具,在安装时,需要到 Java 运行时(使用 OpenJRE 或 Orac ...

  6. Ionic 小节

    教程 http://www.runoob.com/ionic/ionic-install.html 最后报错,发现是jdk版本过低,升级到8.0后正常 分析:nodejs.cordova.ionic. ...

  7. 什么是BI及哪些行业需要用到BI?

    什么是BI?哪些行业需要用到BI?BI——就是分析利用企业已有的各种商用数据来了解企业的经营状况和外部环境,从而为企业的经营决策提供数据支撑.下面我们来详细分解下: 企业应用BI的目标即是期望通过对来 ...

  8. PLSQL 申明和游标

    --从键盘输入一个数 accept b prompt '请输入一个大于零的数字'; declare anum number := &b; begin loop dbms_output.put_ ...

  9. js markdown chart flow

    http://knsv.github.io/mermaid/#example-of-a-marked-renderer

  10. Simple GDB case

    to be added...   gdb a.out   [Inferior 1 (process 9718) exited with code 05] (gdb) list Line number ...