自定义CSS类无法正常工作

时间:2014-08-07 14:33:58

标签: php html css wordpress

我已经在Wordpress 3.9.2中的自定义皮肤上为style.css文件添加了自定义CSS。除了我添加的新类之外,所有类似乎都工作正常。

.frontpage_tile {
    width: 270px;
    float: left;
    min-height: 1px;
    margin-left: 30px;
}

.block {
    display: block;
    position: relative;
}

.block img {
    display: block;
    border: 1px solid rgba(53, 53, 53, 0.65);
    box-sizing: border-box;
    border-radius: 3px;
}

.block .caption {
    font-size: 13px;
    font-weight: normal;
    line-height: 1.2em;
    padding: 10px;
    margin: 0px;
    position: absolute;
    bottom: 1px;
    left: 1px;
    right: 1px;
    color: #FFF;
    background: none repeat scroll 0% 0% rgba(0, 0, 0, 0.6);
    text-shadow: 0px 0px 20px #000, 0px 0px 10px #000;
    z-index: 1;
}

以上代码被所有浏览器忽略。它不会出现在页面上,也不出现在" Inspect Element"在浏览器中。有任何想法吗?这是我在模板上使用的代码,我在自定义页面上调用它。

<div class="frontpage_tile">
    <a class="block" href="<?php echo get_permalink(); ?>" data-icon="&#xe00b;">
      <?php the_post_thumbnail('home-thumb'); ?>
      <span class="caption">
          <?php the_title(); ?>
      </span>
    </a>
</div>

2 个答案:

答案 0 :(得分:4)

我刚刚用wpscan扫描了你的网站,这就是你的问题:

[+] Interesting header: CF-RAY: 15644be6d86308d8-LHR
[+] Interesting header: SERVER: cloudflare-nginx
[+] Interesting header: X-CF-POWERED-BY: WP 1.3.14
[+] Interesting header: X-POWERED-BY: PHP/5.5.14

您正在使用Cloudflare :),只需登录您的控制面板并启用开发模式。

我将在下面留下旧答案,以防有人发现此问题并想知道如何进行一些故障排除:

如果您查看样式表的顶部,则会看到以下注释:

/*
Theme Name: Twenty Ten
Theme URI: http://wordpress.org/
Author: the WordPress team
[...]
Version: 1.4
[...]
*/

只需更改您的号码版本,Wordpress现在将使用新的版本号为样式表提供服务,强制您的浏览器重新下载它,否则当您正在开发中时,您可以以这种方式注册您的CSS(这是非常方便):

wp_enqueue_style( 'main-style', get_stylesheet_uri(), array(), time() );

这会强制在CSS上附加时间戳作为查询变量,因此您的浏览器认为这是一个新文件,每次刷新页面时都会下载新的CSS。

通常CTRL/CMD + SHIFT + R没有任何问题,如果您仍然看到旧的CSS,即使有这些更改,其中一个可能是导致问题的原因:

  • 您的网站正在使用Cloudflare而您忘记启用开发模式
  • 您的wordpress正在运行缓存插件
  • 您在错误的位置上传文件

干杯

答案 1 :(得分:-1)

css中的

在这样的行之后添加!important语法

.some_class_to_edit{
   text-decoration: none !important;
}

并尝试检查之后是否还有其他css,可以覆盖它