选择器 | 易学教程

jQuery的选择器（五）

阅读更多关于 jQuery的选择器（五）

四、表单选择器 :input：取input元素 :text：取单行文本框元素 :password：取密码框元素 :radio：取单选框元素 :checkbox：取复选框元素 :file：取上传域元素 :images：取图片按钮元素 :button：取所有的按钮元素 :submit：取提交按钮元素 :reset：取重置按钮元素这里我们写了一个注册界面的布局来使用表单选择器 <body> <fieldset style="width: 200px;height: 500px;"><a href=""></a> <legend>注册表单</legend> <form> <p>用户名：<input type="text" name="username"/></p> <p>密码：<input type="password" name="pwd"/></p> <p>确认密码：<input type="password" name="repwd"/></p> <p>性别： <input type="radio" name="sex" value="0">男 <input type="radio" name="sex" value="1">女 </p> <p>个人爱好： <input type="checkbox" name="hobby" value="跑步"/>跑步 <input

CSS选择器

阅读更多关于 CSS选择器

一、基本选择器选择器描述 CSS版本 E 标签选择器，匹配所有使用E标签的元素 * 通用元素选择器，匹配任何元素 .info class选择器，匹配所有class属性中包含info的元素 #footer id选择器，匹配所有id属性等于footer的元素比如： * { margin:0; padding:0; } p { font-size:2em; } .info { background:#ff0; } p.info { background:#ff0; } p.info.error { color:#900; font-weight:bold; } p#info { background:#ff0; } 二、多元素的组合选择器选择器描述 CSS版本 E，F 多元素选择器，同时匹配所有E元素或F元素，E和F之间用逗号隔开 E F 后代元素选择器，匹配所有属于E元素后代的F元素，E和F之间用空格分隔 E>F 子元素选择器，匹配所有E元素的儿子元素F E+F 毗邻元素选择器，匹配所有紧随E元素之后的同级元素F E~F 匹配任何E标签之后的同级F标签 3 比如： div,p { color:#f00; } #nav,li { display:inline; } #nav a { font-weight:bold; } div>strong { color:#f00; } p

jQuery-强大的jQuery选择器 (详解)[转]

阅读更多关于 jQuery-强大的jQuery选择器 (详解)[转]

1. 基础选择器 Basics 名称说明举例 #id 根据元素Id选择 $("divId") 选择ID为divId的元素 element 根据元素的名称选择, $("a") 选择所有<a>元素 .class 根据元素的css类选择 $(".bgRed") 选择所用CSS类为bgRed的元素 * 选择所有元素 $("*")选择页面所有元素 selector1, selector2, selectorN 可以将几个选择器用","分隔开然后再拼成一个选择器字符串.会同时选中这几个选择器匹配的内容. $("#divId, a, .bgRed") 2.层次选择器 Hierarchy 名称说明举例 ancestor descendant 使用"form input"的形式选中form中的所有input元素.即ancestor(祖先)为from, descendant(子孙)为input. $(".bgRed div") 选择CSS类为bgRed的元素中的所有<div>元素. parent > child 选择parent的直接子节点child. child必须包含在parent中并且父类是parent元素. $(".myList>li") 选择CSS类为myList元素中的直接子节点<li>对象. prev + next prev和next是两个同级别的元素.

jquery选择器空格与大于号、加号与波浪号的区别~（原创）

阅读更多关于 jquery选择器空格与大于号、加号与波浪号的区别~（原创）

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> 空格：$('parent childchild')表示获取parent下的所有的childchild节点，所有的子孙。大于号：$('parent > child')表示获取parent下的所有child的儿子，第一代。加号：$('pre + nextbrother')表示获得pre节点的下一个兄弟节点，相当于next()方法波浪号：$('pre ~ brother')表示获取pre节点的后面的所有兄弟节点，相当于nextAll()方法。下面是一个小例子，看看他们的区别吧~~~~ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " http://www.w3.org/TR/html4/loose.dtd "> <html> <head> <title> New Document </title> <meta name="Generator" content="EditPlus"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <script src='f:/study

你应该知道的一些事情——CSS权重

阅读更多关于你应该知道的一些事情——CSS权重

本文由 99 根据 Vitaly Friedman 的《 CSS Specificity: Things You Should Know 》所译，整个译文带有我们自己的理解与思想，如果译得不好或不对之处还请同行朋友指点。如需转载此译文，需注明英文出处： http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know ，以及作者相关信息作者： Vitaly Friedman 译者： 99 除了浮动之外，css权重问题是你要了解的，最复杂的一个概念之一。css每条规则权重的不同，是你所期望的效果，没有通过css规则在元素上生效的主要原因。为了减少调试bug的时间，你需要了解浏览器是怎样解析你的代码的。为了完成这个目标，你需要对权重是如何工作的，有一个清楚的认识。很多Css出现问题的场景，都是某处定义了一个更高权重的规则，导致此处规则不生效。 Css权重问题并不简单，而且有很多或具体或抽象的理论来解释这个问题。本文也将探讨这个问题，我相信如果你喜欢星球大战的话你肯定会理解这些概念的~ 我们将会讨论关于css权重的主要问题，包括例子，规则，原理，通用解决方案以及一些资源。 CSS权重：概述权重决定了哪一条规则会被浏览器应用在元素上。权重的不同，是你所期望的效果

CSS3 选择器——伪类选择器

阅读更多关于 CSS3 选择器——伪类选择器

