jQ伪类选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
</style>
</head>
<body>
<ul>
<li>1111</li>
<li>2222</li>
<li>3333</li>
<li>4444</li>
<li>5555</li>
<li class="li1">6666</li>
<li>7777</li>
<li>8888</li>
<li>9999</li>
<li>0000</li>
</ul>
<script src="js/jquery-1.11.3.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$('ul li:first').css({'color':'red'})
$('ul li:last').css({'color':'blue'})
$('ul li:eq(3)').css({'background':'red'})
$('ul li:even').css({'border':'1px solid yellow'})
$('ul li:odd').css({'border':'1px solid pink'});
$('ul li:gt(5)').css({'font-size':'25px'})
$('ul li:lt(5)').css({'font-weight':'600'})
$('ul li:not(.li1)').css({'background':'#abcdef'})
</script>
</body>
</html>
jQ伪类选择器的更多相关文章
- CSS3 选择器——伪类选择器
前面花了两节内容分别在<CSS3选择器——基本选择器>和<CSS3选择器——属性选择器>介绍了CSS3选择器中的基本选择器和属性选择器使用方法,今天要和大家一起学习CSS3选择 ...
- CSS3选择器(三)之伪类选择器
伪类选择器对于大家来说最熟悉的莫过于:link,:focus,:hover之类的了,因为这些在平时中是常用到的伪类选择器,那么先和大家一起简单总 结一下CSS中常用的伪类选择器的使用方法,最后把重心放 ...
- CSS3 选择器——笔记+实战案例(基本选择器、组合选择器、属性选择器、伪类选择器)
使用CSS3 选择器——笔记 CSS通过选择器控制HTML元素,CSS选择器对网页对象可以实现一对一.一对多或者多对一的匹配. 一.CSS3选择器分类 CSS选择器在CSS2.1选择器的基础上新增了属 ...
- 谈谈一些有趣的CSS题目(十)-- 结构性伪类选择器
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- CSS3 nth 伪类选择器
考察下面的 HTML 代码片段: <div> <section>section 1</section> <section>section 2</s ...
- 巧用CSS3伪类选择器自定义checkbox和radio的样式
由于原生的checkbox和radio的样式太简陋了,在设计页面的时候,设计师往往会设计自己的checkbox和radio样式.一半情况下,为了适应各个浏览器的兼容性,我们都会用其他的元素替代原生的c ...
- CSS3中的伪类选择器详解
类选择器和伪类选择器区别 类选择器我们可以随意起名,而伪类选择器是CSS中已经定义好的选择器,不可以随意起名. 伪类选择器以及伪元素 我们把它放到这里 p.aaas{ text-align: le ...
- css伪类选择器及伪元素选择器
1.类选择器 在css中可以使用类选择器把相同的元素定义成不同的样式.比如: 结果如下: 标题背景未变 2.伪类选择器 类选择器和伪类选择器的区别在于,类选择器我们定义的,而伪类选择器是CSS中已经定 ...
- CSS3 结构伪类选择器 详解
1 CSS3 结构伪类选择器 1.E:root 匹配E元素所在的根元素 即:html 2. E:nth-child(n) (1)匹配E元素的父元素中第n个子元素,(2)且该位置的子元素类型必须是E类型 ...
随机推荐
- [Linux] PHP程序员玩转Linux系列-搭建代码开发环境
1.PHP程序员玩转Linux系列-怎么安装使用CentOS 2.PHP程序员玩转Linux系列-lnmp环境的搭建 有些同学可能觉得我写的都是啥yum安装的,随便配置一下而已,没啥技术含量,我的目的 ...
- ShiWangMeSDK Android版接口文档 0.2.0 版
# ShiWangMeSDK Android版接口文档 0.2.0 版 android 总共有 14 个接口,分别涉及到初始化和对界面的一些细节的控制.下面详细介绍接口,如果没有特殊说明,接口都在 S ...
- Activiti工作流(一)之基本操作介绍
工作流的概念: 工作流(Workflow),就是"业务过程的部分或整体在计算机应用环境下的自动化",它主要解决的是"使在多个参与者之间按照某种预定义的规则传递文档.信息或 ...
- angular : ui-router 操作原理
<body> <a ui-sref="title">title<a> </body> ui-router 会去解析body里的ui- ...
- 第十六篇 基于Bootstarp 仿京东多条件筛选插件的开发(展示上)
这几天学习Bootstrap,本来是两年前的用的东西,现在又重新拾起来,又有很多重新的认识,看了Bootstrap的样式偏多,插件现在还没有学习到几个,也有写几个插件自己用的想法.正好工作上也会用到, ...
- mybatis系列笔记(4)---输入输出映射
输入输出映射 通过parameterType制定输入参数类型 类型可以是简单类型(int String)也可以是POJO本身 或者包装类 1输入映射 关于输入简单类型和pojo本身的我就不写了,因为比 ...
- 第35篇 IIS执行原理
服务器的监听(IIS6.0+版本) 当请求到达服务器时,请求最终会到达TCPIP.SYS驱动程序,TCPIP.SYS将请求转发给HTTP.SYS网络驱动程序的请求队列中(可以理解为专门处理http请求 ...
- thinkphp apicloud 下拉刷新 。。。由于新人里面导入了vue.js
//刷新 apiready = function(){ var count; var i= 1; var param = {}; toDoRequest(); param.loadingImgae = ...
- java 类与类之间的关系 及uml图
类与接口之间的关系 : 继承 类与类之间的关系 :继承关系 包含关系 类与对象之间的关系 : 实例 UML 类图中类与类之间的关系: 泛化关系(generalization) 关联关系(associ ...
- Isomorphic Strings leetcode
Given two strings s and t, determine if they are isomorphic. Two strings are isomorphic if the chara ...