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";}。

css样式规则的简要总结的更多相关文章

  1. css样式规则

    在css样式规则中: 1.选择器用于指定CSS样式作用的HTML对象,花括号内是对该对象设置的具体样式. 2.属性和属性值以"键值对"的形式出现. 3.属性是对指定的对象设置的样式 ...

  2. 强制改变css样式优先级

    .list{ left:20px!important; } css !important作用是提高指定CSS样式规则的应用优先权. !important是CSS1就定义的语法,作用是提高指定样式规则的 ...

  3. WEB入门三 CSS样式表基础

    学习内容 Ø        CSS的基本语法 Ø        CSS选择器 Ø        常见的CSS样式 Ø        网页中3种使用CSS的方式 能力目标 Ø        理解CSS的 ...

  4. Web前端开发最佳实践(8):还没有给CSS样式排序?其实你可以更专业一些

    前言 CSS样式排序是指按照一定的规则排列CSS样式属性的定义,排序并不会影响CSS样式的功能和性能,只是让代码看起来更加整洁.CSS代码的逻辑性并不强,一般的开发者写CSS样式也很随意,所以如果不借 ...

  5. 引入CSS样式表(书写位置)

    CSS可以写到那个位置? 是不是一定写到html文件里面呢? 内部样式表 内嵌式是将CSS代码集中写在HTML文档的head头部标签中,并且用style标签定义,其基本语法格式如下: <head ...

  6. 2.1.4- css 样式规则

    CSS初识 CSS(Cascading Style Sheets) CSS通常称为CSS样式表或层叠样式表(级联样式表),主要用于设置HTML页面中的文本内容(字体.大小.对齐方式等).图片的外形(宽 ...

  7. 2.1.3- 体会css样式

    css初始 css样式规则 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta cha ...

  8. CSS样式表的书写位置

    行内式(内联样式) 是通过标签的style属性来设置元素的样式,其基本语法格式如下: <标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"&g ...

  9. CSS特异性(CSS Specificity)的细节之CSS样式权重的计算与理解(CSS样式覆盖规则)

    本篇讲解CSS特异性(CSS Specificity)的细节,也就是CSS样式选择器的权重计算 通过计算选择器的权重(weight)最终决定哪个选择器将获得优先权去覆盖其他选择器的样式设定,即“优先原 ...

随机推荐

  1. 让资源可以下载a

    第一种方式------不存在任何兼容性 <a href='x.zip'>下载</a> 将要链接的资源进行打包即可 第二种方式----存在兼容性,目前只有Chrome 和Fire ...

  2. js 的try catch

    语法: try { //在此运行代码 } catch(err) { //在此处理错误 } 注意:try...catch 使用小写字母.大写字母会出错. <script language=&quo ...

  3. HDU 1070 - Milk

    给每种牛奶价格和量 要求买最便宜的牛奶 #include <iostream> using namespace std; int t,n; ][]; ],v[]; int main() { ...

  4. annotation 不给提示

    window---preferences---content assist(java)--添加@

  5. HttpClient基础教程

    1.HttpClient相关的重要资料 官方网站:http://hc.apache.org/ API:http://hc.apache.org/httpcomponents-client-4.3.x/ ...

  6. Android Broadcast Receiver注册

    之前有关 Broadcast Receiver的链 动态注册 1.我们新建一个广播接受类,我们创建一个内部类让他继承BroadcastReceiver,并且重新其中当有广播来到时执行的方法onRece ...

  7. php递归函数,性能给力

    function arPro($data,$res=array(),$pid='0',$level='0'){ foreach ($data as $k => $v){ if($v['comme ...

  8. python操作redis--string

    #!/usr/bin/python #!coding:utf-8 """ 完成用redis模块操作string类型的数据 """ impor ...

  9. CSS3 设置 Table 隔行变色

    table tr:nth-child(odd){background:#F4F4F4;} table td:nth-child(even){color:#C00;}

  10. VC++自绘界面

    // MySkinDlg.cpp : implementation file // #include "stdafx.h" #include "MySkin.h" ...