polaris不是前台开发人员，然而作为一个Web开发者，掌握必要的前台技术也是很重要的。说实话，polaris对前台技术还是蛮感兴趣的，只是一直没有用心系统的学过，所以了解的知识有点杂。这篇文章是polaris通过网上的一些知识结合自己的问题做的一些总结，一来当作笔记，二来希望能够对初学者有点帮助。 今天在修改博客时，遇到了一个问题：给一个p标签增加一个类（class），可是执行后该class中的有些属性并没有起作用。通过Firebu...
伪类 /* 伪元素选择器： 伪元素的效果是需要通过添加一个实际的元素才能达到的。 CSS中有如下四种伪元素选择器： · :first-line:为某个元素的第一行文字使用样式； · :first-letter:为某个元素中的文字的首字母或第一个字使用样式； · :before:在某个元素之前插入一些内容； · :after: 在某个元素之后插入一些内容； */ p:first-line{ background-color:yellow;} p:first-letter{color:blue;} p:befo...
html 1 This is urgent warning.2 Well,This is warning.What else? css 1 .warning{font-weight:bold;}2 .urgent{font-style:italic;}3 .warning.urgent{background:silver;} 效果 说明 由以上可知，一个class值内包含一个词列表时，该类就成了多类选择器。css中对类（.warning）定义属性时，如果类名存在于多类的词列表(.urgent warning)中，多类也会被定义。而.warning.urgent的写法限定了cla...
记得大学时候，专业课的网页设计书籍里面讲过css选择器权重的计算：id是100，class是10，html标签是5等等，然后全部加起来的和进行比较。。。 我只想说：真是误人子弟，害人不浅！ 最近，在前端群里还发现以上观点类似的奇葩聊天，真是*** 其实，也是在很久以前，看了腾讯ISUX的一位前端工程师-麦时分享的一篇技术文章（个人站点已失效，就不贴出来了），才了解到真正的css选择器权重计算。 以下是css选择器权...
1. 引言 从本节开始，就进入本系列的第二个部分??css和html的结合??说白了就是选择器。 CSS中定义了样式，如何将这些样式设置到相应的html节点上？就不得不通过选择器。让浏览器知道css选择了哪一个dom节点，浏览器就会乖乖的把相应的样式渲染成视图。 至于css能把页面渲染成什么样子，这是本系列的第三部分。 第一部分讲css样式的加载和层叠，第二部分讲选择器以及选择器的等级，第三部分讲呈现的各种样式...
一、选择器 1、ID选择器： 语法：首先，ID 选择器前面有一个 # 号 - 也称为棋盘号或井号。请看下面的规则： *#intro {font-weight:bold;} 与类选择器一样，ID 选择器中可以忽略通配选择器。前面的例子也可以写作： #intro {font-weight:bold;} 这个选择器的效果将是一样的。 2、类选择器： 语法：然后我们使用以下语法向这些归类的元素应用样式，即类名前有一个点号（.），然后结合通...
特殊性这点吃了亏，是该梳理一下了~ 先说一下大概的选择器，沾代码 最权威的还是《css权威指南》 我们把特殊性分为4个等级，每个等级代表一类选择器，每个等级的值为其所代表的选择器的个数乘以这一等级的权值，最后把所有等级的值相加得出选择器的特殊值。 4个等级的定义如下： l 第一等：代表内联样式，如: style=””，权值为1000。 l 第二等：代表ID选择器，如：#content，权值为100。 l 第三等：代表类，伪类和属...
整理些选择器，加深印象和理解标签选择器 body{} 表示body标签类选择器 .className{} 表示类名class为className的所有标签id选择器 #idName{} 表示id为idName的所有标签属性选择器 P[id="yt"]{} 表示所有P标签，且P标签的id属性为yt开头的所有标签属性选择器 P[id^="yt"]{} 表示所有P标签，且P标签的id属性以yt开头的所有标签属性选择器 P[id$="yt"]{} 表示所有P标签，且P标签的id属性以yt结尾的所有标签属性选择器 P[id*="yt"]{}...
一、CSS选择器概述 1.1、CSS功能 CSS语言具有两个基本功能：匹配和渲染 当浏览器在解析CSS样式时，首先应该确定哪些元素需要渲染，即匹配哪些HTML元素，这个操作由CSS样式中的选择器负责标识。 只有匹配到具体的对象之后，浏览器才能根据CSS样式声明，决定渲染的效果，并及时呈现在页面中。 1.2、CSS选择类型 标签选择器 ID选择器 类选择器 特殊选择器 1.3、CSS基本语法 二、标签选择器 2.1标签选择器概...
一、ID选择器 ID选择器使用"#"前缀标识符进行标识，后面紧跟指定的元素的ID名称。 如 #box{ width:100px; height:100px;} 元素的ID名称是唯一的，只能对应于文档中一个具体的元素。在HTML中，用来构建整体框架的标签应该定义ID属性，因为这此对象一般在页面中都是比较唯一的，固定的，不会重复，如Logo包含框，导航条，主体包含框，版权区域等。 二、ID设置页面布局 测试ID @chars...
1、实例源码 CSS3的[att$=val]选择器 [id$=div_border]{ background-color:#9F6; width:160px; font-family:微软雅黑; font-size:18px; font-size-adjust:!important; font-stretch:expanded; font-style:oblique; font-variant:inherit; font-weight:bolder; alignment-adjust:after-edge; alignment-baseline:alphabetic; marquee-speed:normal; } [id$=child]{ background-col...
作者： 阮一峰 日期： 2009年3月12日 去年我学jQuery的时候，曾经做过一点选择器（selector）的笔记。 这几天拿出来看了一下，发现很多都忘记了。所以，我决定把它们贴在这里，方便以后查看。这对其他朋友应该也是有用的，毕竟选择器是制作网页效果的第一步。 笔记分为两个部分，今天是CSS的选择器，以后还有一部分xPath的选择器。今天的笔记中包括44个选择器，基本涵盖了CSS 2和CSS 3的所有规定。 =============...
1、实例源码 CSS3的[att=val]选择器 [id=div_border]{ background-color:#C00; width:110px; font-family:微软雅黑; font-size:18px; font-size-adjust:!important; font-stretch:expanded; font-style:oblique; font-variant:inherit; font-weight:bolder; } 星期一 星期二 星期三 星期四 星期五 星期六 星期日 ...
1、实例源码 CSS3的[att*=val]选择器 [id*=div_border]{ background-color:#9F6; width:110px; font-family:微软雅黑; font-size:18px; font-size-adjust:!important; font-stretch:expanded; font-style:oblique; font-variant:inherit; font-weight:bolder; } [id*=child]{ background-color:#C00; } 星期一 星期二 星期三 星期四 ...
一、类选择器 类选择用使用"."(英文点号）进行标识，后面紧跟类名 如： .red{color:red;} 类样式可以应用于文档中的多个元素，这体现了CSS代码的可重用性，帮助用户简化页面控制。 二、类选择器与标签选择器 类选择器和标签选择器都具有一对多的特性，即一个样式可以控制多个元素对象的显示效果。 注意事项： 与标签选择器相比，类选择器具有更好的适应性和灵活性，因为可以指定类的样式所应用的元素对象...