css选择器

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): 属性值是用来显示属性效果的参数。它包括数值和单位

HTML5中类jQuery选择器querySelector的使用

阅读更多关于 HTML5中类jQuery选择器querySelector的使用

简介 HTML5向Web API新引入了 document.querySelector 以及 document.querySelectorAll 两个方法用来更方便地从DOM选取元素，功能类似于jQuery的选择器。这使得在编写原生JavaScript代码时方便了许多。用法两个方法使用差不多的语法，都是接收一个字符串参数，这个参数需要是合法的CSS选择语法。 element = document.querySelector('selectors'); elementList = document.querySelectorAll('selectors'); 其中参数selectors 可以包含多个CSS选择器，用逗号隔开。 element = document.querySelector('selector1,selector2,...'); elementList = document.querySelectorAll('selector1,selector2,...'); 使用这两个方法无法查找带伪类状态的元素，比如 querySelector(':hover') 不会得到预期结果。 querySelector 该方法返回满足条件的单个元素。按照深度优先和先序遍历的原则使用参数提供的CSS选择器在DOM进行查找，返回第一个满足条件的元素。 element =

jQuery入门笔记

阅读更多关于 jQuery入门笔记

一.jQuery下载安装 1.从 jquery.com 下载 jQuery 库（学习推荐用这种方法，可以在没有网络时使用） 2.从 CDN 中载入 jQuery, 如从 Google 中加载 jQuery（这种方法需要网络环境），可以通过 CDN（内容分发网络）引用它。Staticfile CDN、百度、又拍云、新浪、谷歌和微软的服务器都存有 jQuery 。如果你的站点用户是国内的，建议使用百度、又拍云、新浪等国内CDN地址。二.jQuery 语法通过 jQuery，您可以选取（查询，query） HTML 元素，并对它们执行"操作"（actions） jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。基础语法： $( selector ). action () 美元符号定义 jQuery 选择符（selector）"查询"和"查找" HTML 元素 jQuery 的 action() 执行对元素的操作实例: $(this).hide() - 隐藏当前元素 $("p").hide() - 隐藏所有 <p> 元素 $("p.test").hide() - 隐藏所有 class="test" 的 <p> 元素 $("#test").hide() - 隐藏所有 id="test" 的元素例如： <!DOCTYPE html> <html> <head

关于浏览器css选择器性能优化

阅读更多关于关于浏览器css选择器性能优化

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> 作为一个前端开发，我觉得很有必要了解浏览器对css选择器的解析，因为这个关系到页面的渲染，高效的方式、避开开销大的方式这些无疑为网站加载缩短了时间。最近在新的项目中陷入了一个误区，也是出于对jquery使用的了解，于是把jquery中选择器的优化放到了写css上面，但是发现其实这两者是不一样的，浏览器解析css是本身默认的规则，而jquery是模拟出来的规则为了用户更好的使用。后面去查找这方面的资料，于是发现自己的错误是那么的可笑。找到了阿里前端的一篇文章 http://www.aliued.cn/2013/01/24/ 网站css选择器性能讨论.html ，当然也找了其他的一些文章，不过都有说到了safari和webkit的架构师David Hyatt的两段话：样式系统从最右边的选择符开始向左进行匹配规则。只要当前选择符的左边还有其他选择符，样式系统就会继续向左移动，直到找到和规则匹配的元素，或者因为不匹配而退出。如果你非常在意页面的性能那千万别使用CSS3选择器。实际上，在所有浏览器中，用 class 和 id 来渲染，比那些使用同胞，后代选择器，子选择器（sibling, descendant and child selectors）对页面性能的改善更值得关注。因为我项目的原因

Css样式技巧：常用的选择器和通用选择器

阅读更多关于 Css样式技巧：常用的选择器和通用选择器

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> 有效且结构良好的文档为你要应用的样式提供了一个框架。要想使用 CSS 将样式应用于特定的 HTML 少已素，需要想办法找到这个元素口在 CsS 中，执行这一任务的样式规则部分称为选择器。 ◇ 常用选择器：最常用的选择器类型是类型选择器和后代选择器，类型选择器用来寻找特定类型的元素，比如段落或标题元素，只需指定希望应用样式的元素的名称，类型选择器有时候也称为元素选择器或简单选择器。后代选择器可用来寻找特定元素或元素组的后代。后代选择器由其他两个选择器之间的空格表示。在这个示例中，只缩进是块引用的后代的段落元素，其他所有段落不受影响。这两种选择器适合于应用那些应用范围广的一般性样式。要想寻找更特定的元素，可以使用 ID 选择器和类选择器口顾名思义，这两种选择器用于寻找那些具有指定 ID 或类名的元素。 ID 选择器由一个 # 字符表示，类选择器由一个点号表示。下面示例中的第一条规则使简介段落中的文本以粗体械示，第二条规则让日期显示为绿色 : 前面提到过，许多 CSS 开发人员过度依赖类选择器和皿选择器。如果他们希望以一种方式对主内容区域中的标题应用样式，而在第二个内容区域中采用另一种方式，那么他们很可能创建两个类并几在每个标题上应用一个类，一种简单得多的方法是结合使用类型、后代、 D 和类这几种选择器：

