css第一个元素 | 易学教程

css选择器中:first-child与:first-of-type

阅读更多关于 css选择器中:first-child与:first-of-type

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> css选择器中:first-child与:first-of-type是比较容易混淆的概念，这里用案例介绍它们具体的区别。 :first-child 选择器是css2中定义的选择器，从字面意思上来看也很好理解，就是第一个子元素。比如有段代码： <div > <p > 第一个子元素 </p> <h1 > 第二个子元素 </h1> <span > 第三个子元素 </span> <span > 第四个子元素 </span> </div> p:first-child 匹配到的是p元素,因为p元素是div的第一个子元素； h1:first-child 匹配不到任何元素，因为在这里h1是div的第二个子元素，而不是第一个； span:first-child 匹配不到任何元素，因为在这里两个span元素都不是div的第一个子元素；然后，在css3中又定义了:first-of-type这个选择器，这个跟:first-child有什么区别呢？还是看那段代码： <div > <p > 第一个子元素 </p> <h1 > 第二个子元素 </h1> <span > 第三个子元素 </span> <span > 第四个子元素 </span> </div> p:first-of-type 匹配到的是p元素

CSS3基础——笔记+实战案例(CSS基本用法、CSS层叠性、CSS继承性)

阅读更多关于 CSS3基础——笔记+实战案例(CSS基本用法、CSS层叠性、CSS继承性)

CSS3基础——笔记　　CSS是Cascading Style Sheet的缩写，翻译为"层叠样式表" 或 "级联样式表"。CSS定义如何显示HTML的标签央视，用于设计网页的外观效果。通过使用CSS实现页面的内容与表现形式分离，极大提高了工作效率。一、CSS基础用法　　CSS代码可以在任何文本编辑器中打开和编辑。因此，不管读者有没有变成基础，初次接触CSS时会感到很简单。 1.1 CSS样式　　样式是CSS最小的语法单元，每个样式包含两部分内容:选择器和声明(规则)，如下所示：选择器(Selector): 选择器告诉浏览器呢该样式将作用于页面中哪些对象，这些对象可以是某个标签、所有网页对象、指定Class或ID值等。浏览器在解析这个样式时，根据选择器来渲染对象的显示效果。声明(Declaration): 声明可以增加一个或者无数个，这些声明命令浏览器如何去渲染选择器指定的对象。声明必须包括两部分:属性和属性值，并用分号来标识一个声明的结束，在一个样式中最后一个声明可以省略分号。所有声明被放置在一对大括号内，然后整体紧邻选择器的后面。属性(Property): 属性是CSS提供的设置好的样式选项。属性名是一个单词或多个单词组成，多个单词之间通过连字符相连。这样能够直观表示属性所要设置样式的效果。属性值(Value): 属性值是用来显示属性效果的参数。它包括数值和单位

jQuery CSS()方法改变CSS样式实例解析

阅读更多关于 jQuery CSS()方法改变CSS样式实例解析

转自： http://www.jbxue.com/article/24588.html 分享一个 jQuery 入门实例：使用CSS()方法改变现有的CSS样式表，css()方法在使用上具有多样性。其中有一种可接受两个输入参数：样式属性和样式值，两者之间用逗号分隔。比如要改变链接颜色，可以这样编写代码： $("#61dh a").css('color','#123456'); //选择器‘$("#61dh a")'表示ID为‘#61dh'的元素下的所有链接。 //.css(‘color','#123456');表示把颜色设为'#123456' 如果需要改变多个样式属性，可先定义属性变量，然后直接赋值给css()方法。 var mycss = { background: '#EEE', width: '478px', margin: '10px 0 0', padding: '5px 10px', border: '1px solid #CCC' }; $("#result").css(divcss); 上述代码先定义了一个CSS样式属性变量“mycss”，类似于建立一个外部CSS文件，之后通过css()方法，把属性赋给ID为'#result'的DIV。另外jQuery提供的css()方法还可以查看某个元素的css属性值。（www.jbxue.com 脚本学堂）例如查看链接的颜色

