CSS选择符——分门别类

有时候，老是会对一些CSS选择器模模糊糊，傻傻分不清。今天花了点时间整理了一下，感觉世界清静了不少。

用XMIND做出了思维导图：

主要有11中选择器：元素、类ID、后代、子选择器、同辈选择器、通用选择器、属性选择器、伪类、结构化伪类、伪元素、表单伪类。

总结

其实CSS选择器也没什么需要记住的，多用自然会熟悉。经常不用才会忘记。主要是CSS选择器的伪类和伪元素为CSS提供了更多操作性。比如::before和::after，可以添加元素，而不用多余写HTML标记。

CSS选择符——分门别类的更多相关文章

  1. 30个你必须记住的CSS选择符

    所以你学会了基础的id,类和后代选择符,然后你就一直用它们了吗?如果是这样,你丢失了(css的)巨大的灵活性.在本文中提到的很多选择器属于CSS3规范的一部分,因此,只有在现代浏览器中才可使用. 1. ...

  2. CSS选择符详解

    一.类型选择符 什么是类型选择符?指以网页中已有的标签类型作为名称的行径符.body是网页中的一个标签类型,div,p,span都是. 如下: body {} div {} p {} span {} ...

  3. 编写高效的CSS选择符（节选）

    最右边优先 css选择符是从右向左进行匹配的. 样式系统从最右边的选择符开始向左匹配规则.只要当前的选择符的左边还有其他选择符,样式系统就会继续向左移动,直到找到和匹配的元素,或者因为不匹配而退出. ...

  4. JQuery学习笔记【CSS选择符】--02

    Jquery的程序入口: <html> <head> <title></title> <script type="text/javasc ...

  5. CSS选择符详解之关系选择符篇

    原文:http://www.chinaz.com/web/2012/1017/278553.shtml 相信大家都对CSS选择符都不陌生,选择符包含:元素选择符.关系选择符.属性选择符.伪类选择符.伪 ...

  6. 整理CSS选择符

    1.星号选择器 ;; } 星号选择器将匹配页面里的每一个元素.很多开发者使用这个技巧将外边距和内边距重置为零.虽然在快速测试时这确实很好用,但我建议你永远不要再生产代码中使用它.它给浏览器带来大量不必 ...

  7. [css选择器]总结：IE6不支持的CSS选择符

    转载地址:https://www.wenjiwu.com/doc/zvsbii.html.此文最后也给出了原文地址,但是我点击过去发现是什么赌博彩票的地址,360也弹出小心的提示,所以这里只给出了我转 ...

  8. css选择符权重

    css选择符权重 目录 css选择符权重 css选择器权重列表 CSS选择符冲突处理 css选择符权重 css选择器权重列表 选择器 权重 内联样式 1000 ID 0100 CLASS 0010 属 ...

  9. CSS选择符、属性继承、优先级算法以及CSS3新增伪类、新特性

    CSS 选择符有哪些?哪些属性可以继承?优先级算法如何计算? CSS3新增伪类有那些?CSS新增了哪些特性?下面我整理了一些,仅供参考. CSS 选择符: 1)      id选择器(# myid) ...

随机推荐

  1. [bzoj4832][Lydsy1704月赛]抵制克苏恩

    题目大意:有一个英雄和若干个所从,克苏恩会攻击$K$次,每次回随机攻击对方的一个人,造成$1$的伤害.现在对方有一名克苏恩,你有一些随从.如果克苏恩攻击了你的一名随从,若这名随从不死且你的随从数量不到 ...

  2. 洛谷P1346 电车

    P1346 电车 236通过 757提交 题目提供者yeszy 标签图论福建省历届夏令营 难度普及/提高- 提交该题 讨论 题解 记录 最新讨论 解不好啊,快疯了!!哪位大… 求解:为何除了-1的点之 ...

  3. greendao的基本操作

    1.先配置项目的builder.gradle // Top-level build file where you can add configuration options common to all ...

  4. PushState+Ajax 完美实现无刷新

    转载自:http://lazynight.me/1897.html 折腾一下PJAX,利用HTML5的新API,实现历史记录的完美导入. 不知道你用没用过Github,里边的目录跳转就是用html5的 ...

  5. Spring学习--HelloWorld

    Spring: Spring 是一个开源框架. Spring 是为简化企业级应用开发而生,使用 Spring 可以使简单的 JavaBean 实现以前只有 EJB 才能实现的功能. Spring 是一 ...

  6. Spring--环境配置

    目录 1.1 Spring jar包下载 1.2 Hello World 参考资料 1.1 Spring jar包下载 (1)进入官网http://repo.spring.io(或者 http://m ...

  7. 51nod1031(简单斐波拉契数列)

    题目链接:https://www.51nod.com/onlineJudge/questionCode.html#!problemId=1031 题意:中文题诶- 思路:对于第x块骨牌的情况,我们用a ...

  8. 「6月雅礼集训 2017 Day2」C

    [题目大意] 有一棵n个点的完全二叉树,边权均为1,每个点有小鸟容量c[i] 依次来了m只小鸟,第i只小鸟初始位置在pos[i]上,问来了x只小鸟的时候,怎样安排小鸟的路线可以使得小鸟移动的边权和最小 ...

  9. 1211笔记关于//modal//更改窗口的根控制器//数据存取//Plist属性列表//-“沙盒机制”//plis属性列表//偏好设置//归档普通对象//联系人数据存储//协议与回调函数

    一.利用Modal形式展示控制器 1.如何展示// vc就是要展示的新控制器[self presentViewController:vc animated:YES completion:^{    N ...

  10. [bzoj2152]聪聪可可——点分治

    Brief Descirption 给定一棵带权树,您需要统计路径长度为3的倍数的路径长度 Algorithm Analyse 点分治. 考察经过重心的路径.统计出所有deep,统计即可. Code ...