阅读更多关于 css选择器

css选择器什么叫css选择器？最常见的 CSS 选择器是元素选择器。换句话说，文档的元素就是最基本的选择器。如果设置 HTML 的样式，选择器通常将是某个 HTML 元素，比如 p、h1、em、a，甚至可以是 html 本身。 css选择器的分类？ ID选择器 class选择器（类选择器） .元素选择器伪类选择器内联样式选择器的权重值元素选择器 0,0,0,1 类选择器 0,0,1,0 伪类选择器 0,0,1,0 id选择器 0,1,0,0 内联样式 1,0,0,0 ID：在html中直接#id名就好了，在js中调用getElementById（id名） #red {color:red;} #green {color:green;} <p id="red">这个段落是红色。</p> <p id="green">这个段落是绿色。</p> class：在html中用.class名，在js中调用getElementsByClassName（class名） <li class="kk">￥300.00</li> .kk{text-align: center} 元素选择器：直接调用元素名，就可以写样式了，在js中调用getElementsByTagName（元素名）； html {color:black;} h1 {color:blue;} h2 {color:silver;

jQuery 选择器（开头有脑图）

阅读更多关于 jQuery 选择器（开头有脑图）

Javascript在线代码运行 jQuery 中所有选择器都以美元符号开头：$()。 jQuery 选择器允许我们对 HTML 元素组或单个元素进行想要的操作。 1.元素选择器 jQuery 元素选择器基于元素名选取元素。在页面中选取所有元素: $ ( "p" ) < script src = "//libs.baidu.com/jquery/2.0.0/jquery.min.js" > //导入jquery.min.js" < / script > < script > $ ( document ) . ready ( function ( ) { //读取功能 $ ( "button" ) . click ( function ( ) { //点击功能 $ ( "p" ) . hide ( ) ; // 隐藏段落功能 } ) ; } ) ; < / script > < / head > < body > < h2 > 这是一个标题 < / h2 > < p > 这是一个段落。 < / p > < p > 这是另一个段落。 < / p > < button > 点我 < / button > < / body > < / html > 2.#id 选择器 jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素。页面中元素的 id 应该是唯一的

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的简单语法: 在一个style标签中,去编写CSS内容,最好将style标签写在这个head标签中 <style> 选择器{ 　　　　属性名称:属性的值; 属性名称2: 属性的值2; 　　　　} </style> CSS选择器: 帮助我们找到我们要修饰的标签或者元素元素选择: 元素的名称{ 　　　　属性名称:属性的值; 　　　　属性名称:属性的值; 　　　　　　 } ID选择器: 以#号开头 ID在整个页面中必须是唯一的s ID的名称{ 　　属性名称:属性的值; 　　属性名称:属性的值; 　　　　　　} 类选择器: 以 . 开头 .类的名称{ 　　　　属性名称:属性的值; 　　　　属性名称:属性的值; 　　　　　　} CSS的引入方式: 外部样式: 通过link标签引入一个外部的css文件内部样式: 直接在style标签内编写CSS代码行内样式: 直接在标签中添加一个style属性, 编写CSS样式 CSS浮动 : 浮动的元素会脱离正常的文档流,在正常的文档流中不占空间 float属性: left right clear属性: 清除浮动 both : 两边都不允许浮动 left: 左边不允许浮动 right : 右边不允许浮动流式布局 CSS的优先级按照选择器搜索精确度来编写: 行内样式 > ID选择器 > 类选择器 > 元素选择器就近原则:

CSS基础知识学习笔记

阅读更多关于 CSS基础知识学习笔记

1.css基本样式讲解 1.1 css背景 background-attachment：背景图像是否固定或者随着页面的其余部分滚动 background-color：设置元素的背景颜色 background-image：把图片设置为背景 background-position：设置背景图片的起始位置 background-repeat：设置背景图片是否及如何重复 background-size：规定背景图片的尺寸 background-orgin：规定图片的定位区域 background-clip：规定背景的绘制区域 1.2 css文本 color ：文本颜色 direction :文本方向 line-height :行高 letter-spacing: 字符间距 text-align :对齐元素 text-decoration :向文本添加修饰 text-indent :缩进元素中文本首行 text-transform :元素中的字母 unicode-bidi :设置文本方向 white-space :元素中空白的处理方式 word-spacing :字间距 text-wrap：自动换行 text-shadow：向文本添加阴影 1.3 css字体 font-family :设置字体系列 font-size :设置字体尺寸 font-style :设置字体风格 fongt

订阅 css选择器