样式选择器

2017-07-02  本文已影响0人  hyt222

1.元素选择器

在 <head> 里头可以有一个 <style></style> 的标记区,在中间可以指定这个页面中各种 HTML 元素的样式。元素选择器。

<style>

      th{border:1px solid blue}

</style>

th,td {border:1px solid blue} 表示 th、td 都遵循这个样式,分组选择。一个元素可以遵循多个样式选择器。

2.类选择器

可以在定义 CSS 时并不针对某个具体的 HTML 标记。可以给出 .important 或 *.important 叫做important 类的东西,定义它的样式。p.important 只有在 p 里的 important 才遵循规则;*.important 任何东西的 important 都遵循样式。 *important{ color:red }

起类名 <p class="important warning"> 一个标记可属于多个类。类选择器前可有具体 HTML 名字,也可以是 * 号。


*#important {color:red} 表示 id。<p id="important"> id 对 HTML 元素有特殊意义。

常用类选择器。

3.属性选择器

*[title] {color:red} 包含 title 属性的元素是红色的。

选择有某个属性的元素,不论属性是什么,可用属性选择器。

4.后代选择器

p em { background-color:green } p 里面的 em 要遵循样式。

使用后代选择器时,<p>和<em>之间可有其他标记,不影响样式。

p > em {background-color:green} 必须是紧挨着<p>的下一个<em>才能起作用。

5.相邻兄弟选择器

h1 + p {background-color:green} h1 后面紧邻的 p 应用样式。

6. 链接选择器

<a href="http://news.163.com">网易新闻</a>

样式里头可以指定链接标记是怎么样的。a {color:#FF0000}

a:visited 选择所有已被访问的链接。

a :link 选择所有未被访问的链接。

a:hover 选择鼠标指针位于其上的链接。

a:active 选择活动链接。(未点击过)

冒号后的称为伪类。伪类可以和类配合起来 a.red:visited

上一篇下一篇

猜你喜欢

热点阅读