CSS选择器分类整理
读完《CSS权威指南》,对选择器有如下整理:
selector 本质上是执行元素样式匹配规则,我们可以利用它来限定某些元素
选择器类型:
<!-- 实体,即HTML中存在 -->
1.通配选择器 * 匹配任意
2.元素选择器 p
3.类选择器 .class
4.ID选择器 #id
5.属性选择器 element[rep] (不常用)
<!-- 虚体,即HTML本身不存在 -->
1.伪类(一些在某种行为会被自动定义的类,有点类似游览器会自动帮我管理这些内置类)
<!-- 表现 -->
1.link
2.visited
3.focus
4.hover
5.active
<!-- 结构 -->
1.first-child
2.last-child
3.nth-chlid(an+b)
4.not()
<!-- 内容 -->
1.empty
2.伪元素(向文档中插入的假想元素)
<!-- 表现 -->
before
after
选择器规则:
<!-- 选择器组合 -->
1.分组 逗号分隔(相同属性聚集)
2.交集
<!-- 文档结构 -->
1.后代选择器 空格
2.子代选择器 >
3.兄弟选择器 +
CSS选择器分类整理的更多相关文章
- css选择器分类
css选择器大致可以分为10大类: 1.元素选择器 如:p{} 2.类选择器 如:.xx{} 3.ID选择器 如:#xx{} 4.关联选择器 如:p a{} 5.子元素选择器 如:p>a{} 6 ...
- CSS选择器分类总结
一.选择器语法及其意义(pattern and meaning) Pattern Meaning CSS level E an element of type E 标记选择器,匹配所有标签名为E的元素 ...
- css选择器分类与作用
本文旨在总结css中各种选择器及其相应用途(持续更新) 通配符(全局)选择器 样式:*{} 示例: 总结:选定文档中所有类型的对象,如图所示写在css样式文件开头用来定义全局通用的一些属性.font- ...
- CSS选择器操作大全
一,CSS选择器分类 二,选择器语法 1,基本选择器语法 选择器 类型 功能描述 * 通配选择器 选择文档中所以HTML元素 E 元素选择器 选择指定类型的HTML元素 #id ID选择器 选 ...
- CSS选择器有哪些?选择器的优先级如何排序?
CSS选择器分类: CSS的选择器分类可以分为三大类:id选择器,类选择器,标签选择器. 用法如下: 选择器 e.g. 说明 id选择器 #id #header 选择id="header ...
- css选择器的分类及优先级计算方法总结
首先声明一下CSS三大特性—— 继承. 优先级和层叠.继承即子类元素继承父类的样式;优先级是指不同类别样式的权重比较;层叠是说当数量相同时,通过层叠(后者覆盖前者)的样式. css选择符分类 首先来看 ...
- css考核点整理(三)-css选择器的使用
css选择器的使用
- CSS选择器 + Xpath + 正则表达式整理(有空再整理)
选择器 例子 例子描述 CSS .class .intro 选择 class="intro" 的所有元素. 1 #id #firstname 选择 id="firstna ...
- 【笔记】CSS选择器整理(IE低版本支持性测试)
时间:2015.05.11 参考附件:css选择器.xmind(网友共享) 查看链接:http://www.w3school.com.cn/cssref/css_selectors.asp htt ...
随机推荐
- layui排序功能
后台常用功能之排序!!! 一次只能排一个序!!! 基本样式 <tr> <th>序号<span class="layui-table-sort layui-inl ...
- Linux操作USB手柄
Linux控制原理 Linux C控制JoyStick的比较简单,首先在JoyStick在Linux 安装好驱动后会在/dev/input生成js0.对其设备控制,就是读取相应的结构来判断用户输入哪一 ...
- Can't locate Math/Round.pm in @INC
遭遇报错: Can't locate Math/Round.pm in @INC 经过亲自测试,下面的命令解决了我的问题. yum install perl-Math-Round 参考资料 ===== ...
- ISO C语言新标准(C11)
新特性[2]有些和C++11是对应的,如线程和UTF-8: 对齐处理(Alignment)的标准化(包括_Alignas标志符,alignof运算符, aligned_alloc函数以及<std ...
- 解决 警告: [SetPropertiesRule]{Server/Service/Engine/Host/Context} Setting property 'source' to 'org.eclipse.jst.jee.server:reyo' did not find a matching property.
解决办法是:关闭tomcat,双击eclipse下tomcat服务器,在出来的Tomcat server at localhost页面中找到server options选项,选中其中的选项”Publi ...
- react的模型:react是如何工作的?
1.jsx:语法模型,语句构建模型: 2.组件:集合模型,组件管理: 3.vdom:分层模型.渲染管理模型: 4.flux:管道模型.数据模型,状态管理模型: 整体上是一个UI系统从上到下的构建: f ...
- Linux 笔记 - 第二十四章 配置 Tomcat
一.前言 Tomcat 是 Apache 软件基金会(Apache Software Foundation)Jakarta 项目中的核心项目,由 Apache.Sun 和其他一些公司及个人共同开发.使 ...
- 2019-09-17 thinkphp网页静态化
public function details(){ $pid = I('get.goods_id'); $filename = "details_".$pid.".ht ...
- JDK10、JDK11、JDK12新特性
JDK10新特性 1.var声明变量 很多人抱怨Java是一种强类型,需要引入大量的样板代码.甚至在这些情况下,给定好变量名,通常很清楚发生了什么,明显类型声明往往被认为是不必要的.许多流行的编程语言 ...
- css层叠规则(层叠样式表)
CSS层叠规则: 1.找出所有相关的规则,这些规则都包含与一个给定元素匹配的选择器. 2.按权重(!important)和来源对应用到给定元素的所有声明进行排序. 3.按特殊性对应用到给定元素的所有声 ...