css选择器 | 易学教程

前端构建：Less入了个门

阅读更多关于前端构建：Less入了个门

http://www.w3cplus.com/css/less 一、前言　　　　　　　　　　　　　　　　　　　　　　　　　　　　说到前端构建怎能缺少CSS预处理器呢！其实CSS的预处理器有很多啦，比较出名的有Scss、Sass、Stylus和Less。（最近还听说出现了Autoprefixer等CSS后处理器，可参考@一丝的PPT）众多CSS预处理器中Less的语法最接近原生CSS，因此相对来说更容易上手，假如有JS、C#等编程经验的话，其实上述的几种预处理器的学习成本也不会特别高。下面是我们这阵子的学习笔记，以便日后查阅。最好的入门教程——官网地址：http://lesscss.org/ 最佳实践之一——Bootstrap 由于内容较多，特设目录一坨：二、搭建学习环境三、内联样式和外联样式四、语法 1. 注释 2. 变量（Variable）列表类型 3. 嵌套（Nested） 4. 父选择器引用（ParentSelector）　 5. 导入指令（Import） 6. 继承（Extend）　　 6.1. 父选择器必须严格匹配，除了属性选择器中属性值引号不必匹配外，或添加all关键字外。　　 6.2. 父选择器不支持变量形式　　 6.3. media query影响继承的作用域　　　　 6.3.1. media query内的extend操作

CSS 用伪类 :after 选择器清除浮动

阅读更多关于 CSS 用伪类 :after 选择器清除浮动

利用 :after 伪类来实现清除浮动 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <style> *{padding:0px;margin:0px;} ul,li{list-style:none;} .nav li{float:left;} .test{height:100px;width:100px;background:orange;} /* 重点是下面这代码 */ .nav:after{content:"";clear:both;height:0;display:block;} </style> <body> <div class="nav"> <li>标签1</li> <li>标签2</li> <li>标签3</li> <li>标签4</li> </div> <div class="test"></div> </body> </html> 来源： https://www.cnblogs.com/zion0707/p/3889345.html

Ajax入门

阅读更多关于 Ajax入门

一.jQuery复习 1.jQuery介绍 2.jQuery下载与安装在eclipse中使用js文件编写好html页面,启动tomcat即可在浏览器中显示使用了jQuery的页面. 3. jQuery选择器 web页面开发的两个要素: 　　- 选择 html页面上的哪些元素　　-在这些元素上做哪些动作 jQuery选择器: 　　- 定义: 用于选中需要操作的页面元素　　- 语法1: jQuery(选择器表达式) 　　- 语法2: $(选择器表达式) 1)基本选择器是jQuery最基础也是最常用的选择器表达式 2)层叠选择器根据元素的位置关系来获取元素的选择器表达式 3)属性选择器根据元素的属性值来选择元素的选择器表达式 4)位置选择器通过位置获取指定的元素,例如"获取第3个元素" 5)表单选择器是获取表单元素的简化形式,例如:获取所有的文本框. 4.操作元素属性　　 1)attr(name|properties|key) - 获取或设置元素属性　　传递一个参数的时候表示获取,传递两个参数的时候表示设置. 　　 $("a[href*='163']").attr("href"); 　　 $("a[href*='163']").attr("href","http://www.163.com"); 　　获取多个元素的某一个属性,会返回第一个符合要求的属性值　　

CSS 基础（一）

阅读更多关于 CSS 基础（一）

一、初识 CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素样式通常存储在样式表中把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题外部样式表可以极大提高工作效率外部样式表通常存储在 CSS 文件中多个样式定义可层叠为一个样式表定义如何显示 HTML 元素，就像 HTML 中的字体标签和颜色属性所起的作用那样。样式通常保存在外部的 .css 文件中。我们只需要编辑一个简单的 CSS 文档就可以改变所有页面的布局和外观。二、语法 CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明选择器通常是需要改变样式的 HTML 元素。每条声明由一个属性和一个值组成。属性是希望设置的样式属性，每个属性有一个值，属性和值被冒号分开。 CSS声明总是以分号结束，声明总以大括号括起来 p {color:red;text-align:center;} 注意：为了让CSS可读性更强，可以每行只描述一个属性 p { color:red; text-align:center; } 注释 CSS注释以 "/*" 开始, 以 "*/" 结束 /*这是个注释*/ p { text-align:center; /*这是另一个注释*/ color:black; font-family:arial; } 三、ID 和

css基本选择器

阅读更多关于 css基本选择器

CSS基本选择器（对指定的标签设置样式，要把指定的标签选择出来）：元素选择器、类选择器、id选择器、组合选择器、通用选择器 1. 元素选择器（类型选择器或标记选择器）：声明哪些元素采用css样式　 2. 类选择器（class）：应用样式而不考虑具体设计的元素，为了将类选择器的样式与元素进行关联，必须将元素中的class属性指定一个适当的值。　　　　　 class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示。也可以指定特定的HTML元素使用class 。　　　　　　在HTML中，一个class属性还可能包含多个属性值，各个值之间用空格分隔，表示将多类应用到同一个标记中。可以使用多次，表示类别。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> /*class 选择器用于描述一组元素的样式*/ /*所有的 p 元素使用 class="special" */ p.special{ color: red; } </style> </head> <body> <h1 class="special">应用类属性</h1> <p class="special"> 应用段落<

