【css 通用兄弟选择器( ~ )】的更多相关文章

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">…

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相邻兄弟选择器

今天在菜鸟教程看到了css组合选择符的“相邻兄弟选择器”,刚开始对这个概念有些不太理解,通过查阅资料并且经过一些试验总算有了些头绪. 原文解释是“相邻兄弟选择器(Adjacent sibling selector)可选择紧接在另一元素后的元素,且二者有相同父元素.如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以使用相邻兄弟选择器(Adjacent sibling selector).” 这里面有2个关键信息:(1)紧接在另一元素后:(2)二者有相同父元素 例子①: <!DOCT…

CSS 相邻兄弟选择器

相邻兄弟选择器(Adjacent sibling selector)可选择紧接在另一元素后的元素,且二者有相同父元素. 选择相邻兄弟 如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以使用相邻兄弟选择器(Adjacent sibling selector). 例如,如果要增加紧接在 h1 元素后出现的段落的上边距,可以这样写: h1 + p {margin-top:50px;} 这个选择器读作:“选择紧接在 h1 元素后出现的段落,h1 和 p 元素拥有共同的父元素”. 亲自试一…

CSS相邻兄弟选择器

相邻兄弟选择器定义:选择紧接在另一个元素后的元素,而且两者有着相同的父元素. 代码一:<body> <h1>This is a heading.</h1> <p>This is paragraph.</p> <p>This is paragraph.</p> <p>This is paragraph.</p> <p>This is paragraph.</p> <p&g…

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

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

CSS系列之后代选择器、子选择器和相邻兄弟选择器

后代选择器比子选择器的范围大,包含子选择器,且包含子选择器的“子孙”选择器,后代选择器使用"空格"符号间隔选择器 子选择器:子选择器只是父选择器的一级子元素,使用">"符号链接选择器 相邻兄弟选择器,是拥有相同父元素,且两个元素相邻,使用"+"符号链接 1. 后代选择器 比如如下html代码,em是h1的后代元素,如下css样式这样写,只会影响h1中的em标签的内容变为红色,不会影响p中em的内容 css: h1 em {color:red…

前端基础-CSS的各种选择器的特点以及CSS的三大特性

一. 基本选择器 二. 后代选择器.子元素选择器 三. 兄弟选择器 四. 交集选择器与并集选择器 五. 序列选择器 六. 属性选择器 七. 伪类选择器 八. 伪元素选择器 九. CSS三大特性 一. 基本选择器 1.id选择器 #1.作用: 根据指定的id名称,在当前界面中找到对应的唯一一个的标签,然后设置属性 #2.格式 id名称 { 属性:值; } #3.注意点: 1.在企业开发中如果仅仅只是为了设置样式,通常不会使用id,在前端开发中id通常是留给js使用的 2.每个标签都可以设置唯一一个…

CSS的六大选择器

选择器:选择器是一种模式,用于选择需要添加样式的元素. 首先简述六大选择器 基本选择器 标签选择器 类选择器 ID选择器 高级选择器 层次选择器 结构伪类选择器 属性选择器 其中基本选择器与层次选择器较为常用. 一.基本选择器 1.标签选择器 使用HTML标签来设置标签内的图文样式. 2.类选择器 使用class属性定义标签类值,指定某一类属性值来定义其样式.  <h1 class=”classname”></h1>  .classname{font-size:18px;} 3.I…

CSS中的选择器(笔记)

1.通配符选择器(*):通配符选择器是用来选择所有元素,也可以选择某个元素下的所有元素.所有浏览器都支持通配符选择器. ;;} .dome *{padding: 2px;} 2.元素选择器(Ele):元素选择器是css选择器中最常见而且最基本的选择器,元素选择器其实就是文档的元素,如html.body.div等.所有浏览器都支持元素选择器. li{color:#ddd;} 3.类选择器(.className):类选择器是以一独立于文档元素的方式来指定样式,使用类选择器之前需要保证在html标记中…