css选择器 | 易学教程

jQuery-选择器

阅读更多关于 jQuery-选择器

使用jQuery选择器　　1、可以使代码更简洁的写　　　　document.getElementById()使用jQuery的写：$("#demo") 　　2、支持CSS选择器　　3、提供了完善的处理机制（完善的兼容处理） 1、基本选择器　　基本选择器是JQuery最常用的选择器，也是最简单的选择器，它通过元素id、class和标签名来查找DOM元素。　　* : 选择所有元素　　 //$("*").css("background","red") 　　#id ：通过id属性值获取元素　　//$("#id").css("background","red") 　　Element ：通过元素名获取元素　　selector1,selector2 ：获取列表中指定的所有元素　　.class ：获取使用class样式的所有元素、 2、层级选择器　　如果想通过 DOM 元素之间的层次关系（后代元素, 子元素, 相邻元素, 兄弟元素等）来获取特定元素。　　ancetor descendant ：匹配祖先元素下的后代元素　　 //$("body div").css("background","red") 　　parent > child ：匹配父元素下的子元素　　 //$("body>div").css("background","red") 　　prev + next

前端 --> CSS基础

阅读更多关于前端 --> CSS基础

*****2019.05.30 补充的 css样式： https://www.cnblogs.com/xt12321/p/10951577.html ******* 前端之CSS基础　　一、语法结构　　二、三种引入css样式的方式　　三、学习css的流程写在前面 css:层叠样式表万行代码，注释先行： /*单行注释*/ /* 多行注释 */ 一、语法结构：选择器 {属性:属性值;属性：属性值;} 二、三种引入css样式的方式 1.head内style标签内部直接书写css代码 2.link标签引入外部css文件 3.直接在标签内通过style属性书写css样式 ps:注意页面css样式通常都应该写在单独的css文件中三、学习css的流程 3.1 先学如何直接查找标签 (1) 基本选择器标签选择器 id选择器类选择器通用选择器 (2) 组合选择器后代选择器儿子选择器毗邻选择器弟弟选择器 (3) 属性选择器补充：分组与嵌套 (4) 伪类选择器 (5) 伪元素选择器 3.2 如何修改标签样式 (1) 宽高、字体 (2) 字体颜色 (3) 文本属性 (4) 背景属性 (5) 边框 (6) 画圆 (7) display属性 (8) visibility:hidden与display的区别 3.1 先学如何直接查找标签 (1) 基本选择器标签选择器 id选择器

sass学习笔记2

阅读更多关于 sass学习笔记2

今天介绍sass在重用代码时最具威力的两个功能。一个是嵌套 (Nesting)，一个混合（Mixin）。我们在写CSS通过需要多个后代选择器组合到一起才能定位到目标元素上，而这定义过程，此元素的父元素与其他选择器都有许多相同的部分，嵌套就是把这些相同的部分放到某一层花括号里，然后通过花括号的层层缩进堆砌，找到它们的共性与特性。 @charset "utf-8";//必须设置了这个才能编译有中文的注释 nav { ul { margin: 0; padding: 0; list-style: none; } li { display: inline-block; } a { display: block; padding: 6px 12px; text-decoration: none; } } //------------------------------ nav ul { margin: 0; padding: 0; list-style: none; } nav li { display: inline-block; } nav a { display: block; padding: 6px 12px; text-decoration: none; } 当某一天，我们要兼容IE678等低级浏览器，发现它直接用nav不行时，需要改成.nav，我们只要改一处就行了

前端开发-css基础入门

阅读更多关于前端开发-css基础入门

CSS cascading（层叠） style（样式） sheet（表） css注释 /* 注释内容 */ 快捷键:ctrl ? 引入方式  <div style="width:100px;height:100px;"></div>  <head> <style> div{ background-color: red; height: 100px; width: 100px; } </style> </head>  <link rel="stylesheet" href="css文件路径" > css选择器　　基本选择器元素选择器 div{ } id选择器 #demo 在html中(id="demo") 类选择器 .demo 在html中(class="demo") 通用选择器 *{ } 组合选择器后代选择器 div a 找div下所有的a 直接子元素选择器 div>a 只找下一代a 兄弟选择器 div.a 只找下一个兄弟弟弟选择器 div~a 找到所有兄弟属性选择器 [title] 分组选择器 demo1，demo2 伪类选择器 a:link a:visited a:hover a:sctive input:focus 伪元素选择器 p::before p

CSS样式学习

阅读更多关于 CSS样式学习

css 相关学习选择器： MysCss.css----> h1,h2,h3{ color:blue;font-size:50px } #引用该文件 rel=stylesheet> 派生选择器： { color:red } <！DOCTYPE html> id选择器直接根据id指定样式，以#定义： id选择器可以和派生选择器同时使用类选择器 <！DOCIYPE htmL> .pclass{ color:red;.divclass{ coLor:blueviolet; } 属性选择器： <！DOCTYPE html> css列表 class选择器一般是通用的可重复的 id选择器最好是独立的针对某一个标签的从资源的加载上也不相同，id是先找到结构内容再去找样式，class是先加载好样式再找结构。 CSS定位 relative:相对定位 left:50px,top:30px不是指这一块元素左移50px，向上移30px，而是指我的这一块元素，相对于原来左边的位置移动了多少px，相对于原来的顶部移动了多少px，可以理解为尽管该块产生了移动，但是移动前的位置块依然保留，并作为了一个该元素块的参考。 absolute:绝对定位就是根据整个页面的位置决定初始的元素块，然后left,和top也是和上面一样的。 fixed:可以固定在屏幕的某一块区域（类似小广告） static

