css选择器后面的兄弟元素

CSS 相邻兄弟选择器

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

使用CSS选择器定位页面元素

摘录:http://blog.csdn.net/defectfinder/article/details/51734690 CSS选择器也是一个非常好用的定位元素的方法,甚至比Xpath强大.在自动化里我们用CSS选择器来定位页面元素一定要牢记一个准则:唯一定位,通常使用CSS选择器修改样式时会尽量多的选择元素,但是,在自动化里,必须要唯一定位到元素,否则自动化很可能因为找不到页面元素而失败.CSS选择器有很多,像标签选择器.类选择器.ID选择器.关系选择器.伪类选择器.分组选择器等等,但是只需

CSS选择器小结

在CSS3中是提倡使用选择器来将样式与元素直接绑定在一起的. 网页开发过程中,我们需要定义很多class来应用到不同的元素上,由于class本身是没有语义而且是可以复用的,所以过度使用class会使得整个样式表结构非常混乱.为了减少class的使用频度,需要尽可能的使用选择器来指定元素.而且使用选择器还可以定义很多规则,这样也可以减少重复定义class的代码量. 在CSS3中,主要有以下几种选择器:属性选择器.结构性选择器.UI状态选择器.通用兄弟元素选择器.下面分别介绍一下: (一)属性选择器

CSS选择器介绍

