Example of usage of CSS adjacent sibling selector

高洛峰
Release: 2017-03-07 14:36:47
Original
2305 people have browsed it

To search for adjacent HTML elements with the same parent element, you can use CSS's adjacent sibling selector. Here we will take a look at a brief explanation of the usage of CSS's adjacent sibling selector:

Optional An element immediately following another element, and both have the same parent element. In the following code, item2 and item3 will have an effect, but item1 will not have
HTML code:

<ul>
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
</ul>
Copy after login

CSS code:

li+li { font-size: 50px; }
Copy after login

1. If you need to select an element immediately after another element, and both have the same parent element, you can use adjacent sibling selection. device.
2. The adjacent sibling selector uses the plus sign "+" as the connector.

Example

<html>

<head>
    <style type="text/css">
        #p1 + p {   
            margin-top: 50px;   
        }   
    </style>
</head>

<body>
    <p id=&#39;p1&#39;>This is paragraph 1.</p>
    <p id=&#39;p2&#39;>This is paragraph 2.</p>
    <p id=&#39;p3&#39;>This is paragraph 3.</p>
    <p id=&#39;p4&#39;>This is paragraph 4.</p>
</body>

</html>
Copy after login

Example of usage of CSS adjacent sibling selector

For more CSS adjacent sibling selector usage examples to explain related articles, please Follow PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template