任务8-css选择器

2016-06-21 本文已影响0人咸吧

CSS选择器常见的有几种?

基本选择器

id选择器
标签选择器
类选择器
通用选择器

属性选择器，常见属性选择器E [att]， eg. p [margin=0]

常见属性选择器用法
组合选择器
1. E,F 群组选择器，将具有相同样式的元素分组在一起
2. E > F 子代选择器
3. E F 后代选择器（E里所包含的所有F的元素）
4. E+F 相邻兄弟选择器
  
  相邻选择器
伪类选择器（详见6题）
伪元素选择器
::first-line选择元素的第一行
::first-letter选择文本块的第一个字母
::before和::after这两个主要用来给元素的前面或后面插入内容，这两个常用"content"配合使用，见过最多的就是清除浮动。

.clearfix:before, 
.clearfix:after {
                         content: "."; 
                         display: block; 
                         height: 0; 
                         visibility: hidden; }
 .clearfix:after {clear: both;}
 .clearfix {zoom: 1;}

选择器的优先级是怎样的?

简单说，就是选择器越精确优先级越高。
important > 内联 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > ~~继承 > 通配符> 浏览器默认

class 和 id 的使用场景?

id用于布局结构，用于区分不同的结构和内容，只能有一个。
class是一类元素的形式。
** id是先找到结构/内容，再给它定义样式；class是先定义好一种样式，再套给多个结构/内容。 **
** 单一的元素，或需要程序、JS控制的东西，需要用id定义；重复使用的元素、类别，用class定义。 **

使用CSS选择器时为什么要划定适当的命名空间？

语义化，增强代码可读性，方便后期维护。

以下选择器分别是什么意思?

/* id选择器header */
#header{
}  
/* 类选择器header */
.header{
}
/* 类选择器header包含的logo选择器 */
.header .logo{
}
/* 同时包含header 这个类和 mobile 这个类的元素 */
.header.mobile{
}
/* 类选择器header内包含的所有p标签的元素和所有h3标签的元素 */
.header p, .header h3{
}
/* id选择器header里包含的所有类选择器nav的儿子li选择器 */
#header .nav>li{
}
/* id选择器header标签内当a标签被悬停时的样式 */
#header a:hover{
}

列出你知道的伪类选择器

** 伪元素选择器vs伪类选择器 **
伪元素选择器：伪元素的效果是需要通过添加一个实际的元素才能达到的。
伪类对元素进行分类是基于特征而不是它们的名字、属性或者内容。
由于状态是动态变化的，所以一个元素达到一个特定状态时，它可能得到一个伪类的样式；当状态改变时，它又会失去这个样式。由此可以看出，它的功能和class有些类似，但它是基于文档之外的抽象，所以叫伪类。

伪类元素选择器

动态伪类，常见：:link，:hover，visited，:hover，:active，:focus
注意：a标签** Link--visited--hover--active **顺序！（否则会有覆盖样式）

UI元素状态伪类

":enabled",":disabled",":checked"伪类称为UI元素状态伪类，这些主要是针对于HTML中的Form元素操作。
eg. "type="text"有enable和disabled两种状态，前者为可写状态后者为不可状态；另外"type="radio"和"type="checkbox""有"checked"和"unchecked"两种状态。

:nth选择器

:first-child选择某个元素的第一个子元素；
:last-child选择某个元素的最后一个子元素；
:nth-child()选择某个元素的一个或多个特定的子元素；
:nth-last-child()选择某个元素的一个或多个特定的子元素，从这个元素的最后一个子元素开始算；
:nth-of-type()选择指定的元素；
:nth-last-of-type()选择指定的元素，从元素的最后一个开始计算；
:first-of-type选择一个上级元素下的第一个同类子元素；
:last-of-type选择一个上级元素的最后一个同类子元素；

test

运行如下代码，解析下输出样式的原因。