css选择器 | 易学教程

jQuery概述

阅读更多关于 jQuery概述

jQuery特点 jQuery是一套简洁、快速、灵活的javascript脚本库。jQurey具有如下特点： 1.代码精致小巧 2.强大的功能函数 3.跨浏览器 4.链式的语法风格 5.插件丰富 jQuery下载与配置 'http://jquery.com/download' 配置 '<script type="text/javascript src="js/jquery-3.2.1min.js">' jQuery选择器 jquery的工厂函数'$'。在jquery中无论那种类型的饿选择器都需要从'$'和'()'开始。 1.在参数中使用标记名 $("div") 2.在参数中使用id $("#username") 3.在参数中使用css类名 $(".btn_grey") 基本选择器 1.##元素选择器 2.##类名选择器 3.##复合选择器层级选择器 1.##ancestor descendant选择器 2.##parent>child选择器 3.##prev+next选择器 4.##prev~siblings选择器过滤器选择器 1.##简单过滤器 2.##内容过滤器 3.##可见性过滤器 4.##表单对象的属性过滤器 5.##子元素过滤器属性选择器表单选择器来源： https://www.cnblogs.com/qzgsg/p/11185980.html

jQuery学习(三)——选择器总结

阅读更多关于 jQuery学习(三)——选择器总结