前面花了两节内容分别在《 CSS3选择器——基本选择器》和《 CSS3选择器——属性选择器》介绍了 CSS3选择器中的基本选择器和属性选择器使用方法，今天要和大家一起学习 CSS3选择器中的第三部分，也是最后一部分——伪类选择器。伪类选择器对于大家来说最熟悉的莫过于:link,:focus,:hover之类的了，因为这些在平时中是常用到的伪类选择器，那么先和大家一起简单总结一下CSS中常用的伪类选择器的使用方法，最后把重心放到CSS3新增加的":nth-child"选择器的使用方法。和前面一样，在开始之前先创建一个Dom: < div class = "demo clearfix" > < ul class = "clearfix" > < li class = "first links odd" id = "first" > < a href = "" > 1 </ a > </ li > < li class = "links even" > < a href = "" > 2 </ a > </ li > < li class = "links odd" > < a href = "" > 3 </ a > </ li > < li class = "links even" > < a href = "" > 4 </ a > </ li > < li class

CSS 3.0学习之选择器总结

阅读更多关于 CSS 3.0学习之选择器总结

1.元素选择器 E { … } /*E 代表 HTML 元素名 */ 例如： <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <title>元素选择器</title> <style type="text/css"> div { background-color: grey; font: italic normal bold 24px normal 宋体; } </style> </head> <body> <div>元素选择器</div> </body> </html> 效果： 2.属性选择器属性选择器顾名思义就是根据元素的属性来为确认的元素定义样式。从广义的角度看，元素选择器是属性选择器的特例。属性选择器有如下几种语法 Ø E { … }：为所有E元素定义样式。 Ø E[attr] { … }：为具有attr属性的元素定义样式。 Ø E[attr=value] { … }：为具有attr属性，且attr属性为value值的元素定义样式。 Ø E[attr~=value] { … }：为具有attr属性，且attr属性的值为以空格隔开的系列值，其中某个值为value的元素定义样式。 Ø E[attr|=value] { … }

HTML&CSS基础学习笔记1.30-选择器是什么

阅读更多关于 HTML&CSS基础学习笔记1.30-选择器是什么

选择器是什么选择器是CSS样式为了定位页面上的任意元素的一种方法。选择器主要分为：元素标签选择器、通用选择器、类选择器、ID选择器、属性选择器、组合选择器、伪类选择器、伪元素选择器。先做个了解，底下的css笔记会详细介绍不同的选择器~ <!DOCTYPE html> <html lang="en"> <head> <link href="index.css"> <meta charset="UTF-8"> <title>使用外链样式表添加样式</title> </head> <body> <h1>错误</h1> <p> 我打江南走过<br> 那等在季节里的容颜如莲花的开落<br> 东风不来，三月的柳絮不飞<br> 你的心如小小的寂寞的城<br> 恰若青石的街道向晚<br> 跫音不响，三月的春帷不揭<br> 你的心是小小的窗扉紧掩<br> 我达达的马蹄声是美丽的错误<br> 我不是归人，是个过客……<br> </p> </body> </html> p{ font-size:16px; } 更多学习内容，就在码芽网http://www.mayacoder.com/lesson/index 来源： oschina 链接： https://my.oschina.net/u/2814141/blog/748922

web前端开发中浏览器兼容问题（四）

阅读更多关于 web前端开发中浏览器兼容问题（四）

16.链接访问后hover样式就不出现 • 被点击访问过的超链接样式不在具有hover和active了,很多人应该都遇到过这个问题。 • 解决方法是改变CSS属性的排列顺序: L-V-H-A 例: <style type="text/css"> a:link {} a:visited {} a:hover {} a:active {} </style> ： link 选择器设置指向未被访问的链接样式： visited 选择器设置已被访问的页面的链接： hover 选择器用于鼠标指针浮动在上面的元素： active 选择器用于活动链接注释：在 CSS 定义中，:hover 必须位于 :link 和 :visited 之后（如果存在的话），这样样式才能生效 17.游标手指cursor • cursor: pointer 可以同时在 IE FF 中显示游标手指状 • cursor: hand 仅 IE 可以 18.UL的padding与margin • ul标签在FF中默认是有padding值的,而在IE中只有margin默认有值,所以先定义： ul{margin:0;padding:0;}，就能解决大部分问题。 19.form标签 • 这个标签在IE中,将会自动margin一些边距,而在FF中margin则是0,因此,如果想显示一致

jQuery选择器大全(48个代码片段+21幅图演示)

阅读更多关于 jQuery选择器大全(48个代码片段+21幅图演示)

选择器是jQuery最基础的东西，本文中列举的选择器基本上囊括了所有的jQuery选择器，也许各位通过这篇文章能够加深对jQuery选择器的理解，它们本身用法就非常简单，我更希望的是它能够提升个人编写jQuery代码的效率。本文配合截图、代码和简单的概括对所有jQuery选择器进行了介绍，也列举出了一些需要注意和区分的地方。一、基本选择器 1. id选择器（指定id元素）将 id="one" 的元素背景色设置为黑色。（id选择器返单个元素） $(document).ready( function () { $( '#one' ).css( 'background' , '#000' ); }); 2. class选择器（遍历css类元素）将 class="cube" 的元素背景色设为黑色 $(document).ready( function () { $( '.cube' ).css( 'background' , '#000' ); }); 3. element选择器（遍历html元素）将 p 元素的文字大小设置为12px $(document).ready( function () { $( 'p' ).css( 'font-size' , '12px' ); }); 4. * 选择器（遍历所有元素） $(document).ready( function ()

订阅选择器