• 前端极易被误导的css选择器权重计算及css内联样式的妙用技巧_html/css_WEB-ITnose
• 2.css选择器_html/css_WEB-ITnose
• 22个必须知道的css技巧_html/css_WEB-ITnose
• CSS ID选择器与CLASS选择器_html/css_WEB-ITnose
• CSS3 :checked 伪类选择器妙用_html/css_WEB-ITnose

前端极易被误导的css选择器权重计算及css内联样式的妙用技巧_html/css_WEB-ITnose

　　记得大学时候，专业课的网页设计书籍里面讲过css选择器权重的计算：id是100，class是10，html标签是5等等，然后全部加起来的和进行比较。。。
　　我只想说：真是误人子弟，害人不浅！

　　最近，在前端群里还发现以上观点类似的奇葩聊天，真是***

　　其实，也是在很久以前，看了腾讯ISUX的一位前端工程师-麦时分享的一篇技术文章（个人站点已失效，就不贴出来了），才了解到真正的css选择器权重计算。

　　以下是css选择器权重计算精华所在，翻译自国外的文档(记得是W3C给出的计算规则)

　　如果一个声明来自style属性而不是选择器，计作1或者a=1（在一个html文档中，元素“style”的值是样式表规则，这个规则中没有选择器，所以a=1, b=0, c=0, and d=0）
　　选择器中id属性的个数,计作b
　　选择器中其他属性以及伪类的个数，计作c
　　选择器中元素及伪元素的个数，计作d
　　优先级只基与选择器的形式，特殊的，一个“[id=p33]“形式的选择器是按照属性选择器来计算的（a=0, b=0, c=1, d=0），即使用定义中包含ID
　　一些例子：　　

立即学习“前端免费学习笔记（深入）”；

 1 * {}     /* a=0 b=0 c=0 d=0 -> 优先级= 0,0,0,0 */ 2 li {}     /* a=0 b=0 c=0 d=1 -> 优先级 = 0,0,0,1 */ 3 li:first-line {}     /* a=0 b=0 c=0 d=2 -> 优先级 = 0,0,0,2 */ 4 ul li {}     /* a=0 b=0 c=0 d=2 -> 优先级 = 0,0,0,2 */ 5 ul ol+li {}     /* a=0 b=0 c=0 d=3 -> 优先级 = 0,0,0,3 */ 6 h1 + *[rel=up]{}     /* a=0 b=0 c=1 d=1 -> 优先级 = 0,0,1,1 */ 7 ul ol li.red {}     /* a=0 b=0 c=1 d=3 -> 优先级 = 0,0,1,3 */ 8 li.red.level {}     /* a=0 b=0 c=2 d=1 -> 优先级 = 0,0,2,1 */ 9 #x34y {}     /* a=0 b=1 c=0 d=0 -> 优先级 = 0,1,0,0 */10      /* a=1 b=0 c=0 d=0 -> 优先级 = 1,0,0,0 */

　　[备注]
　　:first-line 伪元素
　　[rel=up] 其他属性

　　了解了这些 你应该不会再对”11个class与一个id”谁的优先级高“这类的问题有疑问了吧，因为a,b,c,d只是在各自位置数字的累加，而不会越级。

　　其实，这里还漏了一个重要的东西，那就是!important了。这是一个神奇的东西~

　　首先强调的是!important的使用问题：如height:100px !important; 菜鸟一定会疑问，为什么important前面要加空格，其实没什么，不加也可以，只是为了阅读方便，呵呵~

　　important可以让前面所有的权重计算变得可笑，因为css属性值添加了important后，前面所有的努力白费了，行内式的权重也高不过它，除非再声明一个加important的属性值来覆盖它(注意是由css属性值读取的顺序决定的)。

　　比如h1{height:100px !important;}要覆盖这个height值为200px的话，要在其后加上h1{height:200px !important;}

　　而一般!important值的相互覆盖，是取决于浏览器在加载css文件时，对样式表的读取顺序决定的。在大项目中，很难预料你的文件是先加载还是后加载，特别是公用css文件，不建议加这个特殊值。

　　讲到这里，提个额外的点：css样式的读取解析，是按从右到左进行的，所以不要误以为写#id .class1 .class2 .class3{}这样的选择器，浏览器会因为唯一id存在而查找很快，其实是更慢，最好是保持三个层级，不要层级过多。

　　还有，很多人喜欢写.class1.class2{}这样的交集选择器，一般是跟js配合做一些显示效果。关键是IE6不支持这种交集选择器，像p.class1{}这样的标准复合选择器，IE6等低版本浏览器才能完美支持。（ps：公司同事踩过这个坑，在IE6下把我的css代码给覆盖了，我还查了老半天??最后知道真相的我眼泪掉下来）

　　其实，懂得上面的这些东西了，你的css水平才算入门（没错，只算入门）。

