Find app target-css selector for style

1, Common selector: Element (label/simple) selector, ID selector, class selector, descendant selector (you can apply a class or ID to their ancestors, and then use the descendant selector to locate)

2, Pseudo-class: Sometimes we need to apply a style to an element based on conditions other than the document structure, such as the state of a FORM element or link, which can be done using a pseudo-class selector:

/*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 was 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 are linked pseudo-classes and can only be applied to anchor elements. : hover,: Active and: Focus is called dynamic Pseudo-class and can theoretically be applied to any element, most browsers support this feature. But IE6 only applies to the anchor: active and: hover selectors, completely ignored: focus. IE7 is supported on any element: hover, but ignored: active and: Focus. If you do not need to be compatible with IE6, IE7, it is very good.

Finally, it is worth pointing out that by linking pseudo-classes together, you can create more complex behaviors, such as implementing different rollover effects on both visited and non-visited links.

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

Universal selector: The most powerful but minimal use, when used in conjunction with other selectors, the universal selector can be used to apply styles to all descendants of an element, or to skip one-level descendants.

3, Advanced selector:

CSS2.1 and CSS3 have many other useful selectors. However, although most modern browsers support these advanced selectors, IE6 or lower versions are not supported. Fortunately, backwards compatibility is considered when creating CSS. If the browser does not understand a selector, it ignores the entire rule. As a result, you can apply styles and usability improvements in modern browsers. And don't worry about it causing problems in older browsers. Remember, however, that you should avoid using these advanced browsers on any element that is important to your site's functionality or layout.

3.1 Sub-selectors and neighboring sibling selectors

Sub-selectors are supported for IE7 and later versions. However, there is a small bug in IE7, which can be problematic if there is an HTM comment between the parent element and the child element.

In IE6 and earlier versions, you can use a universal selector to simulate the effect of a sub-selector. To do this, apply the style that you want the child element to have on all descendants, and then use the universal selector to override the style on the descendants of the child element. Take a look at the following example:

<ulID= "NAV">    <Li><ahref="#">Home</a></Li>    <Li><ahref="#">Service</a>        <ul>            <Li><ahref="#">Design</a></Li>            <Li><ahref="#">Development</a></Li>            <Li><ahref="#">Consultancy</a></Li>        </ul>    </Li>    <Li><ahref="#">Contact Us</a></Li></ul> 

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

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

The CSS in the above 2, the effect is the same.

The adjacent sibling selector (adjacent sibling selector) selects the element immediately following the other element, and both have the same parent element. As with child selectors, this can also be problematic in IE7 if there is a comment between the target elements.

3.2 Property Selector

The property selector can achieve some very interesting and powerful results by looking for an element based on whether a property exists or the value of the property.

For example, most browsers display a ToolTip when the mouse hovers over an element with the title property. You can use this feature to explain the meaning of certain content, such as acronyms and abbreviations:

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

However, if you do not hover over this element, there is no indication that this additional information exists. To solve this problem, you can use the property selector to apply a different style to the acronym element with the title attribute-in the following example, add a dot below them, and change the mouse pointer to a question mark when hovering over the element, indicating that the element is different, To provide more context-sensitive information.

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

In addition to applying a style to an element based on whether a property exists, you can apply a style based on the attribute value. For example, a site that uses the Rel attribute value Nofollow link cannot receive a rating benefit from Google (ranking benefit). The following rules display an image next to this link, which indicates that this site is not recommended:

{        background: url (nofollow.gif) No-repeat right center;         padding-right: 20px;    }

These selectors are supported by modern browsers including IE7, however, because IE6 does not support the property selector, it can be used to apply a style to the IE6 to apply a different style to a more standard-compliant browser. For example, Andyclarke uses this technology to provide IE6 with a black-and-white version of the website and a color version for other browsers.

    {        background: url (branding-bw.png) repeat-y left top;    } {background: URL (branding-color.png) repeat-y left top;        }             

Some properties can have more than one value, separated by a space. The property selector allows you to find elements based on one of the property values. For example, the XFN micro format allows you to define your relationship with the site by adding keywords to the rel attribute of the anchor link. Assuming a site belongs to my colleague, I can add the co-worker keyword to the link on the blog to represent the relationship. You can then display a special icon next to the colleague's name to show that I work with this person.

{    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 Stacking and particularity

The importance order of CSS cascading (cascade) is as follows:

A, user style marked with!important

B, the author style marked with!important

C, author style

D, user style

E, the style of the browser/user agent app

Rules with more specific selectors take precedence over rules with general selectors, and if the two rules are the same, then the rules defined later take precedence. (You can increase its importance by designating any rule as!important, giving it precedence over any rule, or even precedence over the!IMPORTANT flag that the author adds.) ）

3.3.1 particularity

Find app target-css selector for style