有人说类选择器最好不要超过三层,其实我也是这样认为的,不是吗?

选择器分为四大类

标签、全选(相对于子类继承了0.1)、类、ID

权值分别是:1->0.1->10->100(权值可叠加),权值大的会覆盖小的

还有一个最大权值:!important

增加权值栗子

标签(也就是浏览器初始化的默认类了):

body,html,span....

* 全选:

相信很多人,都看到了 “全选”吧?

很多网页一开头就是这样的(好像腾讯和几大巨头,都自定了样式,俗称reset,css), 之所以全选会对所有样式进行初始化

难道只能这样写吗?

no,我们可以指定类名或ID

box-father 指定了它以下的元素都有它的样式(子承父业)

只要子想改行了(margin-top),父是没有权利去管它的

也就是说只要box定义了相同的样式,那么box-father定义的即无效!

. 类选择器

如果我要找.box-sin ,只有这样找吗?

.box-father .box .box-sin

no,其实我们可以简写为

1. .box-sin

2. .box-father .box-sin 

第一个,是指全局所有的.box-sin

第二个,是指.box-father下面的.box-sin

# ID选择器:

通常一般用来JavaScript操作,一般不滥用!

css3 - 基本选择器的更多相关文章

  1. CSS系列:CSS3新增选择器

    1. CSS1定义的选择器 选择器 类型 说明 E 类型选择器 选择指定类型的元素 E#id ID选择器 选择匹配E的元素,且匹配元素的id为“id”,E选择符可以省略. E.class 类选择器 选 ...

  2. CSS3常用选择器(三)

    在CSS3的选择器中,除了结构性伪类选择器外,还有一种UI元素状态伪类选择器.这些选择器的共同特征: 指定的样式只有当元素处于某种状态时才起作用,在默认状态下不起作用. 1.hover.focus.a ...

  3. CSS3 ::selection选择器

    一.介绍 之前看到有些网站选中内容的颜色和背景色都不是平时看到的蓝色和白色.今天有兴趣查看了一下,原来是一个很简单的CSS3的选择器::selection的用法. 上例子: <style> ...

  4. CSS3属性选择器与(:not)选择器

    一:css3属性选择器: img[alt]{ border:2px dashed #000; } 这个选择器会匹配页面标签中任何一个含有alt属性的图片标签.   还可以通过设定属性值来缩小匹配范围: ...

  5. 【前端开发系列】—— CSS3属性选择器总结

    想想自己为什么要学CSS,作为一个开发过前端的人员来说,调试一个图片花了半天的时间,最后发现分隔符用错了,实在是一件很丢人的事情.因此,痛下决心来学习CSS,最近一周也会更新下相关的学习笔记. CSS ...

  6. CSS3之选择器

    总结了下CSS3新增的一些选择器. CSS3的选择器有基本选择器.属性选择器.伪类选择器几类. CSS3选择器 选择器 举例 例子描述 element1~element2 p~a 选择前面有 < ...

  7. CSS3 :nth-child() 选择器

    CSS3 :nth-child() 选择器 代码: <!DOCTYPE html> <html> <head> <style> p:nth-child( ...

  8. css3属性选择器总结

    前两节介绍了css3属性选择器与css2属性选择器中: 包含字符串和以字符串选择器开头的选择器的比较. 全部属性选择器: 包含字符串讲解对比实例讲解链接: http://www.cnblogs.com ...

  9. CSS3选择器02—CSS3部分选择器

    该部分主要为CSS3新增的选择器 接上一篇 CSS(CSS3)选择器(1) 一.通用兄弟选择器: 24:E ~ F,匹配任何E元素之后的同级F元素. div ~ p{ background-color ...

  10. 笔记:css3伪选择器改变滚动条样式

    现在我打开支持前缀-webkit-的浏览器,也就是说只要支持前缀为-webkit-的浏览器才有效果 <!doctype html> <html lang="en" ...

随机推荐

  1. 如何打造一个"逼格"的web前端项目

    最近利用空余的时间(坐公交车看教程视频),重新了解了前后端分离,前端工程化等概念学习,思考如何打造一个“逼格”的web前端项目. 前端准备篇 前端代码规范:制定前端开发代码规范文档. PS:重中之中, ...

  2. Leetcode4--->求两个排序数组的中位数

    题目:给定两个排序数组,求两个排序数组的中位数,要求时间复杂度为O(log(m+n)) 举例: Example 1: nums1 = [1, 3] nums2 = [2] The median is ...

  3. acm之图论基础

    1.图的定义 图 是一个顶点集合V和一个顶点间关系的集合E组成,记G=(V,E) V:顶点的有限非空集合. E:顶点间关系的有限集合(边集). 存在一个结点v,可能含有多个前驱节点和后继结点. 1顶点 ...

  4. 【java基础 15】java代码中“==”和equals的区别

    导读:昨夜闲来无事,和贾姑娘聊了聊java基础,然后就说到了这个"=="和equals的问题,我俩都是以前了解过,也常用这个,但是,昨天说到的时候,又乱了,什么比较地址值,什么判断 ...

  5. 九度oj 题目1475:IP数据包解析

    题目描述: 我们都学习过计算机网络,知道网络层IP协议数据包的头部格式如下: 其中IHL表示IP头的长度,单位是4字节:总长表示整个数据包的长度,单位是1字节. 传输层的TCP协议数据段的头部格式如下 ...

  6. 图标字体iconfont的使用

    什么是iconfont? iconfont就是字面上的意思,叫做"字体图标",将一套图标集以字体文件的形式封装,并通过 CSS 的 @font-face 作为 Web Font 调 ...

  7. html body width height 100%使用

    首先我们来看一个实际的问题,让body中的一个div占全屏,(问题来源:http://stackoverflow.com/questions/1575141/make-div-100-height-o ...

  8. 学习的一些mybatis

    MyBatis入门基础(一) 阅读目录 一:对原生态JDBC问题的总结 二:MyBatis框架 三:mybatis入门程序 四:mybatis和Hibernate的本质区别与应用场景 五:小结 回到顶 ...

  9. [转] Makefile 基础 (4) —— Makefile 书写命令

    该篇文章为转载,是对原作者系列文章的总汇加上标注. 支持原创,请移步陈浩大神博客:(最原始版本) http://blog.csdn.net/haoel/article/details/2886 我转自 ...

  10. SharePoint 2013 App 开发—SharePoint Hosted方式,

    这篇文章会依据简单的Demo,介绍一下SharePoint Hosted 方式开发App 的步骤和说明. 这种方式的环境相比较Office 365 要麻烦一些,如果不可以连接到Internet 或者还 ...