css选择器 | 易学教程

《Head first HTML与CSS 第二版》读书笔记附录

阅读更多关于《Head first HTML与CSS 第二版》读书笔记附录

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> 1、CSS选择器伪元素可以用来选择元素的某些部分，这些部分可能不便于包围在<div>或<span>中，也不方便其他方法来选择。例如:first-letter伪元素可以用来选择一个块元素中文中的第一个字母，这样就能创建诸如首字母大写和首字母下沉等效果。用:first-line伪元素选择段落第一行。 p:first-letter{ } p:first-line{ } 属性选择器根据属性值选择元素： img[width] 会选择所有包含width属性的图像； img[height="300"]选择height属性值为300的所有图像； img[alt~="flowers"]选择alt属性包含单词flowers的所有图像。按兄弟选择：只选择前面有一个<h1>元素的段落： h1+p 加号后面紧跟兄弟元素。 2、CSS变换和过度： transform: rotate(45deg); 旋转45度。 transition: transform 2s; 指定变换时间为两秒。来源： oschina 链接： https://my.oschina.net/u/2453016/blog/729279

JavaWeb学习笔记——JQuery

阅读更多关于 JavaWeb学习笔记——JQuery

# JQuery 基础： 1. 概念：一个JavaScript框架。简化JS开发 * jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。 * JavaScript框架：本质上就是一些js文件，封装了js的原生代码而已 2. 快速入门 1. 步骤： 1. 下载JQuery * 目前jQuery有三个大版本： 1.x：兼容ie678,使用最为广泛的，官方只做BUG维护，功能不再新增。因此一般项目来说，使用1.x版本就可以了，最终版本：1.12.4 (2016年5月20日) 2.x：不兼容ie678，很少有人使用，官方只做BUG维护，功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x，最终版本：2.2.4 (2016年5月20日) 3.x：不兼容ie678，只支持最新的浏览器。除非特殊要求，一般不会使用3.x版本的，很多老的jQuery插件不支持这个版本。目前该版本是官方主要更新维护的版本。最新版本：3.2.1

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元素

CSS中含有特定文字的选择器

阅读更多关于 CSS中含有特定文字的选择器

[class^="text"]{ } 选中所有以text为开头类名的选择器 [class*="text"]{ } 选中所有含text为类名的选择器来源： CSDN 作者：序列A 链接： https://blog.csdn.net/lu10505/article/details/103834909

css3常用选择器

阅读更多关于 css3常用选择器

CSS选择器可分开成三部分，第一部分是我们常用的部分，我把他叫做基本选择器；第二部分我把他称作是属性选择器，第三部分我把他称作伪类选。下面我就来讲讲这几类选择器，举几个例子：一、基本选择器 1、calss选择器 .class{}//选择有class属性且属性名为class的标签 2、id选择器具有唯一性 #inter{}//选择有id属性且属性名为inter的标签 3、标签选择器 p{}//选择所有的p标签 4、群组选择器 div,p{}//选择所有的div,p标签 5、子代选择器，后代选择器等二、属性选择器 1、Element[attribute] 选择带有 class 属性所有元素。运行结果为： 2、Element[attribute=“value”] 选择class = “p” 的所有元素。 html部分 <div class="wapper"> <p class = "p">aaaaaa</p> <a class = "a">xxxxxxxxx</a>> </div> css部分 [class = "p"]{ color: red; } 运行结果三、伪类选择器 html部分 <ul> <li>yangyang</li> <li>lili</li> <li>rose</li> </ul> 1、first-letter 选择每个元素的首字母。 li:first

CSS样式定义的优先级顺序总结

阅读更多关于 CSS样式定义的优先级顺序总结

转载自： https://blog.csdn.net/judyge/article/details/51788691 层叠优先级是: 浏览器缺省 < 外部样式表 < 内部样式表 < 内联样式其中样式表又有: 类选择器 < 类派生选择器 < ID选择器 < ID派生选择器派生选择器以前叫上下文选择器，所以完整的层叠优先级是: 浏览器缺省 < 外部样式表 < 外部样式表类选择器 < 外部样式表类派生选择器 < 外部样式表ID选择器 < 外部样式表ID派生选择器 < 内部样式表 < 内部样式表类选择器 < 内部样式表类派生选择器 < 内部样式表ID选择器 < 内部样式表ID派生选择器 < 内联样式...共12个优先级为了说明该问题，请参见下面的例子说明 <html> <head> <title></title> <style type="text/css"> div { color: #00FF00 } /* 绿色 */ .a1 { color: #0000FF } /* 蓝色 */ .a1 div { color: #00FFFF } /* 青色 */ .a2 { color: #FF0000 } /* 红色 */ #a2 { color: #FFFF00 } /* 黄色 */ #a2 div { color: #FF00FF } /* 紫色 */ </style> </head

