How does the css selector select the previous node? - Codes Helper - Programming Question Answer

How does the css selector select the previous node?

question 1: the combined class selector selects the node behind it, so how do you choose the previous one?


    <a href="https://segmentfault.com" class="p1">This is a paragraph.1</a>

    <a href="https://segmentfault.com" class="p2">This is a paragraph.2</a>

.p1:hover+.p2 {
                outline: 10px double purple;
            }
            
.p2:hover~.p1 {
                outline: 10px double purple;
            }

actually want to do is: mouse hover p1, give p2 a box; mouse hover p2, give p1 a box. However, the second half of the sentence is invalid.
tried combination selector . They all select nodes backward and cannot move forward.?

question 2: how do I select two or more elements with different parents?
is still the example above. The HTML I started with is written like this

.

<div>    
    
        <a href="https://segmentfault.com" class="p1">This is a paragraph.1</a>
    

    
        <a href="https://segmentfault.com" class="p2">This is a paragraph.2</a>
    
</div>

later found that the combination choices are all brothers descendants , like which belongs to two

above, which seems to have nothing to do with it. How can I achieve the purpose of question 1?

Apr.02,2021

p:nth-child (1) p:nth-child (2) p:first-child p:last-child

can be implemented with js code using jQuery's selector;
add a mouseover event to the a tag under P, and switch class
if an active class is added, it is assigned to a tag by default

.

.active{border:1px solid -sharpccc}
$('p a').mouseover(function(e){
    $('p a').toggleClass('active'); 
})

css does not provide a pre-selector, and the subsequent setting of the preceding element may cause a rearrangement

so use js

Previous: Wechat developer tool failed to perform "mobile debugging" operation.

Next: Find a rule to verify the legitimacy of url. Many loopholes have been found on the Internet.

When
encounters a problem with first-child
multiple layers are nested with each other, and then use the p:first-child selector, which cannot be selected correctly. Code: <body> 111 222 333 < body> use p:first-child {color:red;} at this time,...

Html css-selector pseudo-class

Mar.23,2021
What is the default for css if it does not specify line-height?
what is the default for css if you do not specify line-height? Is it equal to font-size? Sometimes it feels like setting it manually to be the same as font-size is not the same as letting him not set it by default. ...

Css-Selector css3 css-Framework css css3-Animation

Jun.01,2021
Loading scheme of rendering style on the first screen
problem scenario: the recently developed Vue project found that the network is too poor, causing the first screen of the page to go blank for nearly 3 seconds. You want to optimize the first screen rendering problem. Optimization scheme: 1 reduce co...

Front-end css-skills css-selector css3 css

Jun.01,2022

Menu