隐藏页面文字的css及举一反三

隐藏页面中的某些文字在页面显示调整中是很需要的。比如如下的页面中，将“发布于”隐藏，页面会更好。那么如何做到呢？

操作步骤如下：

1. 在firefox浏览器中，将鼠标移至文字“发布于”之上，然后单击右键菜单，点选“查看元素”。

2. 找到文字“发布于”所在的css类，如下图：

此时可以发现，作用于文字“发布于”的css类为meta。

3. 对此css类进行操作：添加.meta{}，内容为：

    position: absolute !important;
    clip: rect(1px, 1px, 1px, 1px);
    overflow: hidden;
    height: 1px;

也即是：

meta {
    position: absolute !important;
    clip: rect(1px, 1px, 1px, 1px);
    overflow: hidden;
    height: 1px;
}

如果起作用，可将这个css写入网站后台的css文件中。

如法炮制，可将其他信息隐藏起来，如下图，页面清爽了很多：

下面举一反三，如果要隐藏下面代码中的”欢迎光临 检验医学院“和”欢迎光临 检验检验中心“，又该如何做呢？

<div id="main-content" class="span6">
            <div style="min-height: 787.333px;" class="grid-inner clearfix">
                                            <h1 id="page-title">欢迎光临 检验医学院</h1>
                <div class="region region-content"></div>
           </div>
<div
<div id="main-content" class="span7">
            <div style="min-height: 787.333px;" class="grid-inner clearfix">
                                            <h1 id="page-title">欢迎光临 检验检验中心</h1>
                <div class="region region-content"></div>
           </div>
<div

首先要说明的是：css中对待div中的id用”#“开始标示，而class则用”.“标示。再有就是div中对于最低一级的div的嵌套书写处理方法，如
下面的代码中，想隐藏文字”欢迎光临 检验医学院“和”欢迎光临 检验检验中心“”，最好的写法是：

.span6 #page-title, .span7 #page-title {
    position: absolute !important;
    clip: rect(1px, 1px, 1px, 1px);
    overflow: hidden;
    height: 1px;
}

实现精确控制，而不直接写成下面的语法，以免在网站其他页面中的page-title被不必要隐藏：

#page-title {
    position: absolute !important;
    clip: rect(1px, 1px, 1px, 1px);
    overflow: hidden;
    height: 1px;
}