Shulou(Shulou.com)06/02 Report--

In this issue, the editor will bring you about the use of the five most commonly used CSS selectors. The article is rich in content and analyzed and described from a professional point of view. I hope you can get something after reading this article.

To describe the use of the most commonly used CSS selector, accurate and concise use of CSS selector will achieve very good results, that is, we do not have to define a class or ID for each element, through the right organization, we can achieve the same effect in the simplest way.

Five types of CSS selectors most commonly used in design

Some novice friends have little knowledge of CSS selector, do not know under what circumstances what kind of CSS selector, this is a relatively headache, for novice friends, CSS selector to make some simple instructions, I hope it can be helpful to everyone's study and work.

Accurate and concise use of CSS selector will achieve very good results. We don't have to define a class or ID for each element throughout, and with the right organization, we can achieve the same effect in the simplest way. In practice, the most commonly used selectors are as follows:

1. Tag selector:

As the name suggests, the tag selector directly uses the HTML tag as a CSS selector, which can be p, H2, dl, strong and other HTML tags. Such as:

P {font:12px;} em {color:blue;} dl {float:left;margin-top:10px;}

2. Id selector:

We usually define an id for the page element. For example, define a layer < divid= "menubar" > < / div > and then define it in the stylesheet:

# menubar {margin:0auto; background:#ccc; color:#c00;}

Where "menubar" is your own defined id name. Pay attention to the "#" sign in front of it.

Id selectors also support descendant selectors, for example: # menubarp {text-align:center;line-height:20px;;} this method is mainly used to define layers and more complex elements with multiple "descendants".

3. Class selector:

Start with a dot to indicate the category selector definition in CSS, for example:

.da1 {color:#f60; font-size:14px;}

In the page, use the class= "category name" method call: < spanclass= "da1" > 14px size font < / span > this method is relatively simple and flexible, and can be created and deleted at any time according to the needs of the page. But multi-class syndrome needs to be avoided.

4. Group selector:

When several elements have the same style attributes, you can call a declaration together, separated by commas, which is the group selector in the CSS selector. Such as:

P,td,li {line-height:20px; color:#c00;} # mainp,#siderspan {color:#000; line-height:26px;} .www _ 52css_com,#mainpspan {color:#f60;} .text1h2, # siderh4,.art_titleh3 {font-weight:100;}

The use of group selector will greatly reduce the CSS code, merge multiple elements with the same attributes, merge groups to select, and define the same CSS attributes, which greatly improves the coding efficiency and CSS file volume.

5. Descendant selector:

Descendant selectors in CSS selectors are also called derived selectors. You can use the descendant selector to define styles for child elements in an element, such as this:

Listrong {font-style:italic; font-weight:800; color:#f00;} # mainp {color:#000; line-height:26px;} # sider.conspan {color:#000; line-height:26px;} .www _ 52css_compspan {color:#f60;} # siderulli.subnav1 {margin-top:5px;}

The * * paragraph defines an italic bold and red style for the child element strong under li. Others, and so on.

The use of the descendant selector is very beneficial. If the HTML element included in the parent element has the property of *, then you do not need to specify class or id to the internal element, you can apply this selector directly, for example, the following h4 and ul do not need to specify class or id.

< divid= "sider" > < h4 > < ul > < li >. < / li > < / ul > < / div >

Here, CSS can write exactly the same:

# siderh4 {...} # siderul {...} # siderulli {...}

The combination of the above four CSS selectors basically meets the needs of CSS layout, mainly lies in the flexible use, especially the use of future generations selector can greatly simplify HTML documents, so that HTML structure is clear, the smallest code to achieve the same effect.

These are the five most commonly used uses of CSS selectors shared by the editor. If you happen to have similar doubts, please refer to the above analysis to understand. If you want to know more about it, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.