css的类选择器是怎么样的(代码)


本文摘自PHP中文网,作者(*-*)浩,侵删。

在 CSS 中,类选择器以一个点号显示: ( 推荐学习:CSS入门教程 )

1

.center {text-align: center}

在上面的例子中,所有拥有 center 类的 HTML 元素均为居中。

在下面的 HTML 代码中,h1 和 p 元素都有 center 类。这意味着两者都将遵守 ".center" 选择器中的规则。

1

2

3

4

5

6

<h1 class="center">

This heading will be center-aligned

</h1>

<p class="center">

This paragraph will also be center-aligned.

</p>

注意:类名的第一个字符不能使用数字!它无法在 Mozilla 或 Firefox 中起作用。

和 id 一样,class 也可被用作派生选择器:

1

2

3

4

.fancy td {

    color: #f60;

    background: #666;

    }

在上面这个例子中,类名为 fancy 的更大的元素内部的表格单元都会以灰色背景显示橙色文字。(名为 fancy 的更大的元素可能是一个表格或者一个 div)

元素也可以基于它们的类而被选择:

1

2

3

4

td.fancy {

    color: #f60;

    background: #666;

    }

在上面的例子中,类名为 fancy 的表格单元将是带有灰色背景的橙色。

1

<td class="fancy">

你可以将类 fancy 分配给任何一个表格元素任意多的次数。那些以 fancy 标注的单元格都会是带有灰色背景的橙色。那些没有被分配名为 fancy 的类的单元格不会受这条规则的影响。

还有一点值得注意,class 为 fancy 的段落也不会是带有灰色背景的橙色,当然,任何其他被标注为 fancy 的元素也不会受这条规则的影响。这都是由于我们书写这条规则的方式,这个效果被限制于被标注为 fancy 的表格单元(即使用 td 元素来选择 fancy 类)。

以上就是css的类选择器是怎么样的(代码)的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

html css怎么隐藏滚动条

css里一段字没有充满一行怎么办

css如何设置图层在最上面

css怎么让字体变细

css如何取消下划线

css怎么让高度自适应

css column-width属性怎么用

css精灵技术有什么用?

详解三种css3模糊背景效果(代码实例)

css怎么设置草书字体

更多相关阅读请进入《css》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...