css3 位置选择器类似jq的:eq(0)

JQ使用 :eq(位置),可以选择第几个元素 CSS3里面新增了一个用法,:nth-child(位置) 可实现和JQ同样的功能需要注意的是jq第一个是从0开始,CSS的第一个是从1开始…

jq选择器（jq 与 js 互相转换），jq操作css样式 / 文本内容， jq操作类名，jq操作全局属性,jq获取盒子信息,jq获取位置信息

jq选择器(jq 与 js 互相转换) // 获取所有的页面元素jq对象 $('css3选择器语法'); var $box = $(".box:nth-child(1)"); 获取的是jq对象数组 // 拿到指定的页面元素jq对象 $('css3选择器语法').eq(index); var $box = $(".box").eq(1); 获取的是jq对象数组 // jq 转 js ( jq对像就是由数组包裹的js对象 ) box1 = $box[0] 从数组里取出来…

CSS3 教程选择器标记一下防止要找时404

客 » Airen的博客 CSS3 选择器——基本选择器作者:大漠日期:2011-08-09 点击:6418  CSS的选择器,我想大家并不会陌生吧,因为天天在使用,但对于CSS3的选择器,要运用的灵活到位,我想对很多朋友还是一定的难度,特别是CSS3中的:nth选择器.那么从现在开始我们先丢开他们版本的区别,从头一起来看看CSS选择器的运用. CSS是一种用于屏幕上渲染html,xml等一种语言,CSS主要是在相应的元素中应用样式,来渲染相对应用的元素,那么这样我们选择相应的元素就很重要…

【前端开发系列】—— CSS3属性选择器总结