从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式

阅读更多关于从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式

一.摘要本篇文章讲解如何使用jQuery获取和操作元素的属性和CSS样式. 其中DOM属性和元素属性的区分值得大家学习. 二.前言通过前面几章我们已经能够完全控制jQuery包装集了, 无论是通过选择器选取对象, 或者从包装集中删除,过滤元素. 本章将讲解如何使用jQuery获取和修改元素属性和样式. 三. 区分DOM属性和元素属性一个img标签: <img src="images/image.1.jpg" id="hibiscus" alt="Hibiscus" class="classA" /> 通常开发人员习惯将id, src, alt等叫做这个元素的"属性". 我将其称为"元素属性". 但是在解析成DOM对象时, 实际浏览器最后会将标签元素解析成"DOM对象", 并且将元素的"元素属性"存储为"DOM属性". 两者是有区别的. 虽然我们设置了元素的src是相对路径:images/image.1.jpg 但是在"DOM属性"中都会转换成绝对路径: http://localhost/images/image.1.jpg . 甚至有些"元素属性"和"DOM属性"的名称都不一样,比如上面的元素属性class, 转换为DOM属性后对应className. 牢记, 在javascript中我们可以直接获取或设置"DOM属性": <script type="text

jQuery基础

阅读更多关于 jQuery基础

1-1 环境搭建搭建一个jQuery的开发环境非常方便，可以通过下列几个步骤进行。下载jQuery文件库在jQuery的官方网站（http://jquery.com）中，下载最新版本的jQuery文件库。在网站中找到最新版本文件的下载按钮，将jQuery框架文件下载到本地即可，本教案使用的版本为稳定版：1.9.0版。引入jQuery文件库下载完jQuery框架文件后，并不需要任何的安装，仅需要使用<script>文件导入标记，将jQuery框架文件导入页面中即可，假设该文件下载后保存在项目文件夹Jscript中，那么，在页面的<head></head>中加入如下代码： <script language="javascript" type="text/javascript" src="1.9.0/jquery.js"></script> 在页面的头部分，加入上述代码后，便完成了jQuery框架开发环境的搭建，就可以开始我们的jQuery学习了。任务我来试试: 点击页面中的按钮，你可以让隐藏的DIV显示出来。 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>初识jQuery</title> 5 <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text

初始css一

阅读更多关于初始css一

初始CSS 一、form表单补充 form表单关键性的属性补充 form表单关键性的属性 action 控制的是数据的提交路径 1、不写默认是朝着当前页面所在的地址提交 2、全路径 3、后缀（/index/） method 控制的是提交方式 form表单默认是get请求 method='get' 你也可以指定成post请求 method='post' enctype 控制的是数据提交的编码格式默认情况下form表单是不能够直接发送文件的如果你要发送文件必须将该参数由默认的urlencoded改为formdata 注意事项： 1、获取用户输入的标签都是用value属性来存放用户的输入获取用户输入的标签都应该有name属性就类似于字典的key value属性就类似于字典中的value 2、如何给input设置默认可以直接给input标签加value属性 3、input框如何设置提示信息 username:<input type='text' value='jason' placeholder='用户名'> 二、验证form提交数据结合Flask演示验证后端框架 Django Flask Tornado Flask框架 pip install Flask get请求能够携带参数但是参数的携带方式是直接跟在url后面的 url?xxx=ooo&yyy=bbb&lll

css中伪类/伪元素详解

阅读更多关于 css中伪类/伪元素详解

