CSS基础之选择器

CSS基础：选择器

选择器概述：

• CSS与图片

• CSS与浏览器

• CSS常用属性

• CSS3文字与字体相关样式

Not选择器:

想对某个结构元素式样样式，但是想排除这个结构元素下面的子结构元素，让它不使用这个样式，可使用not选择器。

empty选择器:

Empty选择器用来指定元素内容为空白时使用的样式。

Target选择器:

Target选择器对页面内的链接起作用。

First-child、 last-child、nth-child和nth-last-child：

首先来看First-child、 last-child的效果图：

再来看看nth-child和nth-last-child的效果图：

CSS3字体:

• CSS3@font-face 规则

• 在 CSS3 之前---web 设计师必须使用已在用户计算机上安装好的字体。

• CSS3中，将该字体文件存放到 web 服务器上，它会在需要时被自动下载到用户的计算机上。

CSS3字体-浏览器支持:

Firefox、Chrome、Safari以及 Opera 支持 .ttf (True TypeFonts) 和 .otf (OpenType Fonts) 类型的字体。

Internet Explorer 9+ 支持新的 @font-face 规则，但是仅支持 .eot 类型的字体 (Embedded OpenType)。

CSS3字体-字体引用:

• 通过 font-family 属性来引用字体的名称

• 例：

Media Queries相关样式:

• CSS3中增加了Media Queries模块，该模块中允许添加媒体查询（Media query)表达式.

• 例：

@media screen and (min-width:1000px){

这里是指屏幕宽度大于1000像素时，引用的样式表要写在这个大括号里

}

@media screen and (min-width:640px) and(max-width:999px){

这里是指屏幕宽度640以上，940以下，引用的样式表要写在这个大括号里

}

@media screen and (max-width:639px){

这里是指屏幕宽度639以下，引用的样式表要写在这个大括号里

}

这里我只列举了几个选择器，css的选择器有很多，具体可参考：http://www.w3school.com.cn/cssref/css_selectors.asp

其中下图这些实在css3中定义的