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:bold; }

CSS选择器种类及使用方法

阅读更多关于 CSS选择器种类及使用方法

css选择器有通配符选择器书写格式：*+｛声名块｝并集选择器/组合选择器书写格式;元素或类或id+“”+元素或类或id+“，”+元素或类或id｛声明块｝列：h1，h2，h3｛color：red；｝层次选择器：子集选择器：格式:父级元素名称+">"+子级元素名称+{声明块} 例:div>p{color:red;} 后代选择器：格式:祖先元素名称+空格+后代元素名称+{声明块} 例:div p{color:red;} 兄第选择器：格式: A元素名称+"+"+B元素名称+{声明块} 例:div+P{color:red;} 注:选择A元素后的B元素,AB之间不许有其他元素. 通用选择器：格式:同级元素A+"~"+同级元素B+{声明块} 例:div~p{color:red;} 注:表示选择与A元素同级别的所有B元素(B的位置是在A后面)。伪类选择器动态伪类选择器未访问（把默认值改为黑色）； a:link{color:black;} 鼠标悬停 a:hover{color:pink;} 鼠标点击时 a:active{color:green;} 点击后 a:visited{color:五颜六色;}；注:hover是可以用于多个元素身上的,但其他三个只能用于具有点击功能的元素上。 a:focus{color:颜色;} 多用于输入框或链接（注:IE7以前不支持

css书写规范

阅读更多关于 css书写规范

一、使用CSS缩写使用缩写可以帮助减少你CSS文件的大小，更加容易阅读。css缩写的主要规则请参看《常用css缩写语法总结》，这里就不展开描述。二、明确定义单位，除非值为0 忘记定义尺寸的单位是CSS新手普遍的错误。在HTML中你可以只写width=100，但是在CSS中，你必须给一个准确的单位，比如：width: 100px width:100em。只有两个例外情况可以不定义单位：行高和0值。除此以外，其他值都必须紧跟单位，注意，不要在数值和单位之间加空格。三、区分大小写当在XHTML中使用CSS，CSS里定义的元素名称是区分大小写的。为了避免这种错误，我建议所有的定义名称都采用小写。class和id的值在HTML 和XHTML中也是区分大小写的，如果你一定要大小写混合写，请仔细确认你在CSS的定义和XHTML里的标签是一致的。前的元素限定四、取消class和id 当你写给一个元素定义class或者id，你可以省略前面的元素限定，因为ID在一个页面里是唯一的，class可以在页面中多次使用。你限定某个元素毫无意义。例如： div#content { /* declarations / } fieldset.details { / declarations */ } 可以写成 content { /* declarations / } .details { /

管理CSS爆炸

阅读更多关于管理CSS爆炸

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> 我一直非常依赖CSS来开发我正在工作的网站。现在，所有CSS样式都在每个标记的基础上应用，因此现在我尝试将其移至更多外部样式中，以帮助将来进行任何更改。但是现在的问题是，我注意到我遇到了“ CSS爆炸”。对我来说，决定如何最好地组织和抽象CSS文件中的数据变得越来越困难。我正在网站中使用大量的 div 标签，而这些标签是基于表格的网站。因此，我得到了许多如下所示的CSS选择器： div.title { background-color: blue; color: white; text-align: center; } div.footer { /* Styles Here */ } div.body { /* Styles Here */ } /* And many more */ 还算不错，但是作为我的初学者，我想知道是否可以就如何最好地组织CSS文件的各个部分提出建议。我不想为网站上的每个元素都拥有单独的CSS属性，并且我一直希望CSS文件相当直观且易于阅读。我的最终目标是简化CSS文件的使用并展示其强大功能以提高Web开发速度。这样，将来可能在此站点上工作的其他个人也将参与使用良好编码实践的实践，而不必像我以前那样去实践。 #1楼这里有一些很棒的材料，有些花了一些时间来回答这个问题

是否可以在另一个CSS文件中包含一个？

阅读更多关于是否可以在另一个CSS文件中包含一个？

是否可以在另一个 CSS 文件中包含一个？ #1楼是的，可以使用@import并提供css文件的路径，例如 @import url("mycssfile.css"); 要么 @import "mycssfile.css"; #2楼是： @import url("base.css"); 注意： @import 规则必须在所有其他规则之前（ @charset 除外）。额外的 @import 语句需要额外的服务器请求。作为替代方案，将所有CSS连接到一个文件中以避免多个HTTP请求。例如，将 base.css 和 special.css 的内容复制到 base-special.css 并仅引用 base-special.css 。 #3楼 CSS @import 规则就是这样做的。例如， @import url('/css/common.css'); @import url('/css/colors.css'); #4楼在某些情况下，可以使用@import“file.css”，并且大多数现代浏览器都应该支持这一点，NN4等旧版浏览器会稍微坚固一些。注意：import语句必须位于文件中的所有其他声明之前，并在生产中使用之前在所有目标浏览器上对其进行测试。 #5楼是的，使用@import http://webdesign.about.com/od