一、伪类和伪元素伪类和伪元素都是用来修饰不在文档树中的部分，区别在于，伪类用于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的(如:hover/:active)。而伪元素则用于创建一些不在文档树中的元素，并为其添加样式(如:before/:after)。二、常用伪类伪类用法兼容 :link 未访问的链接主流浏览器都支持 :visited 已访问的链接主流浏览器都支持 :hover 鼠标划过链接主流浏览器都支持 :active 已选中的链接主流浏览器都支持 :focus 选择元素输入后具有焦点主流浏览器都支持，IE8中必须申明<!DOCTYPE> :enabled 元素可用状态下 IE8及更早版本不支持 :disabled 元素禁用状态下 IE8及更早版本不支持 :checked 元素选中状态下 IE8及更早版本不支持 :first-child 选择元素的第一个子元素主流浏览器都支持，IE8或更早版本中必须申明<!DOCTYPE> :last-child 选择元素的最后一个子元素 IE8及更早版本不支持 :nth-child() 选择元素的一个或多个特定的子元素 IE8及更早版本不支持 :nth-last-child() 从这个元素的最后一个子元素开始选择元素的一个或多个特定的子元素 IE8及更早版本不支持

css选择器，伪类和伪元素的区别

阅读更多关于 css选择器，伪类和伪元素的区别

1、类选择器：class名 =>p.info {} //选择class为info的所有p元素 2、id选择器： id名 => #info {} //选择id为info的元素不能为多个元素同时设置相同的id 3、标签选择器：标签名 => div {} //选择所有的div 4、并列选择器：#info，.info, p {} //同时选择多个选择器 5、后代选择器：父选择器子/孙选择器或父选择器>子选择器　　　　　　　 div p {} //div内的所有p 　　　　　　　　div>p{} //div内仅邻的子元素p不包含p元素内部的p元素 6、兄弟选择器： div+p //选择每个紧跟在div元素后面的第一个p元素　　　　　　　　p~ul //选择前面有p元素的所有ul元素　　　　 7、属性选择器：　　　　　　　　[title] //选择所有有title属性的元素　　　　　　　　[title=info] //选择所有title属性值为info的元素　　　　　　　　　　[title~=info] //选择所有title属性值包含info的元素　　　　　　　　　[title|=info] //选择所有title属性值以info开头的元素　　　　　　　　[title^=info] //选择所有title属性值以info开头的元素　　　　　　　　[title$

CSS选择器

阅读更多关于 CSS选择器

一、基本选择器序号选择器含义 1. * 通用元素选择器，匹配任何元素 2. E 标签选择器，匹配所有使用E标签的元素 3. .info class选择器，匹配所有class属性中包含info的元素 4. #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; } #info { background:#ff0; } p#info { background:#ff0; } 二、多元素的组合选择器序号选择器含义 5. E,F 多元素选择器，同时匹配所有E元素或F元素，E和F之间用逗号分隔 6. E F 后代元素选择器，匹配所有属于E元素后代的F元素，E和F之间用空格分隔 7. E > F 子元素选择器，匹配所有E元素的子元素F 8. E + F 毗邻元素选择器，匹配所有紧随E元素之后的同级元素F 实例： div p { color:#f00; } #nav li { display:inline; } #nav a { font-weight:bold; }

CSS选择器

阅读更多关于 CSS选择器

CSS选择器一、基本选择器序号选择器含义 1. * 通用元素选择器，匹配任何元素 2. E 标签选择器，匹配所有使用E标签的元素 3. .info class选择器，匹配所有class属性中包含info的元素 4. #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; } #info { background:#ff0; } p#info { background:#ff0; } 二、多元素的组合选择器序号选择器含义 5. E,F 多元素选择器，同时匹配所有E元素或F元素，E和F之间用逗号分隔 6. E F 后代元素选择器，匹配所有属于E元素后代的F元素，E和F之间用空格分隔 7. E > F 子元素选择器，匹配所有E元素的子元素F 8. E + F 毗邻元素选择器，匹配所有紧随E元素之后的同级元素F 实例： div p { color:#f00; } #nav li { display:inline; } #nav a { font-weight

订阅 css第一个元素