Jquery需要掌握的技巧

阅读更多关于 Jquery需要掌握的技巧

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> 检查 jQuery 是否加载在使用 jQuery 进行任何操作之前，你需要先确认它已经加载： if (typeof jQuery == 'undefined') { console.log('jQuery hasn\'t loaded'); } else { console.log('jQuery has loaded'); } 返回顶部按钮利用 jQuery 中的 animate 和 scrollTop 方法，你无需插件就可以创建简单的 scroll up 效果: // 返回顶部$('a.top').click(function (e) { e.preventDefault(); $(document.body).animate({scrollTop: 0}, 800); }); <a class="top" href="#">Back to top</a> 调整 scrollTop 的值即可改变滚动着陆位置。你实际所做的是在 800 毫秒内不断设置文档主体的位置，直到它滚动到顶部。预加载图片如果你的网页使用了大量并非立即可见的图片（例如悬停鼠标触发的图片），那么预加载这些图片就显得很有意义了: $.preloadImages = function () { for (var

[翻译]帮助文档-jQuery 选择器

阅读更多关于 [翻译]帮助文档-jQuery 选择器

jQuery的选择器是CSS 1-3，XPath的结合物。jQuery提取这二种查询语言最好的部分，融合后创造出了最终的jQuery表达式查询语言。如果你了解CSS（绝大部分WEB开发者都用到的），那么你学起来就很容易了。同时使用CSS和XPath 看几个例子：隐藏所有包含有链接的段落： $("p[a]").hide(); 显示页面的第一个段落： $("p:eq(0)").show(); 隐藏所有当前可见的层元素： $("div:visible").hide(); 获取所有无序列表的列表项： $("ul/li") /* valid too: $("ul > li") */ 取得name值为bar的输入字段的值： $("input[@name=bar]").val(); 所有处于选中状态的单选r按钮： $("input[@type=radio][@checked]") 如果你对查询语言的工作原理还有疑问，可以订阅这里的邮件列表。 CSS查询器 jQuery完全支持CSS1.3。关于CSS的一些资料查看下面的连接： CSS 1 CSS 2 CSS 3 下面列出来的是支持的CSS查询器的列表式语法： * 任何元素 E 类型为E的元素 E :root 类型为E，并且是文档的根元素 E:nth-child(n) 是其父元素的第n个类型为E的子元素 E:first-child

学习总结

阅读更多关于学习总结

表单分类：文本类、按钮类、选择类文本类：分为文本框、密码框、文本域选择类：分为单选、多选、下拉列表、文件。其中同组单选按钮name属性要一致按钮类：分为普通按钮、提交按钮、重置按钮和图片按钮。 CSS 概念：CSS是级联样式表，它是表现HTML或XHTML文件样式的计算机语言，包括对字体、颜色、边距、高度、宽度、背景图片、网页定位等设定。结构：选择器{声明1；声明2；……} 选择器分类：标签选择器、类选择器、ID选择器、层次选择器、伪类选择器。其中类选择器格式为“.类名称”，ID选择器格式为“#id名称” 来源： CSDN 作者： weixin_46035018 链接： https://blog.csdn.net/weixin_46035018/article/details/103588792

详解强大的jQuery选择器之基本选择器、层次选择器

阅读更多关于详解强大的jQuery选择器之基本选择器、层次选择器

前言　　自从接触了jQuery后就为其强大的选择器所震撼，这也正是jQuery的优势所在。　　jQuery允许开发者使用从CSS1到CSS3几乎所有的选择器，以及jQuery独创的高级而复杂的选择器。另外还可以加入插件使其支持XPath选择器，甚至开发者可以编写属于自己的选择器(即选择器插件，参考上篇： jQuery插件原来如此简单——jQuery插件的机制及实战 )。正是jQuery强大的选择器功能，让它很容易上手，吸引了大批的开发者，本文就来介绍一下强大的jQuery选择器。 jQuery选择器类型　　jQuery选择器主要分为四类：　　1、基本选择器　　2、层次选择器　　3、过滤选择器　　4、表单选择器　　由于过滤选择器内容比较多，因此本文仅介绍前两种，下篇文章将介绍后两种。一点准备工作　　为了能让大家看到具体的效果，这里先创建一个示例页面，里面包含各种<div>和<span>元素，然后用jQuery选择器来匹配元素并调整它们的样式。　　示例页面代码： <!DOCTYPE html><html><head> <title>Demo</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <style type="text/css"> div,span,p{

Css基础

阅读更多关于 Css基础

Css 四种引入方式内嵌式直接在html 标签中嵌入式 <head><style type="text-css"></style></head> 连接式<head><link href="style.css" type="text/css" /></head> 导入式<style type="text-css">@import "style.css"</style> 先解析下载html结构，最后运行css样式，这个基本报废 Css选择器标记选择器：h1,h2,p{margin:0;padding:0;} 类别选择器: .class {属性:值;属性:值} id 选择器：#名称{属性:值;属性:值} 后代选择器: .class或者#名称 h3{ } 交集选择器: 标记选择器.类别选择器，其结果是选中两个标签各自元素范围的交集 // 注意其中第一个必须是标记选择器，如 p.class1 ，但有时候会看到 .class1.class2 ，即 2 个都是类选择器，但 IE6 不兼容代码： <style type="text/css"> ul{color:blue;} li.first{color:yellow;font-size:30px;} /* 交集选择器优先级是最高的，但和其父类选择器存在继承性 */ .first{color:red;font-weight:bold;

订阅 css选择器