css-selectors

问题 <div class="_2S1VP copyable-text selectable-text" data-tab="1" dir="ltr" spellcheck="true" contenteditable="true"></div> <div class="_2S1VP copyable-text selectable-text" data-tab="3" dir="ltr" contenteditable="true"></div> I'm a beginner and I've had a hard time distinguishing / specifying the first class over the second one typing = bot.find_element_by_xpath('//div[@class = "_1Plpp"]') this doesn't seem to work and just using the class name always brings up the unwanted second one with the

问题 Hi I was trying to type the username field using Selenium and Python for the website https://mail.protonmail.com/create/new?language=en. From the developer tool, I am able to inspect the item using CSSSelector/Xpath or other way. But when I am running the pthon script its not working. Screenshot attached: My code is like the following: BASE_URL = 'https://mail.protonmail.com/create/new?language=en' driver = webdriver.Chrome(executable_path='./drivers/chromedriver') driver.get(BASE_URL) river

问题 I have 3 options in a home page with the same class name and different values see code bellow: First Option menu <select class="form-control mandatory" tabindex="4" required="" autocomplete="off" name="SearchHome.documentType"> <option value=""></option> <option value="VISA">Visa</option> <option value="EDF">EDF</option> </select> Second Option menu <select class="form-control mandatory" tabindex="5" required="" autocomplete="off" name="SearchHome.documentSubType"> <option value=""></option>

问题 I'm styling the last child of a navigation menu which I seem to be able to do fine with the following code: .aston-menu-light ul > li:last-child { border:2px solid blue; border-radius: 50px; padding:0 20px 0 20px; } .aston-menu-light ul > li > ul > li:last-child { border:none !important; padding:0 !important; } .aston-menu-light ul > li:last-child:hover { background-color:#ffff; -webkit-transition: all .5s; -o-transition: all .5s; transition: all .5s; } The trouble comes when I try and target

问题 I am styling a table that has table cells with (non-interactive) checkmarks in it. The checkmark icons are added via CSS. As there is no accessible content in it, I added an aria-label to it. Now I wonder if it is a good idea to use this attribute as a CSS selector to add those checkmark icons like this: td[aria-label="yes"] { &:after { content: '\f00c'; font-family: $font-family-icons; } } I learned that using ARIA attributes as selectors is generally a good practice, at least for state

问题 If I have 3 divs at the same level ( not one in another ) . How can I change the color of the other div when hover one without using IDs and classes. I would like somthing like : <div id="1" ></div> <div></div> <div></div> And CSS : #1 :hover < body > div { //Here I change the things } 回答1: Use the general sibling combinator #yourId:hover ~ div { color:red; } Also note that Id's must begin with a letter. W3 ID Attribute Example 回答2: Put a wrapper around them, then put the hover on the wrapper

问题 If I have 3 divs at the same level ( not one in another ) . How can I change the color of the other div when hover one without using IDs and classes. I would like somthing like : <div id="1" ></div> <div></div> <div></div> And CSS : #1 :hover < body > div { //Here I change the things } 回答1: Use the general sibling combinator #yourId:hover ~ div { color:red; } Also note that Id's must begin with a letter. W3 ID Attribute Example 回答2: Put a wrapper around them, then put the hover on the wrapper

问题 Markup: <ul> <li role="presentation" class="active"> <a href="#1" aria-controls="1" role="tab">How to Install for iPad</a> </li> <li role="presentation"> <a href="#2" aria-controls="2" role="tab">How to Install for Mac</a> </li> <li role="presentation"> <a href="#3" aria-controls="3" role="tab">How to Install for PC</a> </li> </ul> When I use document.querySelectorAll('[role="presentation"]'); the result is array [li.active,li,li] How can I remove .active class and attach it to any other of

问题 Markup: <ul> <li role="presentation" class="active"> <a href="#1" aria-controls="1" role="tab">How to Install for iPad</a> </li> <li role="presentation"> <a href="#2" aria-controls="2" role="tab">How to Install for Mac</a> </li> <li role="presentation"> <a href="#3" aria-controls="3" role="tab">How to Install for PC</a> </li> </ul> When I use document.querySelectorAll('[role="presentation"]'); the result is array [li.active,li,li] How can I remove .active class and attach it to any other of

问题 Markup: <ul> <li role="presentation" class="active"> <a href="#1" aria-controls="1" role="tab">How to Install for iPad</a> </li> <li role="presentation"> <a href="#2" aria-controls="2" role="tab">How to Install for Mac</a> </li> <li role="presentation"> <a href="#3" aria-controls="3" role="tab">How to Install for PC</a> </li> </ul> When I use document.querySelectorAll('[role="presentation"]'); the result is array [li.active,li,li] How can I remove .active class and attach it to any other of