drb88830
drb88830
2014-08-07 14:33
浏览 65
已采纳

自定义CSS类无法正常工作

I have added custom CSS to style.css file on my own custom skin in Wordpress 3.9.2. All classes seem to be working fine, apart from the new ones that I have added.

.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;
}

The above code is just ignored by all browsers. It does not appear on the page, nor on "Inspect Element" in the browser. Any ideas? This is the code I am using on the template, which I am calling on the custom page.

<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>

图片转代码服务由CSDN问答提供 功能建议

我在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; 
} 
 
.n.block .caption {\  n 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”中。 有任何想法吗? 这是我在模板上使用的代码,我在自定义页面上调用。

 &lt; div class =“frontpage_tile”&gt; 
&lt; a class  =“block”href =“&lt;?php echo get_permalink();?&gt;”  data-icon =“&amp;#xe00b;”&gt; 
&lt;?php the_post_thumbnail('home-thumb');  ?&gt; 
&lt; span class =“caption”&gt; 
&lt;?php the_title();  ?&gt; 
&lt; / span&gt; 
&lt; / a&gt; 
&lt; / div&gt; 
   
 
  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

2条回答 默认 最新

  • dongyi2425
    dongyi2425 2014-08-07 14:50
    已采纳

    I just scanned your website with wpscan for the sake of it, and here's your problem:

    [+] 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
    

    You're using Cloudflare :) , just login into your Control Panel and enable Development mode.

    I'll leave the old answer below, just in case someone finds this question and wants to know how to do a bit of troubleshooting:

    If you go at the top of your stylesheet you'll see the following comments:

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

    Just change your number version and Wordpress now will serve the stylesheet with the new version number, forcing your browser to re-download it, otherwise while you're under development you can register your CSS in that way (which is really handy):

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

    This enforces to append a timestamp on the CSS as query variable, so your browser believes that's a new file and the new fresh CSS gets downloaded every time you refresh the page.

    Generally the CTRL/CMD + SHIFT + R works without any problem, if you still see your old CSS even with those changes one of these is probably what is causing problems:

    • Your website is using Cloudflare and you forgot to enable dev mode
    • Your wordpress is running a caching plugin
    • You're uploading your file in the wrong place

    Cheers

    点赞 评论
  • doukuang1897
    doukuang1897 2014-08-07 14:55

    in the css addd the !important syntax after the lines like this

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

    And also try to check that there is no another css coming after that, which can override it

    点赞 评论

相关推荐