关于IE6下CSS选择器失效的问题

阅读更多关于关于IE6下CSS选择器失效的问题

前2天在实习公司做了1张网页，在其他所有浏览器上都表现的比较好，唯独IE6下后半部分CSS完全失效，前半部分者是完好的。开始以为是不是IETester出了问题，后来新建了个页面，写了几句代码，然后发现IE6下样式有效。所以我又把原来页面的代码注释掉，重写html，发现只要是在这张页面后半部分的代码样式在IE6下就会失效。我突然想到以前培训的时候我同学发生过页面里面明明有代码但在网页上面显示却一片空白，我在想是不是和上次一样也是编码的问题，然后去 CSS样式里面把编码改成utf-8 ,刷新IETester发现样式有效。产生原因：CSS文件里面包含注释导致IE6下样式失效解决方法：删除注释或者把CSS样式里面的编码改成utf-8 来源： oschina 链接： https://my.oschina.net/u/937429/blog/101890

提升效率 jQuery选择器大全

阅读更多关于提升效率 jQuery选择器大全

提升效率 jQuery选择器大全在jQuery 中,jQuery 为编写代码者提供了异常强大的选择器用来帮助我们获取页面上的对象, 并且将对象以jQuery 包装集的形式返回。本文主要对常用的jQuery 选择器进行一个介绍及归类。 jQuery 选择器大体上可分为 4 类：基本选择器、层次选择器、过滤选择器、表单选择器。其中过滤选择器可以分为：简单过滤选择器、内容过滤选择器、可见性过滤选择器、属性过滤选择器、子元素过滤选择器、表单对象属性过滤选择器。基本选择器： $("#myELement") 选择id值等于myElement的元素，id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素 $("div") 选择所有的div标签元素，返回div元素数组 $(".myClass") 选择使用myClass类的css的所有元素 $("*") 选择文档中的所有的元素可以运用多种的选择方式进行联合选择：例如$("#myELement,div,.myclass") 层叠选择器： $("form input") 选择所有的form元素中的input元素 $("#main > *") 选择id值为main的所有的子元素 $("label + input") 选择所有的label元素的下一个input元素节点

JQuery选择器大全

阅读更多关于 JQuery选择器大全

jQuery 的选择器可谓之强大无比，这里简单地总结一下常用的元素查找方法 $("#myELement") 选择id值等于myElement的元素，id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素 $("div") 选择所有的div标签元素，返回div元素数组 $(".myClass") 选择使用myClass类的css的所有元素 $("*") 选择文档中的所有的元素，可以运用多种的选择方式进行联合选择：例如$("#myELement,div,.myclass") 层叠选择器： $("form input") 选择所有的form元素中的input元素 $("#main > *") 选择id值为main的所有的子元素 $("label + input") 选择所有的label元素的下一个input元素节点，经测试选择器返回的是label标签后面直接跟一个input标签的所有input标签元素 $("#prev ~ div") 同胞选择器，该选择器返回的为id为prev的标签元素的所有的属于同一个父元素的div标签基本过滤选择器： $("tr:first") 选择所有tr元素的第一个 $("tr:last") 选择所有tr元素的最后一个 $("input:not(:checked) + span") 过滤掉

前端学习(3)-CSS

阅读更多关于前端学习(3)-CSS

一 CSS CSS是Cascading Style Sheets的缩写，层叠样式表，用来控制网页数据的显示，可以使网页的显示与数据内容分离。二引入方式　　（1）行内式：在标记的style属性中设置CSS样式，不推荐使用。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Hello CSS</title> </head> <body> <div style="color: aqua;background-color: bisque">hello world</div> </body> </html> 　　（2）嵌入式：将CSS样式集中写在网页的<head></head>标签找那个的<style></style>标签中。结果和上图一致； <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Hello CSS</title> <style> div{ color: aqua; background-color: bisque; } </style> </head> <body> <div >hello world</div> </body> </html> 　　（3）链接式：写一个*

Web 前端之HTML和CSS

阅读更多关于 Web 前端之HTML和CSS

Web 前端之HTML 和CSS HTML被称为超文本标记语言(Hyper Text Markup Language),它不是一种编程语言,而是一种标记语言,标记语言是一套标记标签,HTML使用标记标签来描述网页.HTML文档描述网页,包含HTML标签和纯文本,也被称为网页 CSS是指层叠样式表(cascading Style Sheets),样式定义如何显示HTML元素,把样式添加到HTML4.0中,是为了解决内容与表现分离的问题,外部样式表可以极大提高工作效率,外部样式表通常存储在CSS文件中. 以上为官方说法.通俗来说,HTML负责的是显示内容,CSS负责的是样式.他俩在一起就像是我买了房子以后需要装修一样. HTML 中的小细节 HTML的入门简单,基础知识浅显易懂. 首先,HTML中常用字符集有GBK,GB2312和UTF-8. <meta name=＂keywords＂>用于显示网页的关键字行级元素inline:不能设置宽和高,它的宽和高是内容撑开的.eg.<a><span> 块级元素 block:可以设置宽和高.默认情况下,它的宽和高由父元素决定.eg.<p><div><h1-h6><table><o><ul> 严格来说,image既不属于行级元素,又不属于块级元素,但通常人们都将他归类为行级元素,属于一个过渡元素.这是后话. 看过了基础的知识

订阅 css选择器