this week I leand about it ............

ancestor tag:

The ancestors of an element are its parent, its parent's parent, and so on up to the root element of the tree. For any Element instance E, this method returns an iterator that visits E's ancestors in reverse document order:

>>> xml = '''<class sci='Aves' eng='Birds'>
...   <order sci='Strigiformes' eng='Owls'>
...     <family sci='Tytonidae' eng='Barn-Owls'>
...       <genus sci='Tyto'>
...         <species sci='Tyto alba' eng='Barn Owl'/>
...       </genus>
...     </family>
...   </order>
... </class>'''
>>> root = etree.fromstring ( xml )
>>> barney = root.xpath ( '//species' ) [0]
>>> print "%s: %s" % (barney.get('sci'), barney.get('eng'))
Tyto alba: Barn Owl
>>> for  ancestor in barney.iterancestors():
...     print ancestor.tag,
genus family order class
>>> for  fam in barney.iterancestors('family'):
...    print "%s: %s" % (fam.get('sci'), fam.get('eng'))
Tytonidae: Barn-Owls

descendant tag:

A CSS descendant selector applies to the elements that are inside another element. For example an unordered list has a <ul> tag with <li> tags as descendants. In the following HTML:

<ul>
<li><a href="">this is a link</a></li>
</ul>

parent tag:
CSS2 allows you to select based on an element's parents* (' ', '>') and to a limited extent siblings of its parents ('+'). CSS3 allows you slightly more leeway in selecting siblings of an element's parents ('~'). 

<section id="1">
<info>
blah
</info>
</section> <section id="2">
no info tag here
</section> 

child tag:

The EM element is a child of the H1 element, and any styles on the H1 that are inherited will be passed on to the EM text as well. For example:

h1 { font-size: 120%; }

Since the font-size property is inherited, the "Big" text will be 120% in size as well as the rest of the H1.

sibling tag: 

Cascading Style Sheets defines siblings as elements that are next to one another. They are also called adjacent elements. This means that you can define a style rule on an element based on what element immediately precedes it in the XHTML.
How to define a sibling rule:
  h1 + h2 { color : #00f; }
This rule says that any h2 that immediately follows an h1 should be colored blue.

CSS: Use Descendant Selectors:

Summary: Descendant selectors are an elegant way to apply styles to specific areas of your page while reducing the need to embed classes within elements.

Descendant selectors are an elegant way to apply styles to specific areas of your page while reducing the need to embed classes within elements. First introduced in CSS1 in 1996, descendant selectors (then called contextual selectors) match elements that are descendants of other elements in the document tree. Composed of two or more selectors separated by whitespace, descendant selectors apply styles to elements that are contained within other elements. For example:

div.nav ul {font-size:1.1em;}

The above selector is a pattern that matches all ul elements contained within divs with a class of .nav. So this:

.nav {font-size:1.1em;}
...
<div>
<ul>
<li class="nav">One</li>
<li class="nav">Two</li>
...
</ul>
</div>

Becomes this:

div.nav ul {font-size:1.1em;}
...
<div class="nav">
<ul>
<li>One</li>
<li>Two</li>
...
</ul>
</div>

Even better, adopt a uniform look for all unordered lists within divs and eliminate the class, like this:

div ul {font-size:1.1em;}
...
<div>
<ul>
<li>One</li>
<li>Two</li>
...
</ul>
</div>

Essentially, descendant selectors utilize the existing structure of your XHTML document to selectively apply styles. Rather than hard coding classes within specific elements you use the relationships among elements to apply styles. Your code becomes more modular, using containers that style their contents selectively. This separation of presentation from structure keeps your code clean and your style sheets lean.