web components

阅读更多关于 web components

前端组件化这个主题相关的内容已经火了很久很久，angular 刚出来时的 Directive 到 angular2 的 components ，还有 React 的 components 等等，无一不是前端组件化的一种实现和探索，但是提上议程的 Web Components 标准是个怎样的东西，相关的一些框架或者类库，如 React，Angular2，甚至是 x-tag，polymer 现在实现的组件化的东西和 Web Components 标准差别在哪里？我花时间努力地把现有的 W3C Web Components 文档看了下，然后坚强地写下这些记录。首先我们需要知道，Web Components 包括了四个部分： Custom Elements HTML Imports HTML Templates Shadow DOM 这四部分有机地组合在一起，才是 Web Components。可以用自定义的标签来引入组件是前端组件化的基础，在页面引用 HTML 文件和 HTML 模板是用于支撑编写组件视图和组件资源管理，而 Shadow DOM 则是隔离组件间代码的冲突和影响。下边分别是每一部分的笔记内容。 Custom Elements 概述 Custom Elements 顾名思义，是提供一种方式让开发者可以自定义 HTML 元素，包括特定的组成，样式和行为。支持 Web

Repaint 、Reflow 的基本认识和优化

阅读更多关于 Repaint 、Reflow 的基本认识和优化

自己对浏览器了解的还不是很多，但这篇文章确实可以帮助了解你是不是经常听师兄或一些前端前辈说不能用 CSS 通配符 * ， CSS 选择器层叠不能超过三层， CSS 尽量使用类选择器，书写 HTML 少使用 table ，结构要尽量简单- DOM 树要小....等这些忠告，以前我就大概知道使用通配符或者 CSS 选择器层次过多可能会降低性能，至于为什么不使用 table 标签我一直是迷迷糊糊，也就跟着那样做了，但我认识了 Repain 和 Reflow 之后，原来这些还真不能用太多。 ok,希望这篇文章对你有帮助！ https://segmentfault.com/a/1190000002629708 来源： https://www.cnblogs.com/luodiandian/p/7150616.html

Jquery日历控件

阅读更多关于 Jquery日历控件

9个有用的jQuery日历和网页设计师的日期选择器插件事件日历和日期选择器是是我们开发当中经常遇到的问题，这个时候我们就需要用jquery插件来实现，昨天我在做项目的时候，遇到了个问题就是如何显示倒计时问题，我这个时候就用jquery插件解决的，今天给大家分享9个其他的时间选择器插件 1。 FullCalendar FullCalendar是一个著名的jQuery日历插件，它提供了拖和下降功能，与谷歌日历整合，并能够通过JSON获取事件等功能。设计人员可以轻松定制外观和感觉的日历，而开发人员可以利用用户触发的事件暴露挂钩。 2. Astonishing iCal-like Calendar 这是一个使用jQuery和CSS来构建一个iPhone风格的日历应用程序的教程。 3 jQuery UI的DatePicker jQuery UI的DatePicker的是一个高度可配置的插件，他添加到您的网页的日期选择器的功能。您可以自定义的日期格式和语言，限制了可选择的日期范围，并容易添加按钮和其他导航选项。 4。 jMonthCalendar jMonthCalendar支持全月日历和事件。这个插件的有趣的部分是它允许开发者开发互动的日历。 5 日期选择器。 MIT和GPL许可证下发布的日期选择器是一个jQuery日历插件。它有很多的选项和功能。例如，你可以有多个日历组件

CSS

阅读更多关于 CSS

阅读目录 css介绍 css的引入方式 css选择器盒模型标准文档流块级元素和行内元素浮动定位 z-index 文本属性和字体属性 background 回到顶部 CSS介绍现在的互联网前端分三层： HTML：超文本标记语言。从语义的角度描述页面结构。 CSS：层叠样式表。从审美的角度负责页面样式。 JS：JavaScript 。从交互的角度描述页面行为 CSS：Cascading Style Sheet，层叠样式表。CSS的作用就是给HTML页面标签添加各种样式，定义网页的显示效果。简单一句话：CSS将网页内容和显示样式进行分离，提高了显示功能。 css的最新版本是css3，我们目前学习的是css2.1 接下来我们要讲一下为什么要使用CSS。 HTML的缺陷：不能够适应多种设备要求浏览器必须智能化足够庞大数据和显示没有分开功能不够强大 CSS 优点：使数据和显示分开降低网络流量使整个网站视觉效果一致使开发效率提高了（耦合性降低，一个人负责写html，一个人负责写css）比如说，有一个样式需要在一百个页面上显示，如果是html来实现，那要写一百遍，现在有了css，只要写一遍。现在，html只提供数据和一些控件，完全交给css提供各种各样的样式。回到顶部 CSS的引入方式行内样式 <div> <p style=

订阅 css选择器