常用CSS选择器

时间:2022-12-12 17:26:13

                                                                                  常用CSS选择器

     在学习CSS选择器之前,首先要学习什么是CSS(Cascading Style Sheets)层叠样式表技术。CSS是一个出色技术,它使页面结构和样式进行完全分离,保证了HTML页面的简洁。利用CSS选择器可以轻松地改变某个元素的样式,并且不改动页面HTML结构,只需要该表对应的CSS样式表。

         要使得某个样式加到对应的HTML元素上,首先应该找到这个元素。在CSS中,执行这种任务的表现规则叫做CSS选择器。学会使用CSS选择器是学习CSS的基础,它为获取目标元素后施加样式提供了极大的灵活性。下面看看有哪些CSS样式选择器。

         一.

             名称:标签选择器;

             语法:E{ CSS规则  }

             描述:以文档元素作为选择符

             实例:input{  border:1px solid red;color:gray;margin:0;padding:0  }

        

         二.

             名称:ID选择器;

             语法:#ID{ CSS规则  }

             描述:以文档元素的唯一标识符作为选择符

             实例:#footer{  border:1px solid red;color:gray;margin:0;padding:0  }

        

         三.

             名称:类选择器;

             语法:E.className{ CSS规则  }

             描述:以文档元素的class作为选择符

             实例:E.style{  border:1px solid red;color:gray;margin:0;padding:0  }

         四.

             名称:群组选择器;

             语法:E1,E2,E3{ CSS规则  }

             描述:多个选择符应用同样的CSS样式规则

             实例:E,F,G,N{  border:1px solid red;color:gray;margin:0;padding:0  }

         五.

             名称:后代选择器;

             语法:E F{ CSS规则  }

             描述:E元素的任意后代元素F执行对应的CSS样式规则

             实例:E  F{  border:1px solid red;color:gray;margin:0;padding:0  }

         六.

             名称:通配符选择器;

             语法:*{ CSS规则  }

             描述:以文档所有元素作为选择符

             实例:*{  margin:0;padding:0  }


         目前几乎所有的浏览器都支持上面的CSS选择器。此外,CSS选择器还有伪类选择器(E:hover{  ...  }),

子选择器(E>F{  ...  }),临近选择器(E+F{  ...  }),属性选择器(E[attr]{  ...  })。但是,主流的浏览器并不完全支持所有的CSS选择器。

         想了解更多的CSS、HTML、JavaScript的知识,建议初学者在W3C(http://www.w3school.com.cn/)上进行学习。