CSS 之 选择器

选择器

类型选择器

也叫作 元素选择器和简单选择器，能够根据元素标签指定样式。

p {
color:red;
}

类选择器

通常用于某些同类型的样式。

.xxxClass{
}

<div class="xxxClass"></div>

ID选择器

为特殊的元素，指定类型

#xxxId{
}

<div id="xxxId"></div>

后代选择器

在某个选择器后，选择指定规则的后代，为其指定样式

div p {
}

伪类选择器

为某些特殊的元素，在某些条件时，指定样式。
好比，连接的link和visited ;
以及其余元素的hover,focus,active等。

a:link, a:visited {}
a:hover, a:focus, a:active {}

通用选择器

相似通配符的做用，好比全部可用元素添加样式。

*{}

高级选择器

子选择器

后代选择器是选择全部的后代，子选择器则能够选择元素的直接后代，即子元素。

#nav>li{}

相邻选择器

#nav + p {}

属性选择器

好比为tooltip添加样式

acronym[title]{}

样式层叠

因为选择同一个元素能够经过不一样的方法，好比元素的后代、或者类、或者ID，那么就可能形成样式的重叠。所以可使用!important,增长样式的优先级。

样式特殊性

再说到样式的重叠的另外一种状况，若是不一样的方式都指定了样式，到底会优先使用哪种呢？
这就须要了解特殊性了，从上到下 依次为：

style=""
#xxx{}
.class{}
body div{}
div{}

即，元素上的style会优先、其次是使用ID选择器、而后是类选择器、后代选择器、最后是类型选择器

样式的继承

样式是能够继承的，好比给body增长样式，那么页面中body内的全部元素都会应用这个样式。

样式的引用

样式的引用由两种方式，一种是经过连接link，另外一种则是style的导入的方式：

<!-- <link rel="stylesheet" type="text/css" href="test.css"> -->
    <style type="text/css">
    /*slow*/
    @import url("test.css");
    </style>

相比较来讲，link的方式要更快一些。

另外，仍是推荐把CSS都放在同一个文件中。由于浏览器加载样式文件，是受浏览器的限制的，有的浏览器只支持同时下载3个文件、有的支持8个...
若是由三个文件，而浏览器只能同时下载2个文件，那么第三个就必需要等到前两个下载完后，才能加载。
所以，放在一个文件中会更快的加载。

若是把全部的CSS都放在一个文件，又可能致使文件过于庞大，不易维护。所以有如下几个建议：

• 完善注释信息
• 对样式进行分组，并写入相应的注释，能够加快定位
• 发布时，能够考虑对文件进行压缩，好比删除注释、删除空白、压缩。目前不少的浏览器都支持从压缩包中下载文件，这样能够有效的减小文件体积。

暂时也就整理这么多吧！后续再补充....