css第一个元素

CSS选择器

空扰寡人 提交于 2020-03-17 06:24:58
1、属性选择器: 1)E[attr]:只使用属性名,但没有确定任何属性值 2)E[attr=“value”]:指定属性名,并指定了该属性的属性值 3)E[attr~=“value”]:指定属性名,并且具有属性值,此属性值是一个词列表,并且以空格隔开,其中词列表中包含了一个value词,而且等号前面的“〜”必须的 4)E[attr^=“value”]:指定了属性名,并且有属性值,属性值是以value开头的 5)E[attr$=“value”]:指定了属性名,并且有属性值,而且属性值是以value结束的 6)E[attr*=“value”]:指定了属性名,并且有属性值,而且属值中包含了value ​ 7)E[attr|=“value”]:指定了属性名,并且属性值仅是value或者以“value-”开头的值(比如说left-con) 2、伪类选择器 1)结构性伪类选择器 X:first-child 匹配子集的第一个元素。IE7就可以支持 X:last-child 匹配父元素中最后一个X元素 X:nth-child(n) 用于匹配索引值为n的子元素。索引值从1开始 X:only-child 这个伪类一般用的比较少,比如上述代码匹配的是div下的有且仅有一个的p,也就是说,如果div内有多个p,将不匹配。 (唯一的一个子元素) X:nth-last-child(n) 从最后一个开始算索引。

jquery css

寵の児 提交于 2020-03-17 00:28:03
jQuery提供 css() 的方法来实现嵌入式改变元素样式, css() 方法在使用上具有多样性。其中一种接受两个输入参数:样式属性和样式值,它们之间用逗号分开。比如我们要改变链接颜色,我们可以使用下面的代码: $("#61dh a").css('color','#123456'); //这里选择器‘$("#61dh a")’表示ID为‘#61dh’的元素下的所有链接。 //.css(‘color’,'#123456');表示把颜色设为'#123456' 如果我们需要改变多个样式属性,我们可以先定义属性变量,然后直接赋值给 css() 方法。示例如下: var divcss = { background: '#EEE', width: '478px', margin: '10px 0 0', padding: '5px 10px', border: '1px solid #CCC' }; $("#result").css(divcss); //这里我们先定义了一个CSS样式属性变量‘divcss’,这类似于建立一个外部CSS文件。 //然后通过jQuery提供的css()方法,把属性赋给ID为'#result'的DIV。 另外jQuery提供的 css() 方法还可以用来查看某个元素的css属性值。例如,我们想查看链接的颜色,可以使用下面的代码: $("#61dh a").css

jQuery基础 - 改变CSS样式

耗尽温柔 提交于 2020-03-17 00:27:46
jQuery提供 css() 的方法来实现嵌入式改变元素样式, css() 方法在使用上具有多样性。其中一种接受两个输入参数:样式属性和样式值,它们之间用逗号分开。比如我们要改变链接颜色,我们可以使用下面的代码: $("#61dh a").css('color','#123456'); //这里选择器‘$("#61dh a")’表示ID为‘#61dh’的元素下的所有链接。 //.css(‘color’,'#123456');表示把颜色设为'#123456' 如果我们需要改变多个样式属性,我们可以先定义属性变量,然后直接赋值给 css() 方法。示例如下: var divcss = { background: '#EEE', width: '478px', margin: '10px 0 0', padding: '5px 10px', border: '1px solid #CCC' }; $("#result").css(divcss); //这里我们先定义了一个CSS样式属性变量‘divcss’,这类似于建立一个外部CSS文件。 //然后通过jQuery提供的css()方法,把属性赋给ID为'#result'的DIV。 另外jQuery提供的 css() 方法还可以用来查看某个元素的css属性值。例如,我们想查看链接的颜色,可以使用下面的代码: $("#61dh a").css

jQuery基础 - 改变CSS样式

青春壹個敷衍的年華 提交于 2020-03-17 00:26:47
jQuery提供 css() 的方法来实现嵌入式改变元素样式, css() 方法在使用上具有多样性。其中一种接受两个输入参数:样式属性和样式值,它们之间用逗号分开。比如我们要改变链接颜色,我们可以使用下面的代码: $("#61dh a").css('color','#123456'); //这里选择器‘$("#61dh a")’表示ID为‘#61dh’的元素下的所有链接。 //.css(‘color’,'#123456');表示把颜色设为'#123456' 如果我们需要改变多个样式属性,我们可以先定义属性变量,然后直接赋值给 css() 方法。示例如下: var divcss = { background: '#EEE', width: '478px', margin: '10px 0 0', padding: '5px 10px', border: '1px solid #CCC' }; $("#result").css(divcss); //这里我们先定义了一个CSS样式属性变量‘divcss’,这类似于建立一个外部CSS文件。 //然后通过jQuery提供的css()方法,把属性赋给ID为'#result'的DIV。 另外jQuery提供的 css() 方法还可以用来查看某个元素的css属性值。例如,我们想查看链接的颜色,可以使用下面的代码: $("#61dh a").css

css权重

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

jQuery选择器

