css3属性选择器 “~”(波浪号) “,”(逗号) “+”(加号)和 “>”(大于号)


Posted in HTML / CSS onApril 19, 2022

css中“>”是:

css3特有的选择器,A .B 表示选择A元素的所有子B元素

与A B的区别在于,A B选择所有后代元素,而A>B只选择一代

 .a,.b{逗号指相同的css样式};.a .b{空格指后代元素};.a>.b{大于号指子代元素}

css中“+”是:

A+B{}这个+是选择相邻兄弟,称作“相邻兄弟选择器”

A+B表示HTML中紧随A的B元素(必须紧跟A后面,A前面无效):用一个结合符只能选择两个相邻兄弟中的第二个元素,而且二者有相同的父元素,可以使用相邻兄弟选择器,例如,如果要增加紧接在 h1 元素后出现的段落的上边距,可以这样写:

h1 + p {margin-top:50px;}

这个选择器读作:“选择紧接在 h1 元素后出现的段落,h1 和 p 元素拥有共同的父元素”

css中“~”是:

为所有相同的父元素中位于 p 元素之后的所有 ul 元素设置背景:

p~ul{
    background:#333;
}

 <p>快乐生活</p>

<ul>

  <li>生活</li>

  <li>生活</li>

  <li>生活</li>

</ul>

p~ul 选择前面有 <p> 元素的每个 <ul> 元素。

定义和用法

p~ul选择器 p之后出现的所有ul。

两种元素必须拥有相同的父元素,但是 ul不必直接紧随 p。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>css属性选择器</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<style>
p{
	height: 30px;
	border: 1px solid #000;
}
p[miao|=e]{background: pink};
/*自定义属性 <p miao="bbb xc">b</p>  、input[type=submit]*/
/* E[attr]只使用属性名,但没有任何属性值(自定义属性)
	p[miao]{background: red};

   E[attr="value"]指定属性名,并指定了该属性的属性值
	p[miao=bbb]{background: red};推荐

	E[attr~="value"]指定属性名,E和attr相同(标签和属性一样的元素、无论包含与否上下级关系)、
	并且元素属性值包含value的,~一定要加 例:input:checked ~.content 下面的div class="content"里的所有内容
	p[miao~=old]{background: red}; 推荐

	E[attr^="value"]指定了属性名,并且有属性值,属性值以value开头的(第一个开头字母)
	p[miao^=a]{background: pink};

	E[attr$="value"]指定属性名,并且有属性值,以value结束的(值的最后一个字母)
	p[miao$=h]{background: pink};

	E[attr*="value"]指定属性名,并且有属性值,而且属性值包含了value
	p[miao*=c]{background: pink};下面值中只要包含了c字母的都是粉色 推荐

	E[attr|="value"]指定了属性名,并且属性值是value或者以"value-"开头的值
	p[miao|=e]{background: pink};指定的是值为 e带-的所有

	input:checked+span {/*等于checked~span E~F表示E毗邻下、
	后面的所有F元素 加号表示input下面一个兄弟节点
	background: red;}
 */

</style>
</head>
<body>
  <p miao="aaa old">a</p>
  <p miao="bbbc">b</p>
  <p miao="ccc">c</p>
  <p miao="d-ddh">d</p>
  <p miao="e-xm">e</p>
  <label>
  	<input type="radio" name="tab"/>
  	<span></span>
  </label>
</body>
</html>
HTML / CSS 相关文章推荐
CSS3中的元素过渡属性transition示例详解
Nov 30 HTML / CSS
css3弹性盒模型实例介绍
May 27 HTML / CSS
CSS3径向渐变之大鱼吃小鱼之孤单的大鱼
Apr 26 HTML / CSS
利用CSS3的border-radius绘制太极及爱心图案示例
May 17 HTML / CSS
CSS3实现10种Loading效果
Jul 11 HTML / CSS
css3编写浏览器背景渐变背景色的方法
Mar 05 HTML / CSS
CSS3实现文字描边的2种方法(小结)
Feb 14 HTML / CSS
利用html5 canvas动态画饼状图的示例代码
Apr 02 HTML / CSS
HTML5 Web Database 数据库的SQL语句的使用方法
Dec 09 HTML / CSS
HTML5资源预加载(Link prefetch)详细介绍(给你的网页加速)
May 07 HTML / CSS
详解html5 postMessage解决跨域通信的问题
Aug 17 HTML / CSS
详解CSS3浏览器兼容
Dec 24 HTML / CSS
开发微信小程序之WXSS样式教程
Apr 18 #HTML / CSS
CSS中float高度塌陷问题的四种解决方案
Apr 18 #HTML / CSS
HTML5基础学习之文本标签控制
Mar 25 #HTML / CSS
CSS实现渐变色边框(Gradient borders)的5种方法
Mar 25 #HTML / CSS
关于CSS自定义属性与前端页面的主题切换问题
flex弹性布局详解
HTML常用标签超详细整理
Mar 19 #HTML / CSS
You might like
PHP中将网页导出为Word文档的代码
2012/05/25 PHP
PHP后期静态绑定之self::限制实例分析
2018/12/21 PHP
php学习笔记之字符串常见操作总结
2019/07/16 PHP
php设计模式之抽象工厂模式分析【星际争霸游戏案例】
2020/01/23 PHP
jQuery 位置插件
2008/12/25 Javascript
jquery png 透明解决方案(推荐)
2010/08/21 Javascript
Windows 系统下安装和部署Egret的开发环境
2014/07/31 Javascript
js实现遍历含有input的table实例
2015/12/07 Javascript
jQuery中事件与动画的总结分享
2016/05/24 Javascript
jQuery属性选择器用法示例
2016/09/09 Javascript
微信小程序 地图(map)实例详解
2016/11/16 Javascript
利用JavaScript实现拖拽改变元素大小
2016/12/14 Javascript
webpack打包后直接访问页面图片路径错误的解决方法
2017/06/17 Javascript
ES6模块化的import和export用法方法总结
2017/08/08 Javascript
JavaScript 数组的进化与性能分析
2017/09/18 Javascript
vue.js删除列表中的一行
2018/06/30 Javascript
js计算两个日期间的天数月的实例代码
2018/09/20 Javascript
typescript nodejs 依赖注入实现方法代码详解
2019/07/21 NodeJs
[01:12]DOTA2次级职业联赛 - Newbee.Y 战队宣传片
2014/12/01 DOTA
python返回昨天日期的方法
2015/05/13 Python
使用Python写CUDA程序的方法
2017/03/27 Python
详解如何使用Python编写vim插件
2017/11/28 Python
django认证系统实现自定义权限管理的方法
2018/07/16 Python
Windows系统Python直接调用C++ DLL的方法
2019/08/01 Python
PyQt5结合matplotlib绘图的实现示例
2020/09/15 Python
python绘制趋势图的示例
2020/09/17 Python
【HTML5】Canvas绘制简单图片教程
2016/05/13 HTML / CSS
华润集团网上药店:健一网
2016/09/19 全球购物
京东全球售:直邮香港,澳门,台湾,美国,澳大利亚等地区
2017/09/24 全球购物
台湾最大网路书店:博客来
2018/03/18 全球购物
重新定义牛仔布,100美元以下:Warp + Weft
2018/07/25 全球购物
be2台湾单身男女交友:全球网路婚姻介绍的领导品牌
2019/10/11 全球购物
2019史上最全Database工程师题库
2015/12/06 面试题
2014村务公开实施方案
2014/02/25 职场文书
2015年度电厂个人工作总结
2015/05/13 职场文书
解决Maven项目中 Invalid bound statement 无效的绑定问题
2021/06/15 Java/Android