Find the application target-CSS selector and style target-css selector for the style.

Find the application target-CSS selector and style target-css selector for the style.

1. Common selector: element (Label/simple) selector, ID selector, class selector, and descendant selector (class or ID can be applied to their ancestor and then located using descendant selector)

2. pseudo class: Sometimes, we need to apply a style to an element based on other conditions outside the document structure, such as the status of a form element or link. You can use the pseudo class selector to do this:

/*makes all unvisited links blue*/a:link { color: blue; }/*makes all visited links green*/a:visited { color: green; }/*makes links red when hovered or actived. focus is added for keyboard support*/a:hover, a:focus, a:active { color: red; }/*makes table rows red when hovered over*/tr:hover { background-color: red; }/*makes input elements yellow when focus is applied*/input:focus { background-color: yellow; }

: Link and: visited become link pseudo classes and can only be applied to the anchor element. : Hover,: active, and: focus are called dynamic pseudo-classes. They can be applied to any element theoretically. Most browsers support this function. However, IE6 only pays attention to the active and hover selectors applied to the anchor link, and completely ignores the focus. IE7 supports hover on any element, but ignores: active and: focus. If you do not need to be compatible with Internet Explorer 6 or Internet Explorer 7, it would be nice.

Finally, it is worth noting that by linking pseudo-classes together, you can create more complex behaviors, such as achieving different mouse hover effects on accessed and unaccessed links.

    /*makes all visited links olive on hover*/    a:visited:hover { color: olive; }

General selector: the most powerful but least useful. when used in conjunction with other selectors, General selector can be used to apply styles to all descendants of an element, or skip first-level descendant.

3. Advanced selector:

CSS2.1 and CSS3 have many other useful selectors. However, although most modern browsers support these advanced selectors, IE6 or a later version does not. Fortunately, backward compatibility is taken into account when creating CSS. If the browser does not understand a selector, the entire rule is ignored. Therefore, style and Usability Improvements can be applied in modern browsers. At the same time, you don't have to worry about problems in older browsers. But remember, you should avoid using these advanced browsers on any element that is important to site functions or la S.

3.1 Sub-Selector and adjacent compatriot Selector

Both IE7 and later versions Support Sub-selectors. However, IE7 has a small bug. If there is an HTM comment between the parent element and the child element, a problem may occur.

In IE6 and earlier versions, you can use the universal selector to simulate the effect of the sub-selector. To this end, first apply the style you want the child element to have on all future generations, and then use a general selector to overwrite the style on the child element's future generations. See the following example:

<ul id="nav">    <li><a href="#">Home</a></li>    <li><a href="#">Service</a>        <ul>            <li><a href="#">Design</a></li>            <li><a href="#">Development</a></li>            <li><a href="#">Consultancy</a></li>        </ul>    </li>    <li><a href="#">Contact Us</a></li></ul> 

    #nav li {        background: url(folder.png) no-repeat left top;        padding-left: 20px;    }        #nav li * {        background-image: none;        padding-left: 0;    }

    #nav > li {        background: url(folder.png) no-repeat left top;        padding-left: 20px;    }

The CSS statement in the above 2 has the same effect.

The Adjacent sibling selector selects the element next to the other element, and the two have the same parent element. Like the sub-selector, if there is a comment between the target element, this will also occur in IE7.

3.2 attribute Selector

The attribute selector can find elements based on whether a property exists or its value, so it can achieve some very interesting and powerful effects.

For example, when you hover your mouse over an element with the title attribute, A tooltip is displayed in most browsers. This feature can be used to explain the meaning of certain content (such as acronyms and acronyms:

<p>The term<acronym title="self-contained underwater breathing apparatus">SCUBA</acronym> is an acronym rather than an abbreviation as it is pronounced as
 a word</p>

However, if you do not hover your mouse over this element, there is no indication that this additional information exists. To solve this problem, you can use the attribute selector to apply a different style to acronym elements with the title attribute. In the following example, add a vertex under them, you can also change the mouse pointer to a question mark when hovering over the element, indicating that the element is different and provides more context-related information.

    acronym[title] {        border-bottom: 1px dotted #999;    }        acronym[title]:hover,    acronym[title]:focus {        cursor: help;    }

In addition to applying styles to elements based on an attribute, you can apply styles Based on the attribute values. For example, a site that uses the rel attribute value nofollow cannot obtain a rating benefit (ranking benefit) from Google ). The following rule shows an image next to this link to indicate that this site is not recommended:

a[rel='nofollow'] {        background: url(nofollow.gif) no-repeat right center;        padding-right: 20px;    }

Modern browsers including IE7 support these selectors. However, because IE6 does not support attribute selectors, you can apply a style to IE6, apply another style to a more standard browser. For example, AndyClarke uses this technology to provide IE6 with a black/white version of the website and a color version for other browsers.

    #header {        background: url(branding-bw.png) repeat-y left top;    }        [id='header'] {        background: url(branding-color.png) repeat-y left top;    }

Some attributes can have multiple values, which are separated by spaces. The attribute selector allows you to find elements based on one of the attribute values. For example, the XFN microformat allows you to add keywords to the rel attribute of the anchor to define the relationship between you and the site. If a website belongs to my colleagues, I can add the co-worker keyword to the blog link to express this relationship. Then, a Special icon is displayed next to the colleague's name, indicating that I am working with this person.

.blogroll a[rel~="co-worker"] {    color: #fff;    background: blue;}

    <ul class="blogroll">        <li><a href="http:adactio.com/" rel="friend met colleague co-worker">Jeremy Keith</a></li>    </ul>

3.3 cascade and particularity

The order of importance of CSS cascade is as follows:

A, marked! Important user Style

B, marked! Important author Style

C. Author Style

D. User Style

E. Browser/user proxy application Style

Rules with more special selectors take precedence over those with General selectors. If the two rules have the same particularity, the rules defined later take precedence. (You can specify any rule! Important is used to increase its importance and give it priority over any rules or even the author! Important flag rules .)

3.3.1 Special