天涯浪子 提交于 2020-03-15 17:30:48
1.1 jQuery详细介绍 1.1.1 $问题 a) Js命名归法:下划线、字母、$、数字 b) 但是不能以数字作为开头 jQUery的两个变量:$ 和 jQuery jQuery占用了我们两个变量:$ 和 jQuery 1.1.2 js入口函数跟jQuery入口函数的区别: Js的window.onload事件是等到所有内容,以及我们的外部图片之类的文件加载完了之后,才回去执行 jQuery的入口函数 是在 html所有标签都加载之后,就回去执行。 1.2 Js创建对象 三种方式: var obj = {}; var obj1 = new Object(); var obj2 = Object.create(); 1跟2的区别: 推荐使用第一个方式 第二种方式存在效率问题,因为要new对象,会涉及到原型查找的问题。 1.3 jQuery基本选择器 1.3.1 回顾CSS选择器 CSS 选择器回顾 符号 说明 用法 #id Id选择器 #id{ color:red; } .class 类选择器 .class{ //} Element 标签选择器 P { //} * 通配符选择器 配合其他选择器来使用 , 并集选择器 div,p{} 空格 后代选择器 div span{} 选择div下面所有后代的span > 子代选择器 div > span{} + 紧邻选择器 div+p

CSS 基础

谁都会走 提交于 2020-03-14 18:31:56
CSS 简介 CSS 概述 CSS 指层叠样式表 ( C ascading S tyle S heets) 样式定义 如何显示 HTML 元素 样式通常存储在 样式表 中 把样式添加到 HTML 4.0 中,是为了 解决内容与表现分离的问题 外部样式表 可以极大提高工作效率 外部样式表通常存储在 CSS 文件 中 多个样式定义可 层叠 为一 样式解决了一个普遍的问题 HTML 标签原本被设计为用于定义文档内容。通过使用 <h1>、<p>、<table> 这样的标签,HTML 的初衷是表达“这是标题”、“这是段落”、“这是表格”之类的信息。同时文档布局由浏览器来完成,而不使用任何的格式化标签。 由于两种主要的浏览器(Netscape 和 Internet Explorer)不断地将新的 HTML 标签和属性(比如字体标签和颜色属性)添加到 HTML 规范中,创建文档内容清晰地独立于文档表现层的站点变得越来越困难。 为了解决这个问题,万维网联盟(W3C),这个非营利的标准化联盟,肩负起了 HTML 标准化的使命,并在 HTML 4.0 之外创造出样式(Style)。 所有的主流浏览器均支持层叠样式表。 样式表极大地提高了工作效率 样式表定义如何显示 HTML 元素,就像 HTML 3.2 的字体标签和颜色属性所起的作用那样。样式通常保存在外部的 .css 文件中。通过仅仅编辑一个简单的

CSS学习笔记 -- ID和Class

本秂侑毒 提交于 2020-03-13 06:10:46
id 选择器 HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。 #para1 { text-align:center; color:red; } ID属性不要以数字开头,数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。 class 选择器 class 选择器用于描述一组元素的样式,class 选择器有别于id选择器,class可以在多个元素中使用。 class 选择器在HTML中以class属性表示, 在 CSS 中,类选择器以一个点"."号显示: .center {text-align:center;} 你也可以指定特定的HTML元素使用class。 p.center {text-align:center;} 类名的第一个字符不能使用数字!它无法在 Mozilla 或 Firefox 中起作用。 来源: https://www.cnblogs.com/lyan/p/9890379.html

css---使用class和id

混江龙づ霸主 提交于 2020-03-13 06:10:20
网页现在的新标准是W3C。目前的模式是html+css+javascript,如何理解呢,就是html是网页的结构,CSS是网页的样式,javascript是行为。结构就是盖房子先要把结构建出来,然后用CSS来装饰。其实你在用dreamweaver做网页时就已经用到了CSS,比如你用DW的属性面板来设置一个字的字体、颜色和大小,当你选好后,就会自动生成一个.style1的红色代码,在<style></style>之间不知道你注意过没有,这就是CSS,这样讲的话你应该能理解html和CSS的区别了吧。CSS的名称就叫“层叠样式表”,从字面也就能理解了。 SS 即 级联样式表 。它是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS id 和 class 选择器编辑如果你要在HTML元素中设置CSS样式,你需要在元素中设置"id" 和 "class"选择器。[1]id 选择器id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。以下的样式规则应用于元素属性 id="para1":实例12345#para1{text-align:center;color:red;}ID属性不要以数字开头,数字开头的ID在 Mozilla

如何写出优雅的css代码 ?

拈花ヽ惹草 提交于 2020-03-08 08:02:10
如何写出优雅的css代码 ?    对于同样的项目或者是一个网页,尽管最终每个 前端开发工程师 都可以实现相同的效果,但是他们所写的代码一定是不同的。有的优雅,看起来清晰易懂,代码具有可拓展性,这样的代码有利于团队合作和后期的维护;而有的混乱,虽然表达出了最终的效果,然而却晦涩难懂,显然团队成员在读这样的代码时就显得无从下手,更不利于后期的维护了。那么如何写出优雅的代码呢?下面我将以一个很小的项目就以下几个方面简单的表达一下自己的看法,如有不妥,望批评指正。 如何整理一个项目。 如何写出清晰易懂的HTML代码。 如何写出优雅的css代码(重点)。 第一部分:如何整理一个项目。    当我们接手一个表白墙的小项目时,怎么去分类整理呢?是把所有的html文件、css文件、js文件和图片等等混乱的放在一起?好吧,那就看看这样是什么效果吧?    可能你会觉得这没有什么啊?文件都可以找到啊,但是你试图在sublime编辑器中打开看看是什么效果:   ( 补充说明:博友@Tabweng 建议文件名不要使用中文而尽量使用英文,在此表示感谢,希望大家也可以注意这个问题。 )    有没有觉得很混乱呢?! 此外,如果项目更大了呢?你需要的html文件、css文件、js文件、以及图片的需求量更大了呢?你还能保证可以顺利的找出每一个你想要的文件并编辑吗?显然显然是否定的。所以对于这种项目