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. Vim使用小记（一）常用操作

    By francis_hao    Sep 22,2016 vim的功能自然不止如此,这里只是把日常使用频率较高的记录下来,若想了解vim的全部功能可查阅其帮助手册:help,或者查询指定命令的用法: ...

  2. [POI2006] OKR-period of words

    传送门 - > \(bzoj 1511\) 题目描述 A string is a finite sequence of lower-case (non-capital) letters of t ...

  3. c++虚析构函数的必要性

    我们知道,用C++开发的时候,用来做基类的类的析构函数一般都是虚函数. 可是,为什么要这样做呢?下面用一个小例子来说明: #include<iostream> using namespac ...

  4. linux下输出tomcat控制台信息

    进入tomcat/logs/目录执行命令:tail -f catalina.out即可

  5. hibernate连接oracle数据库

    前言:以下所有的操作都是基于你已经成功安装了oracle数据库并且java的开发环境正常的情况下进行的. 如果没有完善请先配置基础环境. 第一步:配置需要的环境(下载并导入需要的包). 下载链接:ht ...

  6. [洛谷P2124] 奶牛美容

    洛谷题目链接:奶牛美容 题目描述 输入输出格式 输入格式: 输出格式: 输入输出样例 输入样例#1: 6 16 ................ ..XXXX....XXX... ...XXXX... ...

  7. USACO_1.1_Your_Ride_Is_Here_(字符串+水题)

    描述 http://train.usaco.org/usacoprob2?a=y0SKxY0Kc2q&S=ride 给出两个由大写字母组成,长度不大于$6$的字符串. 将字符串中的各字母的字典 ...

  8. 【比赛】百度之星2017 初赛Round B

    第一题 题意:给定n*m网络,定义两个棋子在同行同列则相互攻击,同时要求两个棋子的行和列不能一小一大,求满足条件的最大摆放的方案数. 题解:ans=C(max(n,m),min(n,m)),就是在ma ...

  9. [bzoj3132]上帝造题的七分钟——二维树状数组

    题目大意 你需要实现一种数据结构,支援以下操作. 给一个矩阵的子矩阵的所有元素同时加一个数. 计算子矩阵和. 题解 一看这个题,我就首先想到用线段树套线段树做. 使用二维线段树的错误解法 其实是第一次 ...

  10. doxygen使用

    前言 下面主要讲解linux下Doxygen命令行实现html文档生成的操作,当然也有界面版本操作方式,linux下安装doxygen-gui即可通过doxywizard开启界面操作,windows下 ...