How Does a CSS Rule Override Another CSS Rule

How can I set one style to override another conflicting style in CSS?

First of all, if you don't want the browsers own history to interfere with your styles then use the :visited pseudo-class to match the style of the non-visited link, then just apply classes manually based on your DB records.

Regarding conflicting styles, it's all about the specificity of the selector, and if two with the same properties conflict (have the same specificity) the last one "wins".

Do this:

a:link, 
a:visited {
    font-weight: bold;
    color: black;
}

a.read {
    color: #444;
}

CSS override rules and specificity

To give the second rule higher specificity you can always use parts of the first rule. In this case I would add table.rule1 trfrom rule one and add it to rule two.

table.rule1 tr td {
    background-color: #ff0000;
}

table.rule1 tr td.rule2 {
    background-color: #ffff00;
}

After a while I find this gets natural, but I know some people disagree. For those people I would suggest looking into LESS or SASS.

How does a CSS rule override another CSS rule?

Because of CSS Specificity. A selector's weighting is evaluated based on the components that make it up, with id's given a weighting of 100, classes with a weighting of 10, and element selectors with weighting of 1.

So in your example:

table#id-form td

Has a weighting of 102 (table#id is 101 and td is 1), whereas this:

#particular-td

Has a weighting of 100. If you change your second to this:

#id-form #particular-td

You will get a weighting of 200 which will override the previous selector. Only as a last resort should you ever use !important, as this pretty much prevents you from overriding it further down the line.

Why does an earlier CSS rule override a later rule?

You should read about CSS specificity.

.four-across li is more specific than .no-search-results, so it have higher importance level.

Specificity is calculated by counting various components of your css
and expressing them in a form (a,b,c,d). This will be clearer with an
example, but first the components.

Element, Pseudo Element: d = 1 – (0,0,0,1)

Class, Pseudo class, Attribute: c = 1 – (0,0,1,0)

Id: b = 1 – (0,1,0,0)

Inline Style: a = 1 – (1,0,0,0)

by Understanding Style Precedence in CSS: Specificity, Inheritance, and the Cascade

Document order matters only when given specificity is exactly the same. In you example first selector is (0,0,1,1) and second is (0,0,1,0), so the first one overrides the second one, no matter how are they ordered within CSS document.

How do CSS rules override

According to the Cascading order CSS has a decision algorithm to find the applied declaration in case of conflicts between all the selectors that match the element:

Upper Items in the list have priority and precede lower ones

Declarations marked as '!important'
Declarations in author's style sheet (provided by website)

specificity = Concatenating a & b & c with the following order and weights:

a = 100 * ( number of ID attributes in the selector )

b = 10 * ( number of Class attributes (or Pseudo-classes) in the selector )

c = 1 * ( number of tag names (or Pseudo-elements) in the selector )
- Higher specificity (first)
  - Rules in main style sheet
    In case of equal specificity:
    - Downer presence in style sheet / document
    - Upper presence in style sheet / document
  - Rules in imported style sheets
    In case of equal specificity:
    - Downer presence in style sheet / document
    - Upper presence in style sheet / document
- Lower specificity (next)
  - Rules in main style sheet
    In case of equal specificity:
    - Downer presence in style sheet / document
    - Upper presence in style sheet / document
  - Rules in imported style sheets
    In case of equal specificity:
    - Downer presence in style sheet / document
    - Upper presence in style sheet / document
Declarations in user style sheet
[ Like part 2 ]
Declarations in User-Agent style sheet (provided by browser)

[ Like part 2 ]

Note 1

Using style attribute of an element will be equal to ID-based selector that is specified at the end of the style sheet.

So:

<div id="myDiv" style="color:red">My content</div>

is equal to:

<div id="myDiv">My content</div>

#myDiv{    /* last line of stylesheet */
    color:red
}

Note 2

Some HTML attributes are stylistic like

ALIGN
WIDTH / HEIGHT
HIDDEN

these attributes are translated to the corresponding CSS rules with specificity equal to 1 and assumed to be put at the start of the author's style sheet

So:

<div id="myDiv" align="center">My content</div>

is equal to:

<div>My content</div>

div{    /* first line of stylesheet */
    text-align:center
}

So to answer you question

That is because of downer presence of

.parent div { deceleration }

and if you put it upper like this

.parent div { deceleration }
div .child { deceleration }

then

div .child { deceleration }

would apply instead.

Is there a way to override a CSS rule to essentially negate it?

The CSS keyword inherit is usable for any property, and its function is to set the property to the value of the parent element.

How to create a CSS style which override another CSS style

You can do try this way

In the two class above the width is not defined

.FirstStyle, .SecondStyle
{
    margin: 0px 0px 0px 8px;
    position: relative;
    display: inline-block;

    height: 29px;
    width: 5px;

    float: left;
}

Here you define the width only for the FirstStyle Class .. (and anyway do the fact this class is below the others could override an eventually width specified above )

.FirtsStyle
{
    width: 5px;
}

Is possible overwrite a css class with another css class

Update: According to ZK documentation you could use sclass attribute to add classes to any element.

So, using the code I see in your screenshot...

 <vbox>
   <combobox>
   <combobox sclass="whatever">
   <combobox>
 </vbox>

...you'll be able to use the following selector to specify rules for the <combobox>es you place whatever class on:

.v-combobox.whatever .z-combobox-input {
  border:1px solid #000;
  border-radius: 3px 0 0 3px;
  margin:0; padding:4px 5px;
  line-height: 14px;
  background: #fff;
}

For more information use this guide.

According to this guide, you should use sclass when you want to add to the default styles applied to an element and zclass attribute when you want to reset the default styles (that means only what you define in your custom class will apply, and not the default styling for that element).

Initial answer:

This is the most important principle in CSS and it's called specificity.

Learning CSS means learning how you can use selectors and their specificity in order to apply rules selectively to some elements and not to others. It's what CSS is typically used for and it's totally possible.

Referencing an element by its id will be stronger (and hence override) any rules specified for any of its classes.

To understand specificity, I recommend this article as a starting point. You should also search for specificity calculator in your search engine of choice.

And in order to be able to use everything you learn about specificity you'll need to understand CSS Selectors and CSS Combinators.

For your specific [ :) ] case, you probably want to use the element's id as selector to apply rules to that element only. Given the id from your first example, this will work:

#vXgV3-real {
  /* the rules here will override the rules for .z-combobox-input
   * for the element with id="vXgV3-real" and only for that element 
   */
  border:1px solid #000;
  border-radius: 3px 0 0 3px;
  margin:0; padding:4px 5px;
  line-height: 14px;
  background: #fff;
}