【jQuery 顺便学习下CSS选择器 奇偶匹配nth-child(even)】的更多相关文章

jQuery 顺便学习下CSS选择器 奇偶匹配nth-child(even)

今天学习jQuery,看到nth-child(even)用法,特意找了下这个选择器的用法,在CSS3标准中,用法很强大. 对此,我把CSS3标准中nth-child()用法大致介绍下: CSS3伪类选择器:nth-child() 简单的归纳下nth-child()的几种用法. 第一:nth-child(number) 直接匹配第number个元素.参数number必须为大于0的整数. (EG) li:nth-child(3){background:orange;}/*把第3个LI的背景设为橙色*…

学习《CSS选择器Level-4》不完全版

1 概述 1.1 前言 选择器是CSS的核心组件.本文依据W3C的Selectors Level 4规范,概括总结了Level1-Level4中绝大多数的选择器,并做了简单的语法说明及示例演示.希望对程序员有所助益. 2 元素选择器 2.1 类型选择器-h1 类型选择器也可以称为标签名选择器,会选中文档中该类型元素的实例. h1 { color: red; } 将文档中元素类型为h1的颜色设置成红色. 查看示例程序 2.2 通配选择器-* 通用选择器是一种特殊类型选择器,表示任何元素类型的元素.…

HTML 学习笔记 CSS(选择器3)

CSS 属性选择器 属性选择器可以根据元素的额属性以及属性值来选择元素 例子1 如果 你希望把包含title的所有元素变成红色 *[title] {color:red} 例子2 与上面类似 可以只对有href属性的锚应用样式 a[herf] {color: red} 例子3还可以根据多个属性进行选择 只需将属性选择器链接在一起就可以 a[href][title] {color:red} 例子4 可以采用一些创造性的方法来使用这个特性 例如,可以对所有带有 alt 属性的图像应用样式,从而突出显示…

HTML 学习笔记 CSS(选择器)

CSS元素选择器 最常见的CSS 选择器就是元素选择器 换句话说 文档的元素就是最基本的选择器 如果设置HTML样式 选择器通常就是某个HTML元素 比如p h1 em a 甚至可以是HTML本身 html {color:black;} h1 {color:blue;} h2 {color:silver;} 可以将某一个样式从一个元素切换到另一个元素. 假设您决定将上面的段落文本(而不是h1元素)设置成灰色 只需要把h1改成p html {color:black;} p {color:gray;…

jquery live()只支持css选择器

昨天在处理过keypress键盘事件后,今天要把用户在页面上动态添加的字段条目加上删除功能,就是在每个字段后面加上一个漂亮的小按钮,当用户点击这个按钮,相应的条目就被从数据库中删除. 为了实现这种功能,必须保证任何新添加的条目在不刷新页面的情况下也能相应删除事件,因此,就必须使用jquery.live()来绑定click事 件到那个漂亮的小按钮上,但是由于这个按钮是嵌入到每一个条目上的,所以它们处于DOM树比较深的层次下,本来我是用jquery的children() 逐层来选择这些按钮的,但是测…

前端学习笔记——CSS选择器

学习css选择器之前我们先了解下css规则: CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明: 选择器通常是需要改变样式的 HTML 元素. 每条声明由一个属性和一个值组成. 1.id选择器.class选择器.标签选择器 /*id选择器*/ /* #代表通过id选择器查找*/ #i1{ height: 48px; background-color: red; } /* class选择器 最常用 */ /*. 代表通过class选择器查找*/ .div{ height: 48px;…

CSS选择器的匹配规则

css选择器是从右向左匹配的, 比如:.list a {color:blue;} 先解析到 a 标签,并将页面上所有 a 标签的字体颜色都按照 color:blue 进行渲染(蓝色),再解析到 .list ,将页面上所有 .list 类目下的 a 标签的字体渲染成蓝色.是的,你没有看错,浏览器解析CSS从来就是这么苦逼. 找相关时找到下面博主的选择器写的不错: http://www.cnblogs.com/zhaodongyu/p/3341080.html…

jQuery基础学习7——层次选择器find()方法

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

第26篇 jQuery 快速学习下