谈谈css伪类与伪元素

阅读更多关于谈谈css伪类与伪元素

谈谈css伪类与伪元素前端er们大都或多或少地接触过CSS伪类和伪元素，比如最常见的: focus 、: hover 以及 <a> 标签的: link 、: visited 等，伪元素较常见的比如: before 、: after 等。在这里也许有不少人都见过:before，::before这样的写法，估计有些人很纳闷，这两者有什么区别吗？有疑问，那我们就先把疑问解决了先，不要把疑问留着。其实:before，::before这两种写法都是等效，只是:befor是CSS2的写法，::before是CSS3的写法。双冒号(::)这是CSS3 规范中的要求，目的是为了区分伪类和伪元素，大多数浏览器都支持这两种表示方式。单冒号(:)用于 CSS3 伪类，双冒号(::)用于 CSS3 伪元素。对于 CSS2 中已经有的伪元素，例如 :before，单冒号和双冒号的写法 ::before 作用是一样的。一般情况下为兼容性考虑使用单冒号(:)。解决完疑问，那我们就可以愉快的开始接下来的内容了。伪类 - pseudo classes 伪类存在的意义是为了通过选择器找到那些不存在与DOM树中的信息（例如 <a> 标签的: link 、: visited 等，这些信息不存在与DOM树结构中，只能通过CSS选择器来获取）以及不能被常规CSS选择器获取到的信息（例如要修改第几个子元素的样式）。

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;

[译]XPath和CSS选择器

阅读更多关于 [译]XPath和CSS选择器

/*--> */ /*--> */ 原文: http://ejohn.org/blog/xpath-css-selectors 最近,我做了很多工作来实现一个同时支持XPath和CSS 3的解析器,令我惊讶的是:它们俩在某些方面上非常相似,而在另一些方面上又完全不同.不同的地方有,CSS是用来配合HTML工作的,可以使用#id来根据ID获取元素,以及使用.class来根据class获取元素.这些用XPath实现的话都不会那么简洁,反过来呢,XPath可以使用..来返回到DOM树的上层节点中,还可以使用foo[bar]来获取到一个拥有bar子元素的foo元素.CSS选择器完全做不到这些,总结一下就是,和XPath比起来,CSS选择器通常都比较短小,但可惜的是不够强大. 我认为将这两种选择器的写法做一个比较是很有价值的. 目标 CSS 3 XPath 所有元素 * //* 所有的P元素 p //p 所有的p元素的子元素 p > * //p/* 根据ID获取元素 #foo //*[@id='foo'] 根据Class获取元素 .foo //*[contains(@class,'foo')] 1 拥有某个属性的元素 *[title] //*[@title] 所有P元素的第一个子元素 p > *:first-child //p/*[0] 所有拥有子元素a的P元素无法实现 //p[a]

css选择器总结

阅读更多关于 css选择器总结

CSS优先级（从低到高）：　　1、* 　　2、元素（div）| 伪元素　　3、class | 属性 | 伪类　　4、id 　　5、行内<style...> 　　6、!important 　　注：当权重相同的时候，后定义的生效　　　　:not没有权重 css选择器的效率(从右到左的原则) 　　1、id选择器(#content) 　　2、类选择器(.box) 　　3、标签选择器(span) 　　4、相邻选择器(h1+p) 　　5、子选择器（ul>li）　　6、后代选择器（ul li）　　7、通配符选择器（*）　　8、属性选择器（input[type="text"]）　　9、伪类选择器（a:hover）　　参考文章： MDN的编写高效的 CSS 基本选择器　　1、通配符选择器 * 　　2、元素选择器如： li 　　3、类选择器如：.first 　　4、id选择器如：#box 　　5、后代选择器如：ul li 　　6、子元素选择器如：ul>li 　　7、相邻兄弟元素选择器如：li+li 　　8、通用兄弟选择器如：.active ~ li（li.active 元素后面的所有兄弟元素li）　　9、群组选择器如： .first,.last{} 属性选择器　　1、E[attr] 　　2、E[attr="value"]　　E[attr~="value"]　

CSS Id 和 Class

阅读更多关于 CSS Id 和 Class

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> id 和 class 选择器如果你要在HTML元素中设置CSS样式，你需要在元素中设置"id" 和 "class"选择器。 id 选择器 id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。 HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。以下的样式规则应用于元素属性 id="para1": 实例： #para1 { text-align:center; color:red; } ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。 class 选择器 class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。 class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示：在以下的例子中，所有拥有 center 类的 HTML 元素均为居中。 .center {text-align:center;} 你也可以指定特定的HTML元素使用class。在以下实例中, 所有的 p 元素使用 class="center" 让该元素的文本居中: p.center {text-align:center;} 类名的第一个字符不能使用数字

订阅 css第一个元素