1、基本选择器 id选择器：$(“#id名称”); 元素选择器：$(“元素名称”); 类选择器：$(“.类名”); 通配符：* 多个选择器共用(并集) 案例代码： 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>基本选择器</title> 6 <link rel="stylesheet" href="../../css/style.css" /> 7 <script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script> 8 <script> 9 $(function(){ 10 $("#btn1").click(function(){ 11 $("#one").css("background-color","pink"); 12 }); 13 14 $("#btn2").click(function(){ 15 $(".mini").css("background-color","pink"); 16 }); 17 18 $("#btn3").click(function(){ 19 $("div").css("background-color","pink"); 20 }); 21 22 $("#btn4")

css和div

阅读更多关于 css和div

1.css：（Cascading style sheet）使用css的原因： css能够实现内容与样式的分离。但是不容易在界面中维护，调整高度等难度系数比表格大。 css后期维护，改变背景颜色，字体颜色等比较方便。 css精确的控制，实现精美，复杂的页面。主要功能：美化网页，实现网页的布局，图片等的定位。（排版与风格设计简化的web开发） 2.使用css基本格式： <head> <style> 选择器 {对象的属性：属性值} </style> </head> 选择器：就是所要修饰的对象； 3.标签的类型：标签选择器：就是容器的名字如<p>（直接写p{；；；}）就可以了。类选择器：需要有.在修饰对象的前面。如<p class="text"> .text{;;;;} ID选择器：需要#在修饰对象的前面。如<div id="text"> #text{;;;;} 4.三种选择器的区别：标签选择器：如果在body出现标签，全都修饰。类选择器：主要有class标示。有class的地方就会被修饰。 ID选择器：ID选择器是唯一的，只能用一次。 5.选择器的优先级：ID选择器>类选择器>标签选择器 6. 标签css示例 <html> <head> <style> p{font-size:12px; color:#FFF；} </style> </head> <body>

css权重

阅读更多关于 css权重

除了浮动之外，css权重问题是你要了解的，最复杂的一个概念之一。css每条规则权重的不同，是你所期望的效果，没有通过css规则在元素上生效的主要原因。为了减少调试bug的时间，你需要了解浏览器是怎样解析你的代码的。为了完成这个目标，你需要对权重是如何工作的，有一个清楚的认识。很多Css出现问题的场景，都是某处定义了一个更高权重的规则，导致此处规则不生效。 Css权重问题并不简单，而且有很多或具体或抽象的理论来解释这个问题。本文也将探讨这个问题，我相信如果你喜欢星球大战的话你肯定会理解这些概念的~ 我们将会讨论关于css权重的主要问题，包括例子，规则，原理，通用解决方案以及一些资源。 CSS权重：概述权重决定了哪一条规则会被浏览器应用在元素上。权重的不同，是你所期望的效果，没有通过css规则在元素上生效的主要原因。权重的级别划分时包含了所有的css选择器如果两个选择器作用在同一元素上，则权重高者生效。权重的级别根据选择器被划分为四个分类：行内样式，id，类与属性，以及元素。你可以通过 CSS权重之争进一步了解CSS权重。你也可以通过 CSS Specificity for Poker Players 进一步了解CSS权重。如果两个选择器权重值相同，则最后定义的规则被计算到权重中(后面定度的CSS规则权重要更大，会取代前面的CSS规则) 如果两个选择器权重值不同

从覆盖bootstrap样式谈css选择器优先级

阅读更多关于从覆盖bootstrap样式谈css选择器优先级

样式优先级首先简单说几个定义样式的方式: 元素内嵌： <li><a href="" style="color:#ffffff;">SHOW</a></li> 　　文档内嵌： <style type="text/css"> /* 内部样式 */ h3 { color: green; } </style> 　　外部样式： <link rel="stylesheet" href="css/style.css"> 上面这些都是题外话，接下来我来说说我遇到的问题，先看代码 <header class="navbar navbar-default navbar-fixd-top " id="benner"> <div class="container"> <a href="#" class="scrollable">FishShe</a> <button class="navbar-toggle collapsede"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <nav class="collapse navbar-collapse">

CSS 样式的优先级小结

阅读更多关于 CSS 样式的优先级小结

1. 同一元素引用了多个样式时，排在后面的样式属性的优先级高例如，下面的 div，同时引用了 [.default] 和 [.user] 中的样式，其中 [.user] 样式中的 width 属性会替换 [.default] 样式中的 width 属性。 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <style type="text/css"> .default{ width: 100px; /* 定义 width 属性 */ height: 100px; background-color: #B6E0AE; margin: -50px 0 0 -50px; position: absolute; top: 50%; left: 50%; } .user{ width: 150px; /* 这里 width 的值替换了前面 width 的值 */ } </style> </head> <body> <div class="default user"></div> </body> </html> 2. 样式选择器的类型不同时，优先级顺序为：id 选择器 > class 选择器 > 标签选择器例如，下面的 div 即获取 id

CSS的工作原理（样式重复的标签，浏览器到底会选择哪个样式？？）

阅读更多关于 CSS的工作原理（样式重复的标签，浏览器到底会选择哪个样式？？）

举个例子，标签P，也许会在嵌入样式表、外部样式表中多次被设置相关属性的值(比如color: red;/color : blue)，那么浏览器到底是以哪个值来显示P的样式呢？？？这就是CSS的工作原理。（其中特指度比较重要） CSS有3种工作机制：1.继承 2.层叠 3.特指（其中层叠原则是基于继承和特指的） 1.继承：css中的祖先元素会向后代传递一样东西：CSS属性的值。body是所有元素的祖先，如果我们指定body{color:red;},那么文档中的所有元素都继承这一样式。这就是为什么，我们在记事本程序写了一行字以后，重命名为：xxx.html，在用不同浏览器打开时，会有不同的字体效果，因为每个浏览器都有自己的预定义样式表，其中包括body中的字体属性，而我们用浏览器打开我们的Html时，我们继承了这个属性。当然，不是所有的属性都能被继承，能被继承的属性大多数和文本有关，比如颜色、字体、字号等。而有些属性，被继承下来没有意义，或者被继承下来会影响页面的布局，比如涉及元素定位，margin,padding，border等属性。 2.层叠：也就是CSS中的C（cascading）,主要是按照样式来源和特指度来层叠。 a）样式来源：以下是浏览器层叠各个来源样式的顺序：浏览器默认样式表用户样式表（比如有视力障碍的用户，加了一个body{font-size:200%}）

Css样式覆盖顺序

阅读更多关于 Css样式覆盖顺序

1，css样式选择器的优先级为： “元素上的style” > “id选择器” > “class类及伪类选择器” > “元素类型及伪类选择器” 。参考： CSS2 cascade - 6.4.3 Calculating a selector's specificity 2，css样式选择器的优先级相同时，根据样式被加载的顺序渲染，后面定义的样式生效。和元素class出现的顺序无关，如class="class2 class1”，在class2、lass1的样式选择器优先级相同的情况下，并不是class1覆盖class2，而是依赖于class2,、class1所在样式文件被link进来的顺序。 3，要让某个样式的优先级变高，可以使用!important来指定。参考： CSS2 cascade - 6.4.2 !important rules 4，css属性的继承：参考： css样式表中的样式覆盖顺序查看Firebug中的Style标签中各css属性的覆盖，可以校验上述的结论！来源： https://www.cnblogs.com/fhtwins/p/3711451.html

python之路 jquery

阅读更多关于 python之路 jquery

简介： jQuery是一个兼容多浏览器的javascript库，核心理念是write less,do more(写得更少,做得更多)。jQuery在2006年1月由美国人John Resig在纽约的barcamp发布，吸引了来自世界各地的众多JavaScript高手加入，由Dave Methvin率领团队进行开发。如今，jQuery已经成为最流行的javascript库，在世界前10000个访问最多的网站中，有超过55%在使用jQuery。参考文档： http://jquery.cuishifeng.cn/ 一、导入+简单应用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>shuaige</title> <style> .r { background-color:red; /* 给标签设置背景颜色为红色*/ } </style> </head> <body> <div id="id_1"> 123 </div> <div class="c1">1</div> <div class="c1">2</div> <div class="c1">3</div>  <script type="text/javascript" src="jquery-1.8.2

层次选择器

阅读更多关于层次选择器

层次选择器通过DOM元素间的层次关系获取元素，其主要的层次关系主要包括后代、父子、相邻、兄弟关系，通过其中某类关系可以方便快捷地定位元素，其详细说明如表2-3所示。选择器功能返回值 ancestor descendant 根据祖先元素匹配所有后代元素元素集合 parent > child 根据父元素匹配所有子元素元素集合 prev + next 匹配所有紧接在prev元素后的相邻元素元素集合 prev ~ siblings 匹配 prev元素之后的所有兄弟元素元素集合说明：ancestor descendant 与 parent > child所选择的元素集合是不同的，前者的层次关系是祖先与后代，而后者是父子关系；另外，prev + next可以使用.next()代替，而prev ~ siblings可以使用nextAll()代替。 Demo如下： 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XMTML 1.0 2 Transitional//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 4 <html xmlns="http://www.w3.org/1999/xhtml"> 5 <head> 6 <title

订阅 css选择器