Ebay API Question posted in
The official documentation of all the APIs offered by Ebay can be found here.

Css Overwrite issue – Change the scope of external styles – Ebay API

my website scraped information from ebay products and for the description of the product I get all html. Product description has inline styles and when I open the description of the product in my website, products css ovewrite my css
Normal:

enter image description here

And after I opened the product description

enter image description here

Here is anchor style from developer tool

enter image description here

So I need any idea how to separete ebay product css with my css.
One of the methods that I think is to add !important to all my styles, but I don’t think this solution is elegant and I want something else. So If you have any suggestion how to solve my issue I will appreciate them.

Tags:

3

Answers


  1. 0

    Perhaps you need to update your css to be more specific with it’s selector, for example if you have a HTML structure which diferentiate the container of the Product Description from eBay like this

    .leftbar {
  float: left;
  width: 20%;
  background: #ccc;
}

a { /*think of this as default link style*/
  color: black;
}

#main div:not(.product-desc) a {  /*more specific selector*/
  display: block;
  color: red;
}

a { /*this one is from eBay*/
  color: green;
}
    <div id='main'>
  <div class='leftbar'>
    <a>Hello</a>
    <a>World</a>
  </div>
  <div class='product-desc'>
    <a>Description</a>
    <a>Product</a>
  </div>
</div>

    You can use a :not selector to define your main style so it won’t be disrupted by the eBay style

    The more specific your selector is, then your style will be used. But if your selector is the same, then the last rule from top bottom will be applied. So in the above example, the link inside product-desc color is set to green not black

    Login or Signup to reply.
  2. 0

    create a custom inline CSS property that you desire in the element to overwrite the default CSS. here is how you create inline CSS for overwriting anchor properties.

    Here how you do:
    create the icons/text of anchor inside a element and give inline CSS

    <a href="http://www.example.com" target="_blank">
    <span style="color: #ffffff !important;" >icons</span>
</a>

    A quick test in Chrome shows that the

    a:visited * { ... !important}

    does override the inline style, but adding the !important back to the span works fine.

    <span style="color: #ffffff !important;" >

    For understanding it better. Learn here Overwriting Hover in anchor
    Overwriting visited in anchor

    Blockquote

    Login or Signup to reply.
  3. 0

    If you want to remove all exist style and reset it to default you can use:

      all: initial;
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search