what is the most specific css reference for this - html

Question

I am trying to override the css from another file and I would like to know how specific of a reference I would need to override it.
Here is the page I am working with if you'd like to take a look:
http://www.bolistylus.com/shop/
This is what I'm trying to override:
.products li {
float: left;
margin: 0 10px 20px 0;
padding: 0;
position: relative;
width: 150px;
}
Here is the HTML I'm working with:
<div id="main">
<section id="primary"><div id="content" role="main"><div id="breadcrumb"><a class="home" href="http://www.bolistylus.com">Home</a> › Shop</div>
<h1 class="page-title">All Products</h1>
<ul class="products">
<li class="product first">
<a href="http://www.bolistylus.com/shop/boli-2/">
<img width="150" height="150" src="http://www.bolistylus.com/wp-content/uploads/pinkproduct-150x150.png" class="attachment-shop_small wp-post-image" alt="pinkproduct" title="pinkproduct" />
<strong>Boli Pink</strong>
<span class="price">$24.00</span>
</a>
Add to cart
</li> <li class="product ">
</li></ul><div class="clear"></div>
</div></section>
</div><!-- #main -->

Answer 1

.products li has a specificity of (0, 0, 1, 1)
a minimal higher specificity can be created with
ul.products li which has a specificity of (0, 0, 1, 2)
See this jsfiddle: http://jsfiddle.net/DAL9A/

Answer 2

.products li and you can use !important if it doesnt take. Try to load that after what your trying to override.
UPDATE*
Try just using ".product"
Actually just ready your comments. What are you trying to target? The image? If So you should get the width and height out of inline and apply it in CSS