css样式规则的简要总结

时间:2021-07-30 05:37:02

css与文档关联起来发挥作用。

css文件中是各种样式规则,由选择器和声名块构成。声明块由多条声明组成。选择器是声明要作用的对象,声明是对具体规则的描述。

声明由属性和值组成,值或是属性的错误都会使该条声明失效.但是后续的声明可以继续发挥作用.一般情况下,属性值是由关键字或是关键字列表组成.关键字之间通常是空格来分界,但例外是可以在:字体大小/行高格式上使用"/".选择器分为:通配选择器、元素选择器、id选择器、类选择器、属性选择器、伪类选择器、伪元素选择器、后代选择器、子代选择器、相邻兄弟选择器、普通兄弟选择器。下面分开说明:

1、元素选择器

元素是构成文档的基础。当然主要是html文档但是并不限于html,在xml中也可以使用。这自不用说,直接使用元素就是了。

2、通配选择器

该选择器使用通配符*,匹配所有的元素。问题在于不要滥用,在特殊性上,它的特殊性位0,但是强过没有特殊性的继承的方式。

3、id选择器和类选择器

二者独立于元素,也就是说可以代表了一类条件,而且是区分大小写的。不同在于:id具有唯一性,不支持多类的多个词空格的形式。书写上的差异不表。id会在javascript中建立全局变量。

4、属性选择器。该选择器会依据属性的特性来选择元素。分为:简单属性选择器(包含属性的有无,同常是做校验使用)、具体属性选择器、部分选择器(~= ^=  *=  $=)、特殊属性选择器(|= 通常用于选择语言,健壮性不如:lang这个伪元素)。

5、后代选择器。它是基于良好的文档结构的。所以良好的文档结构是非常重要的。直接将元素列出来就可以了。不管嵌套结构有多么深都会使用.

6、子代选择器。由于子代应用的面太大,需要更加精确地控制方式。子代选择就出现了。

7、相邻兄弟选择器。该选择器实际上要求比较严格,选择的是元素之后紧邻的元素,只会是一个。但有时好像选择了第一个之后的所有,只是因为本是选择了全部了。例如:ol li + li 会选择除第一个之后的所有。原因是ol li选择了所有的li.然后是所有的li选择兄弟元素。

8、 普通兄弟选择器.a ~ b.这种方式会更加的宽松,允许间隔,只要有相同的父元素就可以了。

9、伪类与伪元素。二者在元素的文档中都不会存在,而是由用户代理(主要是浏览器)产生。这是一种幻象的产生方式。伪类::link :visited :focus :hover :active :lang()  :first-child :nth-child。伪元素也是由用户代理来产生的。主要有::first-line  :first-letter :after :before等。前两个主要用于块级元素,但不会限与块级元素。但对可用的属性还是有限制。而且必须在选择器的最后,如P:first-line em就会出错。后二者如:after {content:"value";}。