一.元素选择器 E{...} 二.属性选择器 E[attr]{...}:指定该CSS对具有attr的元素起作用: E[attr=value]{...}::指定该CSS对具有attr的值为value的元素起作用: E[attr~=value]{...}:指定该CSS对具有attr属性,且属性值以逗号分隔,属性值中有value的元素起作用: E[attr|=value]{...}:指定该CSS对具有attr属性,且属性值以连字符分割,第一个属性值为value的元素起作用: E[attr^="valu

jQuery选择器与CSS选择器

1. 通过位置选择的几个操作: :first:默认情况下是相对整个页面来说的第一个,如:li:first表示整个页面的第一个li元素,而ul li:first表示整个页面的第一个li元素,并且是在ul下的子元素: :last:同上了,只是是最后一个而已: :first- child:为每个父元素匹配第一个子元素,如li:first-child返回每个ul的第一个li元素.可以这样理解,页面中的元素有相同的父元素的,并且里面又包含li元素的,那么就取第一个li元素,每个子类集合都要进行判断,直到

CSS选择器详细总结

一.基本选择器序号选择器含义 1. * 通用元素选择器,匹配任何元素 2. E 标签选择器,匹配所有使用E标签的元素 3. .info class选择器,匹配所有class属性中包含info的元素 4. #footer id选择器,匹配所有id属性等于footer的元素实例: * { margin:0; padding:0; } p { font-size:2em; } .info { background:#ff0; } p.info { background:#ff0; } p.in

我对CSS选择器的认识

我对CSS选择器的认识一.简述 CSS选择器是对HTML元素进行选择的筛选条件,大概可以分为两类: 特征选择器——根据元素自身所具有的某种特征进行筛选,比如名称.ID.属性等: 关系选择器——根据元素与其他元素的关系进行筛选,比如子元素.兄弟元素等: 在真正使用的时候,几个简单的选择器可以组合成更复杂的选择器,所以谁也说不上CSS选择器有多少.还有两个选择器是功能性的,它们可以给元素已有内容之前或之后添加新内容. 我做了一个项目,里面包含一个测试CSS选择器的小功能,请看这里. 二.归纳下文

CSS选择器备忘录

CSS选择器备忘录基本选择器 Selector Meaning Example 通用选择器匹配任何元素 * 标签选择器 CSS1中称之为元素选择器,匹配为指定标签的所有元素 div 伪元素选择器匹配元素内容中的指定部分,选择器E可省略 E::first-line 类选择器匹配class属性中包含指定类的元素 .warning 伪类选择器匹配满足某种状态或是符合某种逻辑的元素,选择器E可省略 E:hover或E:first-child id选择器匹配id属性为指定名称的元素 #cont

css选择器.md

css选择器总结 1.元素选择器如:*{},body{},p{} ; xml中note{},to{},from{} 2.class与id选择器如:.class{},#id{} 3.伪类选择器选择器示例示例说明 :link a:link 选择所有未访问链接 :visited a:visited 选择所有访问过的链接 :active a:active 选择正在活动的链接 :hover a:hover 把鼠标放在链接上的状态 :focus input:focus 选择元素输入后具有焦点 :f

使用CSS选择器（第一部分）

目录使用CSS选择器(第一部分) 使用CSS基本选择器选择所有元素通用选择器代码清单1 使用通用选择器根据类型选择元素元素类型选择器代码清单2 使用元素类型选择器提示根据类选择元素元素类选择器代码清单3 根据类选择元素代码清单4 使用类选择器匹配单一元素类型提示根据ID选择元素元素id选择器代码清单5 使用id选择器根据属性选择元素元素属性选择器代码清单6 使用元素属性选择器元素属性选择器的条件代码清单7 基于多个属性值中的一个选择元素代码清单8 使用

[2019.03.16]使用DOM操作函数和CSS选择器来针对已有的HTML进行只凭JS的改动

刚入职的时候看到公司用的HTML日志生成工具附带的Panel,工具不够用,找个Fail还要找半天,于是自己琢磨着添砖加瓦.以前也是个半吊子前端工程师,现在可倒好,想要改页面却连页面生成的模板在哪里都不知道,只有通过改动JavaScript才能实现对页面的修改. 固然,操作DOM有原版的 document.getElementsBy 一族,可是它们get的时候不能通过 class 和标签来区分,比如: <div class="FAIL"> <tr class=&qu

css选择器querySelector

* querySelector(css选择器)* 通过css选择器去获取一个元素* 它获取到的只有一个元素,如果说是有重复的,那它只取第一个** 主语* document 从整个文档里去获取元素* 父级从父级里去获取元素 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <styl

CSS后代选择器、子元素选择器、相邻兄弟选择器区别与详解

派生选择器用的很多,派生选择器具体包括为后代选择器.子元素选择器.相邻兄弟选择器,我们来理解一下他们之间的具体用法与区别. 1.css后代选择器语法:h1 em {color:red;} 表示的是从h1开始里面包含的所有的em元素变成红色,h1为祖先,其他的em都是后代,即选中后代,不管是儿子还是孙子,只要是都会被选中,为后代选择器.例如 <html> <head> <style type="text/css"> ul em {color:red;

前端学习笔记之CSS后代选择器、子元素选择器、相邻兄弟选择器区别与详解

派生选择器用的很多,派生选择器具体包括为后代选择器.子元素选择器.相邻兄弟选择器,我们来理解一下他们之间的具体用法与区别. 1.css后代选择器语法:h1 em {color:red;} 表示的是从h1开始里面包含的所有的em元素变成红色,h1为祖先,其他的em都是后代,即选中后代,不管是儿子还是孙子,只要是都会被选中,为后代选择器.例如 <html> <head> <style type="text/css"> ul em {color:red;

前端学习 -- Css -- 兄弟元素选择器

为一个元素后边的元素设置css样式: 语法:前一个 + 后一个. 作用:可以选中一个元素后紧挨着的指定的兄弟元素. 为一个元素后边的所有相同元素设置css样式: 语法:前一个 ~ 后边所有. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> h1 +

css选择器兄弟选择器相邻兄弟选择器子元素选择器

1.兄弟选择器: ~ 该选择器会选择当前元素之后的所有相邻指定元素(具有相同父元素的兄弟元素): .p ~ li{ color: blue; } <div> <p class="p">我是p元素</p> <strong>我是strong元素</strong> <li>我是li元素</li> /*li元素被选中*/ </div> 2.相邻兄弟选择器: + 该选择器会选择当前元素相邻的第一个兄弟

css伪元素选择器（伪对象选择器）checked + 伪元素练习

伪对象也叫伪元素,在过去,伪类和伪元素都被书写成前面只加一个冒号,实际上应该是: :weilei ::伪元素而现在我们为了兼容旧的书写方式,用一个冒号引导伪类也是能被解析的. 伪类一般反应无法在CSS中轻松或者可靠检测到的某个元素的状态或属性 : 伪元素表示DOM外部的某种文档结构 . 伪类更多的是定义元素的状态,而伪元素则是改变文档结构,在结构外另加一个没有实际存在的元素(伪元素)常用伪元素: 1. E:before/E::before 2. E:after/E::after 1. E:

css选择器(常规选择器，伪类选择器，伪元素选择器，根元素选择器)

前言 CSS的一个核心特性是能向文档中的一组元素类型应用某些规则,本文将详细介绍CSS选择器选择器 [通配选择器] 星号*代表通配选择器,可以与任何元素匹配 *{color: red;} [元素选择器] 文档的元素是最基本的选择器 html{color: black;} p{color: gray;} h2{color: silver;} [类选择器] 类选择器用于选择一类元素 .div{color: red;} // 单个类的选择 .div1.div2{color: red;} // 多个类

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

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

【转】解释下浏览器是如何判断元素是否匹配某个 CSS 选择器？

先产生一个元素集合,然后从后往前判断: 浏览器先产生一个元素集合,这个集合往往由最后一个部分的索引产生(如果没有索引就是所有元素的集合).然后向上匹配,如果不符合上一个部分,就把元素从集合中删除,直到真个选择器都匹配完,还在集合中的元素就匹配这个选择器了.举个例子,有选择器: body.ready #wrapper > .lol233 先把所有 class 中有 lol233 的元素拿出来组成一个集合,然后上一层,对每一个集合中的元素,如果元素的 parent id 不为 #wrapper 则把

jQuery中的层级选择器（四、二）：后代元素、子元素、相邻元素、兄弟元素

<!DOCTYPE html> <html> <head> <title>层次选择器</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="js/jquery-1.11.3.js"&

css选择器后面的兄弟元素

热门专题