Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Post an Article
Welcome To Ask or Share your Answers For Others

Categories

CSS class selector for single page

0 votes
174 views
in Technique[技术] by (71.8m points)

CSS class selector for single page

I have this code and I want to remove this image www.testsite.com/images-5.jpg by using CSS (using display: none). I tried every selector I can think of but it won't work. I need the full selector from this page not for all pages. In chrome inspect element section i get only the {element_style} without any css reference.

This is my markup:

<body data-rsssl="1" class="post-template-default single single-post postid-18069 single-format-standard wpb-js-composer js-comp-ver-6.4.1 vc_responsive cookies-set cookies-accepted" data-header-style="header-style-one" data-nicescroll-cursorcolor="#ffbc13" data-nicescroll-cursorwidth="7px">
    
    <div class="overlay"></div>
                    <div class="radiantthemes-website-layout full-width">
            
        <header class="wraper_header style-one static-header">
    
            <div id="sticky-wrapper" class="sticky-wrapper" style="height: 51px;"><div class="wraper_header_main i-am-sticky" style="">
            <div class="container">
            
            <div class="header_main">
                            
                <div class="header_main_action">
                    
                            <ul class="social">
                                                                                                    <li class="facebook"><a href=#><i class="fa fa-facebook"></i></a></li>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            </ul>
                                                                                                                                                        <li class="header-hamburger">
                                                                                                <i class="fa fa-bars"></i>
                                                            </li>
                                            
                </div>
                <!-- header_main_action -->
                                    <!-- responsive-nav -->
                    <div class="responsive-nav hidden-lg hidden-md visible-sm visible-xs">
                        <i class="fa fa-bars"></i>
                    </div>
                    <!-- responsive-nav -->
                                
                <div class="clearfix"></div>
            </div>
            <!-- header_main -->
        </div>
    </div></div>
    <!-- wraper_header_main -->
</header>
<!-- wraper_header -->

    <!-- mobile-menu -->
    <div class="mobile-menu hidden">
        <!-- mobile-menu-main -->
        <div class="mobile-menu-main">
            <!-- mobile-menu-close -->
            <div class="mobile-menu-close">
                <i class="fa fa-times"></i>
            </div>
            <!-- mobile-menu-close -->
           
        </div>
        <!-- mobile-menu-main -->
    </div>
    <!-- mobile-menu -->


        <!-- hamburger-menu-holder -->
        <div class="hamburger-menu-holder hidden">
            <!-- hamburger-menu -->
            <div class="hamburger-menu">
                <!-- hamburger-menu-close -->
                <div class="hamburger-menu-close">
                    <div class="hamburger-menu-close-lines"><span></span><span></span></div>
                </div>
                <!-- hamburger-menu-close -->
                
            </div>
            <!-- hamburger-menu -->
        </div>
        <!-- hamburger-menu-holder -->

                                <!-- wraper_header_bannerinner -->
                            <div class="wraper_inner_banner" style="background-image:url('www.testsite.com/images-5.jpg')">
                                <!-- wraper_inner_banner_main -->
            <div class="wraper_inner_banner_main">
                <div class="container">
                    <!-- row -->
                    <div class="row">
                        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                            <!-- inner_banner_main -->
                            
                            <!-- inner_banner_main -->
                        </div>
                    </div>
                    <!-- row -->
                </div>
            </div>
            <!-- wraper_inner_banner_main -->
                                </div>
        <!-- wraper_header_bannerinner -->
<!-- wraper_header_bannerinner -->


        <!-- #page -->
        <div id="page" class="site">
            <!-- #content -->
            <div id="content" class="site-content">
<div id="primary" class="content-area">
    <main id="main" class="site-main">
        <!-- wraper_blog_main -->
        <section class="wraper_blog_main">
            <div class="container">
                <!-- row -->
                <div class="row">
                                                                        <div class="col-lg-9 col-md-9 col-sm-8 col-xs-12 pull-left">
                                                                    <!-- blog_single -->
                        <div class="blog_single">
                            <article id="post-18069" class="single-post post-18069 post type-post status-publish format-standard has-post-thumbnail hentry category-noutati category-anunturi-publice">
    <header class="entry-header">
        
        </div>          </div><!-- .entry-meta -->
            </header></body>

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

The image you want to remove is not held in an img element as far as I can see. The only reference to it in the code you give is as a background-image.

Therefore, display: none is not appropriate as you would be getting rid of the whole element which may not be what you want.

This particular page has a class of postid-18069 and that seems to be the only way of making sure you are going to get rid of the background image on this page only.

So the CSS needs to be something like:

.postid-18069 div.wraper_inner_banner {
  background-image: none !important;
}

Sadly the !important is probably needed here as otherwise the inline style will overwrite things.

I think that selection is enough, but if not put in more things that come between the .postid-18069 and the background-image div.

Note: this looks like some sort of CMS site (?wordpress?). If so be aware that the postid of that page might change so I am not happy that this is a caste-iron way of removing that image. It might be better to look at the single.php for that site (or whatever is generating that page) and remove having that image, but we'd need to know more about the circumstances before looking into that.


与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界，一个免费开放的程序员编程交流平台！开放，进步，分享！让技术改变生活，让极客改变未来！ Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

Just Browsing Browsing

1.4m articles

1.4m replys

5 comments

56.7k users

Most popular tags

Snow Theme by Q2A Market
Powered by Question2Answer
...