零基础学做网站培训介绍

当前位置:

什么是CSS3 选择器,CSS3选择器有哪些

以下为学做网站论坛关于“什么是CSS3 选择器,CSS3选择器有哪些”讲解视频教程。

什么是CSS3选择器?

CSS3选择器在css3的学习中无疑是十分重要的,那么CSS3选择器是什么?

在百度百科中,我们可以看到css选择器的基本定义是:每一条css样式定义由两部分组成,形式如下: 选择器{样式} 在{}之前的部分就是“选择器”。

说了这么一大段话,其实简而言之,就是要使用css对html页面中的元素实现一对一,一对多或者多对一的控制,这就需要用到CSS选择器,html页面中的元素就是通过CSS选择器进行控制的。(推荐视频教程:CSS教程)

接下来我们就来看一个图,是对上述定义具体的分析。

什么是CSS3 选择器
如图,我们可以知道:

在{}之前的部分就是“选择器”,“选择器”指明了{}中的“样式”的作用对象,也就是“样式”作用于网页中的哪些元素

选择器通常是您需要改变样式的 HTML 元素,如:p,body,h1等等

每一条格式声明语句由“属性名:属性值”对组成,属性名和属性值间以冒号隔开,每条声明语句以英文状态下的分号“;”结束。

CSS3选择器有哪些?

1.基础的选择器

  • * 通用元素选择器,匹配任何元素 * { margin:0; padding:0; }
  • E 标签选择器,匹配所有使用E标签的元素 p { font-size:2em; }

.info和E.info class选择器,匹配所有class属性中包含info的元素

.info { background:#ff0; }

p.info { background:#ff0; }

2.组合选择器

  • E,F 多元素选择器,同时匹配所有E元素或F元素,E和F之间用逗号分隔 Div,p { color:#f00; }
  • E F 后代元素选择器,匹配所有属于E元素后代的F元素,E和F之间用空格分隔 p { font-size:2em; }
  • E > F 子元素选择器,匹配所有E元素的子元素F div > strong { color:#f00; }
  • E + F 毗邻元素选择器,匹配所有紧随E元素之后的同级元素F p + p { color:#f00; }

3.CSS 2.1 属性选择器

  • E[att] 匹配所有具有att属性的E元素,不考虑它的值。(注意:E在此处可以省略,比如“[cheacked]”。以下同。) p[title] { color:#f00; }
  • E F 后代元素选择器,匹配所有属于E元素后代的F元素,E和F之间用空格分隔 p { font-size:2em; }
  • E > F 子元素选择器,匹配所有E元素的子元素F div > strong { color:#f00; }
  • E + F 毗邻元素选择器,匹配所有紧随E元素之后的同级元素F p + p { color:#f00; }

注:CSS 2.1 属性选择器还有一个特点就是使用多个选择器,同时满足这多个选择器:blockquote[class=quote][cite] { color:#f00; }!

4.伪类选择器

E:first-child 匹配父元素的第一个子元素


p:first-child { font-style:italic; }

input[type=text]:focus { color:#000; background:#ffe; }

input[type=text]:focus:hover { background:#fff; }

q:lang(sv) { quotes: “\201D” “\201D” “\2019″ “\2019″; }
  • E:link 匹配所有未被点击的链接
  • E:visited 匹配所有已被点击的链接
  • E:active 匹配鼠标已经其上按下、还没有释放的E元素
  • E:hover 匹配鼠标悬停其上的E元素
  • E:focus 匹配获得当前焦点的E元素
  • E:lang(c) 匹配lang属性等于c的E元素

发表评论

电子邮件地址不会被公开。 必填项已用*标注