CSS Proximity Selector Property Guide: + and ~-CSS Tutorial-php.cn

CSS Proximity Selector Property Guide: + and ~

PHPz

Release： 2023-10-20 18:24:20

Original

1033 people have browsed it

CSS 邻近选择器属性指南：+ 和 ~

CSS Proximity Selector Property Guide: and ~

CSS Proximity Selector is a property used to select adjacent elements, including and ~.

The selector is used to select the first adjacent element immediately after the specified element. In the HTML structure, two sibling elements of the same parent element are called adjacent elements.

~The selector is used to select all adjacent elements after the specified element.

Use these proximity selector properties to flexibly control styling between page elements. Below we will demonstrate the usage of the and ~ selectors through specific code examples.

First, we will create a simple HTML document containing a series of adjacent <div> elements:

<!DOCTYPE html>
<html>
<head>
    <style>
        .box {
            width: 100px;
            height: 100px;
            margin-bottom: 10px;
            background-color: gray;
        }
        .box:hover {
            background-color: red;
        }
        .box + .box {
            background-color: blue;
        }
        .box ~ .box {
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</body>
</html>

Copy after login

In the above code, we first A CSS class named box is defined, which defines the width, height, bottom margin, and background color of the div element. When the mouse hovers over the box element, we also define the :hover pseudo-class, which is used to change the background color to red.

Next, we use the selector to define the background color of the first adjacent element as blue. This means that the background color of the second box element after the first box element will become blue.

Then, we use the ~ selector to define the background color of all adjacent elements after the first box element to be green. This means that the background color of the second, third and fourth box elements after the first box element will all change to green.

Save and run the above code, we will see that the box element in the page is rendered according to the style we defined. When the mouse is hovering over the box element, its background color will change to red. The background color of the second box element immediately following the first box element will change to blue, while the background color of the other box elements will change to green.

This is a basic usage example using the and ~ adjacent selector attributes. You can use it flexibly according to specific needs and page structure to achieve more diverse effects and layouts.

To summarize, the CSS proximity selector property provides a convenient way to select and style adjacent HTML elements. By using the selector, we can select the first adjacent element immediately after the specified element; by using the ~ selector, we can select all adjacent elements after the specified element. These selector properties provide finer control, allowing us to create more complex and rich page layout and styling effects.

I hope this article will help you understand and apply the CSS proximity selector property. If you have any questions, please leave a message to discuss!

The above is the detailed content of CSS Proximity Selector Property Guide: + and ~. For more information, please follow other related articles on the PHP Chinese website!