　　接下来，讲一些很实用的技巧（其实也就是上面基础知识的融会贯通）：

　　场景：当鼠标hover到id为content的div后，将高度由auto改变为30px;

　　1.菜鸟级写法

1 $("#content").hover(function(){2     $(this).css({"height":"30px"});3 },function(){4     $(this).css({"height":"auto"});5 });

　　那如果这个div本身height不是auto呢，你是不是又得知道其默认的height属性值。

　　所以这种写法很不好，学术一点的叫做硬编码、强耦合。

　　2.普通写法

1 .content_normal{height:20px;} /*默 认应用的样式*/2 .content_change{height:30px} /*hover时候应用的样式*/

1 $("#content").hover(function(){2     $(this).addClass("content_change");3 },function(){4     $(this).removeClass("content_change");5 });

　　3.适用性的高级写法

var $extStyle = $("head").find("#extStyle");$("#content").hover(function(){        //向头部插入一个内链样式表    if($extStyle.length < 1){         var styleElem = document.createElement("style");         styleElem.setAttribute("type", "text/css");         styleElem.setAttribute("id", "extStyle");          $("head").append(styleElem);         $extStyle = $("head").find("#extStyle");      }         $extStyle.append("#content{height:30px;}");},function(){     $extStyle.empty();});

　　第三种写法的好处就是，不管需求怎么变，都可以轻松覆盖样式，也可以避免第一种写法存在的的情况。因为height:auto;有时也是致命的，在项目中就遇到过这样的问题。

　　缺点就是要向头部插入一个style节点，对于小需求的话就有点小题大做。但是大项目中，可以内部默认一个style节点负责插入这些暂时性修改的样式数据，方便删除，不弄脏代码。

　　最后提一个很重要的点：在IE下，style节点最多是31个，多了它不认，呵呵~

2.css选择器_html/css_WEB-ITnose

　　由第一节的语法结构可以看出css语言的核心思想就是：找到对象，然后对选定的对象进行属性赋值。其中，css中对象的选择，依靠的就是选择器。当掌握了选择器以后，就能够指哪打哪，弹无虚发了。

　　css的选择器有许多种，下面来逐一介绍：

　　1.基本选择器

　　　　使用简单且频率高的一些选择器这里归类为基本选择器，而基本选择器有包含下的内容：

立即学习“前端免费学习笔记（深入）”；

　　　　1.1 通用选择器

* {    border: 1px solid red;             }

　　　　说明：通用选择器的核心就是使用统配符*作为对象标识，在很多语言中，*的含义是指代所有对象，也就是所HTML文件中的所有标签都会被选中，包括 和标签。但这通常不是我们想要的结果，所有一般情况下也用不到。

立即学习“前端免费学习笔记（深入）”；

　　　　1.2 元素选择器　　　

p {    color: red;}

　　　　说明：这里的元素其实就是HTML里面的标签，例如这里的p，就是指

立即学习“前端免费学习笔记（深入）”；

　　　　1.3 ID选择器

#abc {    font-size: 20px; }<br /><br />//<p id="abc">段落</p>

　　　说明：ID选择器会根据全局属性id的值，来选择对象，如上面的

立即学习“前端免费学习笔记（深入）”；

　　　　1.4 类选择器　

.abc {    border: 1px solid red; }<br /><br />//<b>加粗</b><br />//<span>无</span>

　　说明：类选择器针对的是元素内class属性的值，这是常用的多对象选择器，如果有多个元素的class属性含义同样的值，那么这些元素都会被选中。

立即学习“前端免费学习笔记（深入）”；

　　　　1.5 属性选择器

/*css2*/[href] {     color: orange;} <br /><br />//<a herf="..."></a><br />//<a herf="..."></a> 

　　说明：属性选择器是css2版本新增的选择器，不过到了现在HTML5全面普及的时代，一般的主流浏览器的最新版本都应该支持。其意思是如果标签含有指定的属性，都会被选中，也就是选中多个。如上面的例子所示，其中href属性是所有标签必须声明的属性，这种写法将选中HTML页面中的所有标签。

　　　　关于属性选择器还有下面这些扩展:

/*css2*/[type="password"] {     border: 1px solid red; } <br /><br />//<input type="password" />

　　　　说明：该选择器进一步限制了除了要有相应的属性之外，其属性的值也要符合要求。当有多个对象符合要求时，也会选中多个对象。

立即学习“前端免费学习笔记（深入）”；

/*css3*/[href^="http"] {     color: orange;} 

　　　　说明：这是css3版本中新增的，加入了正则匹配的部分特性，如上面例子表示属性的值的开头必须是http。

立即学习“前端免费学习笔记（深入）”；

/*css3*/[href$=".com"] {    color: orange; } 

　　　　说明：与开头匹配相对的，这里是结尾匹配。

立即学习“前端免费学习笔记（深入）”；

/*css2*/<br />[href*="baidu"] {    color: orange; }

　　　　说明：这里表示，只要属性的值中含有指定的字符就能匹配，不管字符是在开头还是结尾。

立即学习“前端免费学习笔记（深入）”；

/*css2*/<br />[class~="edf"] {    font-size: 50px; }<br /><br />//<div></div>

　　　　说明：当一个属性含有多个值的时候，可以用这个方式选择。

立即学习“前端免费学习笔记（深入）”；

/*css2*/<br />[lang|="en"] {     color: red;} <br /><br />//<span lang="en-us"></span>

　　　　说明：当属性有多个值，且多个值间是使用-号分隔的时候，可以使用这个选择器。

立即学习“前端免费学习笔记（深入）”；

2.复合选择器

　　将不同的选择器进行组合形成新的特定匹配，我们称为复合选择器。

　　2.1 分组选择器

p,b,i,span {     color: red; } 

　　　　说明：将多个选择器通过逗号分割，同时设置一组样式。当然，不但可以分组元素选择器，还可以使用 ID 选择器、类选择器、属性选择器混合使用。

　　2.2 后代选择器

p b {    color: red; } <br /><br />//<p><br />//　　<b>a</b><br />//　　<b>b</b><br />//　　<div><br />//　　　　<b>c</b><br />//　　</div><br />//</p>

//注意：这里标绿色不是css样式设置后的结果，只是表面选择器选中了哪个，下同。

　　　　说明：选择

元素内部所有元素。不在乎的层次深度，也就是父级元素内不管嵌套了几级，只要有都会被选中。当然，后代选择器也可以混合使用ID选择器、类选择器、属性选择器。

ul > li {    border: 1px solid red; }<br /><br />//<ul><br />//　　<li>a</li><br />//　　<li>b</li><br />//　　<div><br />//　　　　<li>c</li><br />//　　</div><br />//</ul>

p + b {    color: red; }<br /><br />//<p></p><br />//<b></b><br />//<b></b>

p ~ b {    color: red; } 

//<p></p><br />//<b></b><br />//<b></b>

div::first-line {     color: red; } 

div::first-letter {    color: red;}

a::before {     content: ''点击''; } <br /><br />//<a href="...">我</a>　　//设置前<br />//<a href="...">点击我</a>　　//设置后

a::after {     content: ''很帅'';<br />}

//<a href="...">我</a>　　//设置前<br />//<a href="...">我很帅</a>　　//设置后

span::selection {    color:red;      }

:root {    border: 1px solid red;}

ul > li:first-child {    color: red;}

//<ul><br />//　　<li>a</li><br />//　　<li>a</li><br />//</ul>

22个必须知道的css技巧_html/css_WEB-ITnose

1、改变选中文字的背景和颜色

::selection{ /* Safari and Opera */    background:#c3effd;    color:#000;}::-moz-selection{ /* Firefox */    background:#c3effd;    color:#000;}

2、防止火狐滚动条跳动

html{ overflow-y:scroll; }

3、分页打印

.page-break{ page-break-before:always; }

4、使用!important

.page { background-color:blue !important;   background-color:red;}

5、图像替换文字

.header{    text-indent:-9999px;    background:url(''someimage.jpg'') no-repeat;    height: 100px; /*dimensions equal to image size*/    width:500px;}

标注：text-indent:-9999px; 是将首行左缩进到人看不到的地方

6、兼容浏览器的最小高度

#container{    height:auto !important;/*all browsers except ie6 will respect the !important flag*/    min-height:500px;    height:500px;/*Should have the same value as the min height above*/}

7、对新窗口打开得链接高亮显示

a[target="_blank"]:before,a[target="new"]:before {    margin:0 5px 0 0;    padding:1px;    outline:1px solid #333;    color:#333;    background:#ff9;    font:12px "Zapf Dingbats";    content: "\279C";}

8、美化li序列号

如图：

ol {    font: italic 1em Georgia, Times, serif;    color: #999999;}ol p {    font: normal .8em Arial, Helvetica, sans-serif;    color: #000000;}

9、首字下沉

如图：

p:first-letter{display:block;margin:5px 0 0 5px;float:left;color:#FF3366;font-size:3.0em;font-family:Georgia;}

10、兼容浏览器的opacity

.transparent_class {          filter:alpha(opacity=50);          -moz-opacity:0.5;          -khtml-opacity: 0.5;          opacity: 0.5;      }

11、使用line-height实现垂直居中

line-height:30px;

12、居中布局

body{    width:1000px;    margin:0 auto;}

13、移除ie文本域的垂直滚动条

textarea{    overflow:auto;}

14、移动超链接的虚线框

a:active, a:focus{ outline:none; }

15、ie下元素消失，给该元素添加

position:relative;

16、根据链接不一样，添加不一样的icons

a[href$=''.doc''] {    padding:0 20px 0 0;    background:transparent url(/graphics/icons/doc.gif) no-repeat center right;}

17、css手型点击样式

input[type=submit],label,select,.pointer { cursor:pointer; }

18、字母大写

text-transform: capitalize;

19、所有英文大写，且首字母比其他的大

font-variant:small-caps;

20、高亮文本框，不支持ie

input[type=text]:focus, input[type=password]:focus{    border:2px solid #000;}

21、移除img边框

a img{ border:none; }

22、用label实现无表格表单

HTML Code

<form method="post" action="#" ><p><label for="username" >Username</label><input type="text" id="username" name="username" /></p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1"rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p><p><span>点击下载</span>“<a href="https://teacher.php.cn/jump/126"rel="nofollow" target="_blank">修复打印机驱动工具</a>”；</p><p><label for="password" >Username</label><input type="password" id="password" name="pass" /></p><p><input type="submit" value="Submit" /></p></form>

CSS Code

p label{    width:100px;    float:left;    margin-right:10px;    text-align:right;}

 参考：http://www.cnblogs.com/guoguo-15/archive/2011/08/24/2151859.html

CSS ID选择器与CLASS选择器_html/css_WEB-ITnose

  在 CSS 中，选择器是一种模式，用于选择需要添加样式的元素。        
  属性选择器可以根据元素的属性及属性值来选择元素。

  三种基本的选择器类型：标签名选择器、类选择器、id选择器

具体语法如下：

 1、标签名选择器，如：

立即学习“前端免费学习笔记（深入）”；

html {color:black;}h1 {color:blue;}h2 {color:silver;}

立即学习“前端免费学习笔记（深入）”；

2、类选择器

类选择器允许以一种独立于文档元素的方式来指定样式。
该选择器可以单独使用，也可以与其他元素结合使用。
提示：只有适当地标记文档后，才能使用这些选择器，所以使用这两种选择器通常需要先做一些构想和计划。
要应用样式而不考虑具体设计的元素，最常用的方法就是使用类选择器。

       demo：

立即学习“前端免费学习笔记（深入）”；

.important {font-weight:bold;}.warning {font-style:italic;}.important.warning {background:silver;}

立即学习“前端免费学习笔记（深入）”；

3、ID选择器

小结：

那么类选择器与ID选择器有啥区别呢？

ID 有高优先级、唯一性的特点，特指「个体」。
相对于 ID，class 的优先级比较适中，特指「特定群体」。
Class 的使用需要参考面向对象的抽象概念，把共有的属性抽象出来。

ID是先找到结构/内容，再给它定义样式；
Class是先定义好一种样式，再套给多个结构/内容。

CSS3 :checked 伪类选择器妙用_html/css_WEB-ITnose

css3中的伪类选择器例如:hover，:before，:after在已经在前端开发中被广泛使用，但是可能开发者还不太熟悉:checked这个伪类选择器。本文将介绍:checked这个伪类选择器以及如何使用它写出更加有优雅的代码。

:checked伪类选择器顾名思义，表示的是 type="checkbox" 的input元素被选中的状态。在前端开发中，我们常用:hover伪类来设置鼠标悬浮时的样式，而由于checked状态的改变需要用户进行点击操作，使用:checked伪类，我们则可以设置鼠标点击后的状态。在使用zepto、jQuery库时，有一个经常使用的方法toggle用来隐藏和再现页面上的某个元素，了解:checked伪类的定义之后，我们完全可以用纯CSS实现toggle效果。

首先定义页面结构：

接着，我们对 #toggle-trigger 的选中态进行设置

此时，我们通过点击选中或者取消选中checkbox，就能对 .toggle-item 进行隐藏和再现。

立即学习“前端免费学习笔记（深入）”；

但是我们想跟进一步，把toggle-trigger的范围扩展到checkbox之外，因为在展现toggle效果时，触发toggle的部分并不局限于checkbox一种形式。这时我们只需要使用label标签即可，label标签有一个for属性，通过设置for属性，可以将label标签指向特定的input元素，同时将checkbox隐藏，既可以达到点击label标签来触发toggle的效果。

根据caniuse的数据，:checked伪类的支持程度基本达到了100%。在下一个项目里面，你会愿意使用它嘛？

参考文章

You Don''t Need JavaScript for That!

今天关于前端极易被误导的css选择器权重计算及css内联样式的妙用技巧_html/css_WEB-ITnose的讲解已经结束，谢谢您的阅读，如果想了解更多关于2.css选择器_html/css_WEB-ITnose、22个必须知道的css技巧_html/css_WEB-ITnose、CSS ID选择器与CLASS选择器_html/css_WEB-ITnose、CSS3 :checked 伪类选择器妙用_html/css_WEB-ITnose的相关知识，请在本站搜索。