Home > Developer > Web Develop
The selector (selector) is a very important concept in CSS, and the markup styles in all HTML languages are controlled by different CSS selectors. Users only need to choose different HTML tags to choose, and give a variety of style declarations, you can achieve a variety of effects.
CSS selectors include: Tag Selector, category selector, ID selector, and composite selector.
1. Tag Selector
An HTML page consists of a number of different tags, which are used by CSS tag selectors to declare which tags are in which CSS style. Therefore, the name of each HTML tag can be used as the name of the corresponding tag selector.
Example:
<style type= "Text/css" > { color: red; font-size: 25px; } </style>2. Category Selector
The name of the category selector can be customized by the user, and the properties and values, like tag selectors, must conform to the CSS specification.
Example:
<style type= "Text/css" > { color: green; font-size: 20px; } </style>In HTML markup, you can also apply multiple class class selectors to a tag at the same time to apply multiple categories of style styles to a single tag. It is often useful to actually make a website, which can reduce the length of the code appropriately.
<!DOCTYPE HTML><HTML><Head> <title></title> <styletype= "Text/css">. Color{Color:Red; }. Size{font-size:25px; } </style></Head><Body> <Divclass= "Color Size">tags in HTML apply multiple category styles</Div></Body></HTML>
3. ID Selector
The ID selector is used in the same way as the class selector, except that the ID selector can only be used once in an HTML page. The ID selector in the CSS can be called directly in the HTML markup simply by taking advantage of the id attribute.
Now in many browsers, the ID selector can be used for multiple tags, i.e. the id of each tag definition is not just CSS can be called, JavaScript and other scripting languages can also be called. Because of this feature, do not say that the ID selector is used for multiple tags, otherwise there will be some errors. When writing CSS code, it is only possible to assign an ID to one HTML tag at most.
4. Composite Selector
A composite selector is a selector of two or more basic selectors (tag selectors, category selectors, and ID selectors) that are connected in different ways.
4.1 Intersection Selector
The intersection composite selector consists of two selectors that are directly connected, and the result is the intersection of their respective element ranges. The first one must be a tag selector, and the second must be a category selector or an ID selector. Two selectors cannot have spaces directly and must be written consecutively.
The selectors that make up this way will select the elements that satisfy both definitions.
Example:
<!DOCTYPE HTML><HTML><Head> <title></title> <styletype= "Text/css">P{Color:Blue; }. Special{Color:Green; }p.special{Color:Red; } </style></Head><Body> <P>Normal paragraph text</P> <H3>Normal title text</H3> <Pclass= "Special">Paragraph text with the. Special category specified</P> <H3class= "Special">The caption text for the. Special category is specified</H3> <Divclass= "Special">Specifies the div for the. Special category.</Div></Body></HTML>
4.2 Set Selector
The result of the set selector is that the range selected by each base selector is selected at the same time. Any form of selector (including tag selectors, category selectors, ID selectors) can be used as part of the set selector.
The set selector is a comma-connected selection, when declaring various CSS selectors, if the style of some selectors is exactly the same, or part of the same, then you can use the set selector to declare the same style CSS selectors.
<style type= "Text/css" > { font-size: 12px; } </style>4.3 descendant selector
In the CSS selector, you can declare HTML markup for a particular location in a nested way, and you can use the descendant selector to control it. The descendant selector is written in front of the outer tag, with the inner tag written in the back and separated by a space. When a tag is nested, the inner tag becomes the descendant of the outer tag.
Not only tag selectors can be nested together into descendant selectors, both the category selector and the ID selector can be nested together.
Example:
<!DOCTYPE HTML><HTML><Head> <title></title> <styletype= "Text/css">P span{font-size:12px;Color:Green; } </style></Head><Body> <P><span>Text</span></P></Body></HTML>
The effect of the descendant selector is not limited to the immediate offspring of the element, but also affects its descendants at all levels.
CSS also specifies a seed selector compound selector, which is only for the direct descendants have an impact on the selector, "grandson" and the descendants of multiple layers do not have a role.
The syntax difference between a child selector and a descendant selector is to use the ">" Connection.
<style type= "Text/css" > { font-size: 12px; color: green; } </style>CSS series: CSS Selector
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