想想自己为什么要学CSS,作为一个开发过前端的人员来说,调试一个图片花了半天的时间,最后发现分隔符用错了,实在是一件很丢人的事情.因此,痛下决心来学习CSS,最近一周也会更新下相关的学习笔记. CSS3中使用了很多的属性选择器,通过这些属性选择器,可以根据我们自己的设计来定义元素的样式,制作精美的网页. CSS3属性选择器下面是CSS3的属性选择器的语法,及使用. 元素名字[元素类型=“类型名字”]:选择器名字{ 属性:值: 属性:值: } 在元素类型匹配时,就可以使用类似正则的匹配方法. […

jQuery学习- 位置选择器

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>位置选择器</title> <script src="js/jquery.js"></script> <script type="text/javascript"> $(function(){ //获取第一个li $(&q…

认识CSS3新增选择器和样式

前端之HTML5,CSS3(二) CSS3新增选择器和样式 CSS3新增选择器结构伪类选择器 :first-child:选取父元素中的第一个子元素的指定选择器 :last-child:选取父元素中的最后一个子元素的指定选择器 :nth-child(n):选取父元素中的第n个子元素的指定选择器,n取小于等于子元素个数的正整数.当n取n值表示选取父元素中所有子元素:n取2n表示选取父元素中所有偶数的子元素,等同于:nth-child(odd):n取2n+1表示选取父元素中所有奇数的子元素,等同于:…

css3的选择器

先来做一下准备工作页面的效果: 看到上面的框框了吗?我们就是通过给这些框框添加背景色的方式,来让大家,了解css3的选择器的效果,下面正式开始: 关联选择器 E1~E2 选择 E1 后面的兄弟 E2. 页面效果: 选择除了第一个 p 元素之外,后面所有的 p 元素,即使中间隔着一个 div 标签,也能被选中,背景色变成蓝色. 属性选择器新增 [^=" " ] 选中以...开头的元素 [$=" " ] 选中以...结束的元素 [*=" " ] 包…

css3 nth-child选择器

css3 nth-child选择器 css3的nth-child选择器,乍看起来很简单,其实不是那么容易. 简单用法 p:nth-child(n) // 选择属于其父元素的第n个子元素的每个 <p> 元素 p:nth-child(2n) // 选择属于其父元素的子元素的每个偶数<p> 元素 p:nth-child(2n + 1) // 选择属于其父元素的子元素的每个奇数<p> 元素注意事项大概大家都知道上面的使用方法,但是有一点搞不清楚的话,使用起来就会很困惑.那就…

CSS系列：CSS3新增选择器

1. CSS1定义的选择器选择器类型说明 E 类型选择器选择指定类型的元素 E#id ID选择器选择匹配E的元素,且匹配元素的id为“id”,E选择符可以省略. E.class 类选择器选择匹配E的元素,且匹配元素的class属性值为“class”,E选择符可以省略. E F 包含选择器选择匹配F的元素,且该元素被包含在匹配E的元素内. E:link 链接伪类选择器选择匹配E的元素,且匹配元素被定义了超链接并未被访问.例:a:link E:visited 链接伪类选择器选择匹配…

CSS3常用选择器（二）

本文继续介绍css3新增的选择器. 1.选择器 first-child.last-child.nth-child 和 nth-last-child 利用这几个选择器能够针对一个父元素中的第一个子元素.最后一个子元素.指定序号的子元素,甚至第偶数个或第奇数个子元素进行样式的指定. 直接看代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>css3选择器&…

CSS3选择器02—CSS3部分选择器

该部分主要为CSS3新增的选择器接上一篇 CSS(CSS3)选择器(1) 一.通用兄弟选择器: 24:E ~ F,匹配任何E元素之后的同级F元素. div ~ p{ background-color:#00FF00; } 二.属性选择器: 25:E[att ^= val],匹配属性att的值以”val“开头的元素. [id ^= start]{ background-color:red; ] /*匹配以id属性的值为start开头的,如id="start1",id="sta…

笔记：css3伪选择器改变滚动条样式

现在我打开支持前缀-webkit-的浏览器,也就是说只要支持前缀为-webkit-的浏览器才有效果 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css3伪选择器改变滚动条样式</title> <style> .thumb{ width:300px; height:600px; overfl…

CSS选择器及CSS3新增选择器

转自:http://www.cnblogs.com/libingql/p/4375354.html 1. CSS1定义的选择器选择器类型说明 E 类型选择器选择指定类型的元素 E#id ID选择器选择匹配E的元素,且匹配元素的id为“id”,E选择符可以省略. E.class 类选择器选择匹配E的元素,且匹配元素的class属性值为“class”,E选择符可以省略. E F 包含选择器选择匹配F的元素,且该元素被包含在匹配E的元素内. E:link 链接伪类选择器选择匹配E的元素…

CSS3 新增选择器

CSS3 新增选择器结构(位置)伪类选择器(CSS3) :first-child :选取属于其父元素的首个子元素的指定选择器 :last-child :选取属于其父元素的最后一个子元素的指定选择器 :nth-child(n) : 匹配属于其父元素的第 N 个子元素,不论元素的类型 :nth-last-child(n) :选择器匹配属于其元素的第 N 个子元素的每个元素,不论元素的类型,从最后一个子元素开始计数. n 可以是数字.关键词或公式 li:first-child { /* 选择第一…

CSS3常用选择器（三）

在CSS3的选择器中,除了结构性伪类选择器外,还有一种UI元素状态伪类选择器.这些选择器的共同特征: 指定的样式只有当元素处于某种状态时才起作用,在默认状态下不起作用. 1.hover.focus.active 和 checked <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>css3选择器</title> <style type=&q…

CSS3 ::selection选择器

一.介绍之前看到有些网站选中内容的颜色和背景色都不是平时看到的蓝色和白色.今天有兴趣查看了一下,原来是一个很简单的CSS3的选择器::selection的用法. 上例子: <style> .selectColor::selection{color:#fff;background:pink;} .selectColor::-moz-selection{color:#fff;background:pink;} .selectColor::-webkit-selection{color:#fff;…

CSS3属性选择器与(:not)选择器

一:css3属性选择器: img[alt]{ border:2px dashed #000; } 这个选择器会匹配页面标签中任何一个含有alt属性的图片标签. 还可以通过设定属性值来缩小匹配范围:如下代码: img[alt="atwi_oscar"]{ border:2px dashed #000; } css3的子字符串匹配属性选择器 (1)‘匹配开头’的属性选择器依法如下: Element[attribute^="value"],实例代码如下: img[a…

CSS3之选择器

总结了下CSS3新增的一些选择器. CSS3的选择器有基本选择器.属性选择器.伪类选择器几类. CSS3选择器选择器举例例子描述 element1~element2 p~a 选择前面有 <p> 元素的每个 <a> 元素. [attrtube^=value] a[src^="http"] 选择其 src 属性值以 "https" 开头的每个 <a> 元素. [attrtube$=value] a[src$=".pdf…

CSS3 :nth-child() 选择器

CSS3 :nth-child() 选择器代码: <!DOCTYPE html> <html> <head> <style> p:nth-child(2) { background:#ff0000; } </style> </head> <body> <h1>这是标题</h1> <p>第一个段落.</p> <p>第二个段落.</p> <p>…

css3属性选择器总结

前两节介绍了css3属性选择器与css2属性选择器中: 包含字符串和以字符串选择器开头的选择器的比较. 全部属性选择器: 包含字符串讲解对比实例讲解链接: http://www.cnblogs.com/thomascui/p/5252805.html 以字符串开头对比实例讲解链接:http://www.cnblogs.com/thomascui/p/5241229.html 现在将css3中剩余的属性选择器做个简单介绍: 1. [attribute]与[attribute=value]没什么特殊…

[shell 编程] if [ $# -eq 0 ]该语句是什么含义?

$0: shell或shell脚本的名字$*:以一对双引号给出参数列表$@:将各个参数分别加双引号返回$#:参数的个数$_:代表上一个命令的最后一个参数$$:代表所在命令的PID$!:代表最后执行的后台命令的PID$?:代表上一个命令执行后的退出状态 if [ $# -eq 0 ]该语句是什么含义? 解:如果有零个参数的话…

Html学习之九（CSS选择器的使用--位置选择器）

位置选择器: 一..:first-child选择器 <!doctype html> <html> <head> <meta charset="utf-8"> <title>first-child选择器的使用</title> <style type="text/css"> p:first-child{color: red;} </style> </head> &…

if [ $? -eq 0 ]的含义

if [ $? -eq 0 ]语句代表上一个命令执行后的退出状态 $0: shell或shell脚本的名字$*: 以一对双引号给出参数列表$@: 将各个参数分别加双引号返回$#: 参数的个数$_: 代表上一个命令的最后一个参数$$: 代表所在命令的PID$!: 代表最后执行的后台命令的PID$?: 代表上一个命令执行后的退出状态 #! /bin/bash SOME_DIR='/root/cjj/' cd $SOME_DIR ]; then # 检查cd命令是否成功,如果成功才执行…

CSS3 nth-of-type(n)选择器 last-of-type选择器 nth-last-of-type(n)选择器 CSS3 only-child选择器 only-of-type选择器

CSS3 nth-of-type(n)选择器 “:nth-of-type(n)”选择器和“:nth-child(n)”选择器非常类似,不同的是它只计算父元素中指定的某种类型的子元素.当某个元素中的子元素不单单是同一种类型的子元素时,使用“:nth-of-type(n)”选择器来定位于父元素中某种类型的子元素是非常方便和有用的.在“:nth-of-type(n)”选择器中的“n”和“:nth-child(n)”选择器中的“n”参数也一样,可以是具体的整数,也可以是表达式,还可以是关键词. 示例演示…