前面说了下jQuery了,大部分说的都是选择器和过滤器方面的东西,这个写完后,后面就说下剩下的东西了,离目标越来越近了.下面就说说这些东西 事件 传统比较 在js中说了原生js的绑定事件,基本的形式如下: dom.addEventListener('click', function() { console.log("d2"); }, true); 在jQuery中有对现有的方法的封装下面看下事件的绑定的基本形式: a.利用匿名函数: $(“#id”).click(function(){…

HTML 学习笔记 CSS(选择器2)

CSS 类选择器 类选择器允许以一种独立于文档元素的方式来指定样式 CSS 类选择器 类选择器允许以一种独立于文档元素的方式来指定样式 该选择器可以单独使用 也可以和其他元素结合使用 提示 只要适当的标记文档后 才能使用这些选择器 所以使用这两种选择器 通常要做一些构想和计划 要考虑样式而不是考虑具体设计的元素 最常用的方法就是使用类选择器 修改HTML代码 在使用类选择器之前,需要修改具体的文档标记,以便类选择器正常工作.为了将类选择器的样式与元素关联,必须将 class 指定为一个适当的值.…

CSS学习笔记——CSS选择器样式总结

<style type="text/css"> * { padding:0; margin:0; } .box h2 { //内边距左边的距离 padding-left:10px; //内边距左边的距离 padding-right:10px; //边框有无.宽度和颜色 border: 1px solid #000; //背景的高度 height:100px; //背景的宽度 width: 100px; //背景颜色 background:#87b0e1; line-heig…

jQuery基础学习6——基本选择器

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

[CSS3] 学习笔记-CSS选择器

CSS3中,选择器的分类很多,有元素选择器.类选择器.ID选择器.属性选择器.后代选择器.子元素选择器.相邻兄弟选择器. 1.最常见的选择器就是元素选择器,文档的元素就是最基本的选择器,例如,h1{},a{} 2.选择器分组:h1,h2{}.*{} 3.类选择器允许以一种独立于文档元素的方式来指定样式:.class{}: 可以结合元素选择器:a.class{}: 多类选择器:.class.class{} 4.ID选择器与类选择器相似,不过也有一些重要差别,例如:#id{} ID选择器与类选择器的…

[学习笔记]CSS选择器

CSS语法结构 selector {     property1 : value;     property2 : value; } 如果包含多个属性,那么属性每个属性的结尾需要有一个分号.如果属性的值由多个单词构成,那么需要使用引号将多个单词包含起来.   选择器的种类: 元素选择器 - 直接选择html元素: h1{} , a{} 选择器分组 - 可以针对多种类型的标签设置相同的样式: h1,a{} 通配符 - 针对所有的html标签设置样式.常用的做法是使用通配符来设置margin和pad…

css权威指南学习笔记 —— css选择器

1,选择器:选择器的一些基本常用规则基本都记得,w3c上都有,平时也常用,不常用的一些后代选择器经常就忘记了.一些归纳一下后代选择器,加深一下印象: a:子选择器:   p>a  a是直接是p的儿子,而不是孙子曾孙子.就是儿子,只有一代关系. b:相邻兄弟选择器: h1 +p h1 和 p 必须拥有相同的父元素.他们是同胞.样式作用在 p 上面.(与h1相邻的p元素). 2,伪类和为元素 a : 平时也市场在用,尤其是a连接的几个伪类.伪类的顺序非常的重要:link-visited-focus-…

HTML 学习笔记 CSS(选择器4)

CSS 后代选择器 后代选择器(descendant selector)又称为包含选择器.后代选择器可以选择作为某元素后代的元素. 根据上下文选择元素 我们可以定义后代选择器来创建一些规则,使这些规则在某些文档结构中起作用,而在另外一些结构中不起作用.举例来说,如果您希望只对 h1 元素中的 em 元素应用样式,可以这样写: h1 em {color:red;} 上面这个规则会把作为 h1 元素后代的 em 元素的文本变为 红色.其他 em 文本(如段落或块引用中的 em)则不会被这个规则选中:…

jQuery基础学习8——层次选择器next()和prev()方法

$('.one + div').css("background","#bbffaa"); //和next()方法是等价的,前后关系,和prev()方法是对立的 $('.one').next('div').css("background","#bbffaa"); $('.one').next().css("background","#bbffaa"); //不指定向后查找的元素条件则返回开…

jQuery基础学习8——层次选择器children()方法

$('body > div').css("background","#bbffaa"); //和children()方法是等价的,父子关系,和parent()方法是对立的 $('body').children('div').css("background","#bbffaa"); 和$('body > div')是等价的 $('body').children().css("background"…

CSS基础学习-2.CSS选择器（上）

元素选择符 关系选择符 属性选择符 伪类选择符 伪对象选择符 一.元素选择符 1.通配符:*{ } 2.类选择符:.类名称{ } 3.id选择符::#id名称{ } 4.类型选择符(标签选择符):标签 { } 二.关系选择符 1.子元素选择器:父亲>儿子 2.兄弟选择器::你自己~你的兄弟 3.相邻选择器:E+F 4.包含选择器:E F 三.属性选择符 1.属性 2.写法: (1)当前元素[属性]{ } (2)当前元素[属性="属性值"]{ } 四.伪类选择符 1.定义:它允许给…

CSS选择器从右向左的匹配规则

CSS选择器从右向左的匹配规则 下面这个栗子,CSS选择器它是如何工作的? .mod-nav h3 span {font-size: 16px;} 如果不知道匹配规则,可能的理解是从左向右匹配:先找到.mod-nav,然后逐级匹配h3.span,在这个过程中如果遍历到叶子节点都没有匹配就需要回溯,继续寻找下一个分支. 但事实上,CSS选择器的读取顺序是从右向左. 还是上面的选择器,它的读取顺序变成:先找到所有的span,沿着span的父元素查找h3,中途找到了符合匹配规则的节点就加入结果集:如果…

CSS选择器学习小结

关于CSS选择器的问题,在实际项目中,以及一般的前端面试中会经常遇到.下面对此做一小结,梳理和巩固相关方面知识.(如有不妥之处,还望大家及时批评指正,以免误导他人) 一.选择器种类 1.id选择器(#myid):2.类选择器(.myclass):3.标签选择器(div,ul,span):4.相邻兄弟选择器(h1+p):5.子选择器(div>span):6.后代选择器(div span,div.myclass):7.通配符选择器(*):8.属性选择器(input[type="text&quo…

CSS选择器的优化

前面花了几个篇幅着重介绍了CSS的选择器的使用,我将其分成三个部分:CSS基本选择器.CSS属性选择器以及CSS伪类选择器.那么今天我主要想和大家一起来学习——CSS选择器方面的性能优化.因为对性能这一块一直都是很弱的,所以今天先从选择器开始入手,加强自己.如果你也感兴趣那就跟我一起来吧. 浏览器如何识别你的选择器 首先我们需要清楚,浏览器是如何读取选择器,以识别样式,并将相应的样式附于对应的HTML元素,达到美化页面的效果.Chris Coyier曾在<Efficiently Renderin…

jQuery常用方法（四）-选择器

JQuery Selectors 方法说明 基本选择器 $("#myDiv") 匹配唯一的具有此id值的元素 $("div") 匹配指定名称的所有元素 $(".myClass") 匹配具有此class样式值的所有元素 $("*") 匹配所有元素 $("div,span,p.myClass") 联合所有匹配的选择器 层叠选择器 $("form input") 后代选择器,选择ancesto…

CSS选择器 - 性能的探究及提升

[本博客为原创:http://www.cnblogs.com/HeavenBin/]  前言: 在工作中编写CSS样式表时随着选择器层数的增加总会看到选择器又丑又长的情况,利用工作之余研究从其命名再到如何提高其性能.本博客将以"通俗易懂"."简洁""的方式来探究CSS选择器的性能,以及叙述总结如何提升CSS选择器的性能.(2017-8-20) 一. CSS选择器性能是如何消耗的? 工作原理:浏览器利用CSS选择器来匹配文档元素. 工作流程:例如 #hd .…

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

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

bs4 CSS选择器

#https://www.crummy.com/software/BeautifulSoup/bs4/doc/index.zh.html#find-all #beautifulSoup可以解析HTML,下载安装时使用的是 pip install beautifulsoup4  ,导入模块时使用的是bs4. import bs4 noStarchSoup=bs4.BeautifulSoup(res.text) #bs4.BeautifulSoup()函数返回的是一个BeautifulSoup对象.…

简易数据分析 15 | Web Scraper 高级用法——CSS 选择器的使用

这是简易数据分析系列的第 15 篇文章. 年末事情比较忙,很久不更新了,后台一直有读者催更,我看了一些读者给我的私信,发现一些通用的问题,所以单独写篇文章,介绍一些 Web Scraper 的进阶用法. 今天我们就来学习一些 CSS 选择器的知识,辅助 Web Scraper 更好的定位要选择的元素. 一.定位 HTML 节点 HTML 是什么?它是一个网页的骨架,是最最基础的东西.比如说你现在看的这篇文章,其实就是一个网页,每一行字都是 HTML 里的一个 <p> 标签. 网页就是由一行一行…

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

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

【jQuery基础学习】01 jQuery选择器

关于CSS选择器 jQuery选择器涉及到CSS,CSS技术使得网页的结构与表现样式完全分离. 同样CSS也需要找到某个网页的结构才能改变其样式,这就是CSS选择器. 常用的CSS选择器如下: 标签选择器 以文档元素作为选择符 a{ text-decoration:none; } ID选择器 以文档元素的唯一标识符ID作为选择符 #myNameDiv{ font-size:14px; width:120px; } 类选择器 以文档元素的class作为选择符 div.note{ font-size…

jQuery基础学习(二)—jQuery选择器

一.jQuery基本选择器 1.CSS选择器     在学习jQuery选择器之前,先介绍一下之前学过的CSS选择器. 选择器 语法 描述 示例   标签选择器 E {                 CSS规则   }   以文档元素为选择符   ID选择器 #ID{                  CSS规则 }   以ID为选择符   类选择器 E.className{                 CSS规则 }   以文档元素的Class为选择符   群组选择器 E1,E2{   …