CSS context selector to add a style based on location for HTML elements

Source: Internet
Author: User

There are three types of CSS selectors. ① contextual selectors; ②id and class selectors; ③ property selectors, and the biggest benefit of contextual selectors is that it's convenient to add styles based on location for HTML elements
For example, we want the P tags in the article and aside tags to set different styles

The contextual selector is also called the descendant combination selector, which is separated by a space label name in the form:
Label 1 label 2 {declaration}
The tag here is the HTML element, and tag 2 is the target we want to select, and label 2 can only be selected if label 1 is the ancestor of tag 2. As long as it's an ancestor, it's not necessarily a parent element.

Let's take the following HTML code as an example to demonstrate:

Copy Code code as follows:
<! DOCTYPE html> 2: <title>html 5 template</title>
<meta charset= "Utf-8" >
<link href= "Style.css" rel= "stylesheet" type= "Text/css" >
<body>
<article>
<p> This is the P element that is located in the article element </p>
</article>
<aside>
<p> This is the P element in aside </p>
</aside>
</body>

In the absence of a CSS style, view the running effect

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.