CSS3 选择器—基本选择器

来源:互联网 发布:logic pro x windows版 编辑:程序博客网 时间:2024/05/21 15:00

CSS 选择器

CSS是一种用于屏幕上渲染html,xml等一种语言,CSS主要是在相应的元素中应用样式,来渲染相对应用的元素,那么这样我们选择相应的元素就很重要了,如何选择对应的元素,此时就需要我们所说的选择器。

选择器主要是用来确定html的树形结构中的DOM元素节点。

我把CSS选择器分开成三部分:

  • 基本选择器 (常用)
  • 属性选择器
  • 伪类选择器 (这一部分也是最难理解和掌握的部分)

今天我们先来看第一部分——基本选择器。

我们先来看一个常用的选择器列表图

通配符选择器(*)

选择所有元素,也可以选择某个元素下的所有元素。

元素选择器(E)

文档元素的选择器。

类选择器(.className)

独立于文档元素的选择器,使用类名来进行选择。

类选择器还可以结合元素选择器来使用。

id选择器(#ID)

ID选择器和类选择器很相似,不同的是ID选择器是一个页面中的唯一值。

注意:

  1. 一个文档中,一个id选择器只能使用一次,因为id在页面中是唯一的。
  2. id选择器不能像类选择器一样多个合并使用,一个元素只能命名一个id名。
  3. 可以在不同的文档中使用相同的id名。

后代选择器(E F)

后代选择器也被称作包含选择器,所起作用就是可以选择某元素的后代元素。

子元素选择器(E > F)

子元素选择器只能选择某元素的子元素,其中E为父元素,而F为子元素,其中E>F所表示的是选择了E元素的所有子元素F.

这和后代选择器(E F)不一样,在后代选择器中F是E的后代元素,而子元素选择器E>F,基中F仅仅是E的子元素而已。

相邻兄弟元素选择器(E + F)

相邻兄弟元素选择器可以选择紧接在另一个元素后的元素,而且他们是具有一个相同的父元素,换句话说,EF两元素都具有一个相同的父元素,而且F元素在E元素的后面,而且相邻,这样可以就可以使用相邻兄弟选择器来选择F元素。

通用兄弟选择器(E ~ F)

这种选择器将选择某元素后的所有兄弟元素。

群组选择器(selector1,seletctor2,…,selectorN)

群组选择器是将具有相同样式的元素分组在一起,每个选择器之间用逗号“,”隔开。

0 0
原创粉丝点击