css选择器+、~、>
在css中,选择器是一种模式,用于选择需要添加样式的元素。它有多种选择器,我们看一下比较常见,但容易混淆的三个选择器+
、~
、>
A + B(相邻兄弟选择器)
定义:css2。 匹配B元素,满足条件:B是A的下一个兄弟节点(AB有相同的父结点,并且B紧跟在A的后面)。
A ~ B (通用兄弟选择器)
定义: css3。匹配B元素,满足条件:B是A之后的兄弟节点中的任意一个(AB有相同的父节点,B在A之后,但不一定是紧挨着A)
A > B (子选择器)
定义:css2。匹配B元素,满足条件:B是A的直接子节点。
" class="codepen">See the Pen CSS选择器+~&rt; by LiuwqGit (@weiqinl) on CodePen.
css选择器+、~、>的更多相关文章
- 前端极易被误导的css选择器权重计算及css内联样式的妙用技巧
记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...
- css选择器
常用css选择器,希望对大家有所帮助,不喜勿喷. 1.*:通用选择器 * { margin: 0; padding: 0; } 选择页面上的全部元素,通常用于清除浏览器默认样式,不推荐使用. 2.#i ...
- dynamic-css 动态 CSS 库,使得你可以借助 MVVM 模式动态生成和更新 css,从 js 事件和 css 选择器的苦海中脱离出来
dynamic-css 使得你可以借助 MVVM 模式动态生成和更新 css,从而将本插件到来之前,打散.嵌套在 js 中的修改样式的代码剥离出来.比如你要做元素跟随鼠标移动,或者根据滚动条位置的变化 ...
- CSS选择器的权重与优先规则?
我们做项目的时候,经常遇到样式层叠问题,被其他的样式覆盖,或者写的权重不高没效果,对权重没有具体的分析,做了一个总结. css继承是从一个元素向其后代元素传递属性值所采用的机制.确定应当向一个元素应用 ...
- css选择器的使用详解
-.css选择器的分类: 二.常用选择器详解: 1.标签选择器: 语法: 标签名 { 属性:属性值; } 代码示例: h1 { color: #ccc; font-size: 28px; } 2.类选 ...
- js,jq,css选择器
js获取节点: var chils= s.childNodes; //得到s的全部子节点 var par=s.parentNode; //得到s的父节点 var ns=s.nextSbiling; / ...
- CSS系列:CSS选择器
选择器(selector)是CSS中很重要的概念,所有HTML语言中的标记样式都是通过不同的CSS选择器来控制的.用户只需要通过选择对不同的HTML标签进行选择,并赋予各种样式声明,即可实现各种效果. ...
- 细说CSS选择器
众所周知,CSS的一个核心特征就是能向文档中的一组元素类型应用某些规则.每个规则都有两个基本部分:选择器(selector)和声明块(declaration block).下图显示了规则的各个部分. ...
- CSS选择器 转
来自于:http://www.cnblogs.com/webblog/archive/2009/08/07/1541005.html 最近在研究jQuery的选择器,大家知道jQuery的选择器和cs ...
- HTML5 -入门 (---css样式-------------(css基础与css选择器)---------------------—)
---恢复内容开始--- 一css基础入门与css选择器 CSS英文全拼:cascading style sheet 层叠样式表. 在html中使用:要在head中写style标签,所有样式放在sty ...
随机推荐
- win 10 dpi:150% 与 win 7 dpi:150% 的不同之处
由于 win 7 和 win 10 的 dpi 处理方式不同,导致我们写的客户端程序在 win 7 上运行正常,在 win 10(dpi:150%)上运行不正常了. 具体的描述,可参考:解决win10 ...
- python 黑魔法收集--已结
awesome python 中文大全 Fabric , pip, virtualenv 内建函数好文 awesome python 奇技淫巧 一句话求阶乘 from functools import ...
- SimMechanics/Second Generation倒立摆模型建立及初步仿真学习
笔者最近捣鼓Simulink,发现MATLAB的仿真模块真的十分强大,以前只是在命令窗口敲点代码,直到不小心敲入simulink,就一发不可收拾.话说simulink的模块化建模确实方便,只要拖拽框框 ...
- Kindle复活记
此前,2015年为了配合拆机堂的内容项目,我们将全新Kindle PaperWhite 3进行全球首拆,让网友们第一时间全面了解了Kindle PaperWhite 3的内部构造.但由于进行深度拆解, ...
- MySQL sum聚合函数
select sum(if(money > 0, money, 0)) as money from total_money 意思是如果money > 0, 将money的值累加到tot ...
- Luogu P4358 密钥破解 题解报告
题目传送门 [题目大意] 给定一个正整数N,可以被分解为两个不同的质数p和q,计算出r=(p-1)*(q-1). 然后给出了一个小于r且与r互质的整数e,已知e*d≡1(mod r),求d. 最后给定 ...
- python2x和python3的区别
1,源码的区别 py2x:源码比较混乱,重复代码较多,冗余 py3x: 源码崇尚优美,代码清晰简单 2,用户交互的区别: py2x:python2中input的到的数据类型为int型,Python2x ...
- day 19 - 1 模块
collections 模块 在内置数据类型(dict.list.set.tuple)的基础上,collections 模块还提供了几个额外的数据类型:Counter.deque.defaultdic ...
- request模块
一 介绍 二 基于GET请求 三 基于POST请求 四 响应Response 五 高级用法 一 介绍 # 介绍:使用requests可以模拟浏览器的请求,比起之前用到的urllib,requests模 ...
- 项目Alpha冲刺(团队)-第五天冲刺
格式描述 课程名称:软件工程1916|W(福州大学) 作业要求:项目Alpha冲刺(团队)-代码规范.冲刺任务与计划 团队名称:为了交项目干杯 作业目标:描述第五天冲刺的项目进展.问题困难.心得体会 ...