关于前端的碎碎念2-CSS装修之选择器与权重

CSS，层叠样式表——（Cascading Style Sheets），是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言，CSS能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言。CSS能够根据不同使用者的理解能力，简化或者优化写法，针对各类人群，有较强的易读性。

CSS看似比较繁杂，其实只要掌握了CSS中的盒子模型、定位、以及页面布局，就基本上掌握了大半啦~这时我们就已经能够对网页中各个元素进行精准的排版，做出符合我们意愿的网页啦！

关于CSS的各种属性，我们还是可以参考学习HTML那样。可以说CSS的属性几乎完全是语义化的。我们需要改变边框，那就是“border”，那我们需要右侧边框做一些改变，那就是“border-right”。很明显，接下来按照我们的需求还有“右边框的宽度——border-right-with”，”右边框颜色——border-right-color”等等等，诸如此类~

完全就是我们需要什么，只要凭着需求去寻找。~follow me~

-->基础选择器：

通用选择器：用来初始化网页默认样式的，样式表开头就写；格式：*{padding:0;margin:0;};

标签选择器：给指定标签加样式；格式：p{color:green;};

类选择器：选择制定类选择器样式；格式:.class名{background:pink;};注意：class名在标签中定义，如class="one";如果几个块内容样式一样，那么给他们一样的样式就可以;

id选择器：唯一标示，不能重复出现；格式：#id名{backgound-image:url(1.jpg);}注意：id名在标签中定义id="one";id不能随表加，几个块内容样式一样时几个块的id名都得不一样;

id和class的区别：注意上一点——ID必须能够唯一的确定DOM节点。如果你全篇都使用ID选择器，那么即使两个DOM节点样式完全相同，那么你也必须把节点样式写两遍, 如果后期要进行维护,那么你必须对两处的代码都进行维护！！！极大的增加了维护的成本;

伪类选择器：顺序LoVe HAte原则，可以跳过去，但顺序不能换；分别是链接状态(link)，访问过的状态(visited)，活动状态(hover)和点击状态(active);

描点类：a:link{color:yellow;} a:visited{color:blue;} a:hover{color:red;} a:active{color:pin;} 获取焦点时的样式a:focus{};注意：属性中可以加文本属性，背景颜色和图片；a{}与a:link{}实现的效果是一样的;
列表类：li:link{color:yellow;};li:visited{color:blue;} li:hover{color:red;} li:active{color:pin;};注意：属性中可以加文本系列属性，背景颜色和图片等;

-->复合选择器：

• 分组选择器（并集选择器，多元选择器）：用来给多个元素加同一个样式；例：.one,#one,a,span{color:red;font-size:14px;}意思是类one,#one,a标签，span标签有共同属性;

• 后代选择器：给子类元素加属性;例：.one a{text-decoration:none;}意思是类one的后代a标签修饰的内容无下划线;

• 子元素选择器（指定式选择器）：给指定的子元素加属性；例：#one>p{color:red;};意思是给id选择器one的儿子p标签休息的内容加属性;

• 相邻元素选择器：

  1.两个紧挨着的兄弟选择器加属性,不给自己加属性，只给后面的兄弟加属性；.one+p{background:red;};
  2.one~p{background:green}意思是给one选择器后面的所有p标签元素加属性，前提是他们拥有一个父类;

-->属性选择器：

1.给带有属性的元素的加属性;img[id]{background:red;}给带id的元素加属性;

2.给带有指定字符开头的的元素加属性：img[src^="b"]{background:red;}给以b开头的所有元素加属性;

3.选择器带有以指定属性值为结尾的元素：img[src$="b"]{background:red;}给以b结尾的所有元素加属性;

4.选择器带有包含指定属性值的元素:img[src*="b"]{background:red;}给含b的所有元素加属性;

5.给带有指定属性值的元素加属性：img[src="b.jpg"]{background:red;}给带b.jpg的元素加属性;

-->理解class和id
这两个选择器总是让我们感到迷惑。在CSS中，Class和ID分别用点“.”和井号“#”来标识。简单来说id就是用来标识那些单独不重复的样式，而class是可以重复使用的。

• class：类名，可以重复，也可以拥有多个，给CSS用的；如<p class="one two">;

• id：唯一标示，不能重复，一般多用在JavaScript中；命名规则与其他语言的标示命名规则一样;

  
  

-->!Important
所有被!important 标记的样式，即使它后来被重写，浏览器也只会采用被标记的那条。
.page {
    background-color:blue !important;
    background-color:red;
}
比如上面的例子，因为background-color:blue 被标记为!important ，即使后来有把背景改成红色的语句，也只采用被标记的那条。!important 用来强制使一个样式避免在之后的编码中被修改，遗憾的是IE不支持。

-->最后总结一下选择器权重关系

• 类选择器 < 类派生选择器<ID选择器 < ID派生选择器

• 派生选择器以前叫上下文选择器，所以完整的层叠优先级是:

• 浏览器缺省 <外部样式表 < 外部样式表类选择器 < 外部样式表类派生选择器< 外部样式表ID选择器< 外部样式表ID派生选择器< 内部样式表 < 内部样式表类选择器 < 内部样式表类派生选择器 < 内部样式表ID选择器 < 内部样式表ID派生选择器 < 内联样式…共12个优先级

• 另外，如果同一个元素在没有其他样式的作用影响下，其Class定义了多个并以空格分开，其优先级顺序为：

• 一个元素同时应用多个class，后定义的优先（即近者优先），加上!important者最优先！

  
  

-->学习前端需要方法，更需要一颗平常心，不要把前端想的多难，需要吃什么苦。。。既然学习这么痛苦，为什么不快乐一点学呢？anyway~希望大家可以成为一个优秀的前端！