CSS基本知识2-CSS选择

选择就是CSS定义的第一部分，可以用面向对象的模式来理解，或者声明式的面向对象。

标准选择：

#.E

进阶选择：“，”分隔多个相同项，相当于类的实例。 如:#btn1,#btn2,.btn {...}

后代元素选择，相当于子类：

空格分隔: .nav p {...}    #header .nav span {...}

子类在DOM中，是没有层级的。

子元素选择，只选一级， >

例如： nav > p {...}

相邻选择使用+，如h1 + p {margin-top:50px;}

属性选择器：按属性选择：[属性=值]

例如：input[type=text] 

以上选择器，可以做And运算，就是结合起来使用

 

可见，CSS选择器，和Sql语言也很相似了。是声明式的。属性选择器还有更多的条件，但很少被使用（当然如果用来做应用，或许能派上大用场）

CSS媒体查询，也是类似Sql的查询，原理是一样一样的。

 

伪类

W3C："W3C" 列指示出该属性在哪个 CSS 版本中定义（CSS1 还是 CSS2）。

属性	描述	CSS
:active	向被激活的元素添加样式。	1
:focus	向拥有键盘输入焦点的元素添加样式。	2
:hover	当鼠标悬浮在元素上方时，向元素添加样式。	1
:link	向未被访问的链接添加样式。	1
:visited	向已被访问的链接添加样式。	1
:first-child	向元素的第一个子元素添加样式。	2
:lang	向带有指定 lang 属性的元素添加样式。

 

 更多的伪类，其实原理就是从Dom中查找某些特定的节点以代替编程，比如找第一个子，最后一个子，交替查找子，找为空的等等，总之，CSS选择器，就是类Sql的一个声明式编程。