【04.CSS选择器-->相邻、通用兄弟选择器】的更多相关文章

04.CSS选择器-->相邻、通用兄弟选择器

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> /*相邻兄弟选择器*/ /*h1 + p{ color: red; }*/ /*通用兄弟选择器*/ h1 ~ p{ color: red; } </style> <title>相邻兄弟选择器,通用兄弟选择器</title> <…

css 通用兄弟选择器( ~ )

stylus设置兄弟元素样式: 鼠标浮动在 .video-li 元素上时,.video-li 兄弟中 .video-info 下的 .word 显示. .video-li &:hover ~ .video-info .word visibility visible 设置 h1 兄弟元素中,class 为 p1 的元素样式: <!DOCTYPE HTML> <html> <head> <style type="text/css">…

css兄弟选择器，+ ~选择器的区别

 壹 ❀ 引 实习生在写搜索框下拉提示时,遇到了不知道怎么解决的问题,所以来问我.效果不难,鼠标选中输入框(focus)时,展示搜索关键字相关提示,看了眼dom结构是这样的: 在她的理解里面,选中父元素可以操控子元素样式,而此时输入框和下拉框是兄弟关系,所以难住了,听到这里我不假思索说了句,用兄弟选择器.  贰 ❀ 兄弟选择器 1.相邻兄弟选择器+ +表示相邻兄弟选择器,例如h3+p表示选中每个h1之后同级(相同父级)且紧接其后的第一个p元素:我们来看看效果: h3+p{ background:…

使用CSS兄弟选择器完成复杂垂直边距（vertical margins）的设计

-------------------sibling选择器如何在完成复杂设计要求的同时,保持CSS可读 这是web前端开发过程中开始简单逐步变的复杂的例子之一:将一篇文章中的所有元素应用垂直边距(vertical margins),例如由复杂markdown编译来的博客文章. 大多数情况下,你必须要处理很多例外和相关,比如:标题和图片上下通常需要更多空白,但是如果两个图片上下挨着,那两图间空白就改变少.h2标签和h3标签直接的距离要比两个h2之间要小. 当原作者几年前刚开始做前端的时候,所有这些…

CSS选择器之兄弟选择器（~和+）

今天在改以以前人家写的网页的样式的时候,碰到这个选择器,‘~’,当时我是懵逼的,傻傻分不清 ‘+’ 跟 ‘~’的区别,虽然我知道他们都是兄弟选择器. 后来网上查了下,也许是我查找的方式不对,没有找到我想要的答案,于是私下拿这两个选择器来测试了一下.发现原来是这样的. 先来代码说话: (1).‘~’选择器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"…

Day5 CSS基本样式和C3选择器

Day5 CSS基本样式和C3选择器 一.背景属性 1.背景颜色            background-color:transparent(默认值,透明); 颜色的取值:            1)关键字  red,blue,yellow...            2)十六进制  #ffffff :白色   #000000:黑色  #cccccc  #dddddd  #333333   #666666  #999999:灰色                         #fff   …

CSS选择器有哪些？选择器的优先级如何排序？

CSS选择器分类: CSS的选择器分类可以分为三大类:id选择器,类选择器,标签选择器. 用法如下: 选择器   e.g. 说明 id选择器 #id #header 选择id="header"的所有元素 类选择器 .class .message 选择class="message"的所有元素 标签选择器 el div 选择所有的div元素 其中他们又可以以不同的方式进行组合,如下: 选择器   e.g. 说明 后代选择器 el el div p 选择div元素内部的所…

第49天学习打卡（CSS 层次选择器 结构伪类选择器 属性选择器 美化网页元素 盒子模型）

推荐书籍:码出高效: Java 开发手册 2.2 层次选择器 idea里代码规范是按:ctrl +alt+L快捷键 注释快捷键:ctrl+/ 1.后代选择器:在某个元素的后面 祖爷爷 爷爷 爸爸 你 <style> /*p{*/ /* background: #02ff00;*/ /*}*/ /* 后代选择器 */ body p{ background: red; } </style> 2.子选择器: 只有一代 ,儿子 /* 子选择器*/ body>p{ background…

兄弟选择器 E + F

兄弟选择器在IE7下支持会有bug,特记于此 如果兄弟选择器有Html注释,兄弟选择器在IE7下会失效  代码如下 E + Fp + p{color:red} <p class="test1">some message 01</p> <p class="test2">some message 02</p> <p class="test3">some message 03</p>…

HTML连载20-并集选择器&兄弟选择器

一.并集选择器 1.作用:给所有的选择器选中的标签设置属性. 2.格式: 选择器1,选择器2{ 属性:值: } 3.例如: .abc1,#abc2{ color:red; } .......省略代码....... <p class="abc1">并集1</p> <p id="abc2">并集2</p> 4.注:支持多个标签取并集,中间用逗号连接就行.上一节中交集选择器也可以取多个交集 二.兄弟选择器 1.相邻兄弟选择器…