pseudo-class

问题 I want to select spans that are not the descendants of a specific class, let's call it "no". Here's my CSS: div:not(.no) span{background-color:#00f;} Here's the HTML <div> <span>yes 1</span> </div> <div class="no"> <span>no 1</span> </div> <div class="no"> <div> <span>no 2</span> </div> </div> Two questions: Why does my CSS apply to both yes 1 and no 2? Why does the whole thing break if I switch to a universal selector? *:not(.no) span{background-color:#00f;} Here's the code in JSFiddle: http

问题 Update: Thanks to explanations by Crowes and Boltclock below, I now have a clearer understanding that CSS pseudo-classes are explicitly stative (ie. describing an element's state in the present moment). While there is a chronological dimension to javascript events, CSS pseudo-classes are, by contrast, either true in the present moment or false . Consequently, unlike the javascript events they superficially resemble, CSS pseudo-classes do not (and cannot) refer back to the user's previous

问题 I wanted to make link text change color when the selected page is currently active. So i used :active pseudo class, but it keeps resetting to the general link color. I followed the cascading rules by putting the :active last, but it still doesnt work. I also tried the adding "!important" to the :active color. Still the same result. I have made this simple test, to make it easier to pinpoint and fiddle with. <div id="navigacija"> <a id="nav" href="index.html">home</a> <a id="nav" href="random

问题 I have this HTML code : <div class="field"> <input type="hidden" value="" name="a" id="a"> <input type="hidden" value="xxxx" name="b" id="b"> <input type="file" value="" name="file1"> <input type="file" value="" name="file2"> <input type="file" value="" name="file3"> <input type="file" value="" name="file4"> <input type="file" value="" name="file5"> <input type="file" value="" name="file6"> <input type="file" value="" name="file7"> <input type="file" value="" name="file8"> </div> In this HTML

问题 I just noticed an inconsistency between the way browsers handle the css :active state of an element when it is right-clicked (contextmenu click) Firefox: :active is not triggered Chrome: :active is triggered momentarily, until mouseup occurs Safari 5 & IE 10: :active is triggered and element remains :active until the contextmenu is closed Here's a quick jsfiddle to replicate this http://jsfiddle.net/annam/tqBqV/ div { background: red; } div:active { background: green; } Anyone knows which is

问题 When using namespaces in CSS, you can select, for example, any div element in "any or no namespace" by using a namespaced type selector: *|div Is it valid CSS to namespace a pseudo-class? For example: *|:first-child It seems to work in WebKit based browsers, and it seems to not work in IE9 (below IE9 does not support namespaces at all) and Firefox. I don't care what browsers it does/doesn't work in, I just need to know whether it is a valid construct. Here's a fiddle. From what I can make out

问题 I am making a page with a CSS lightbox-type effect using the :target pseudo-class. When you click on an image, a box pops up with info in it, and goes away again when you click anywhere. It's working perfectly in Chrome and IE, but in firefox there is a weird bug where the text in my lightbox div disappears when you move the mouse away from the box . It's acting like a hover effect, where you can only see the text when you are hovering over it. I hope that explanation made sense, please let

问题 i am trying to build a simple tabbed interface and i am stalled. All works fine except, when cant seem to find a way to set default tab when loaded. I would like to see when page loads, i want the tab-1 to be visible. Can it be done using pure css, if not for jquery Here is the code. <div class='tabs'> <ul class='horizontal'> <li><a href="#tab-1">General</a></li> <li><a href="#tab-2">Showcase Box</a></li> </ul> <div id='tab-1' class="tab"> Tab1 Content here </div> <div id='tab-1' class="tab">

问题 The expected behaviour (Firefox) The unexpected (Chrome) The JSFiddle demo http://jsfiddle.net/bZaKK/ (try it in Firefox and Chrome to see the difference). The HTML <ul> <li><a href="">List item 1</a></li> <li><a href="">List item 2</a></li> ... <li><a href="">List item 9</a></li> </ul> The CSS ul { position: relative; list-style: none; margin: 0; padding: 0; -moz-column-count: 4; -webkit-column-count: 4; column-count: 4; } li:last-child:before { position: absolute; content: " "; display:

问题 i have run into problem regarding IE7/8 ignoring the :active pseudo class on elements with display:block; HTML: <a>My Link</a> CSS That Works: a:active{color:yellow} CSS That Fails: a{display:block} a:active{color:yellow} Does anyone know of a solution to this, or will I have to resort to JS? 回答1: Ironically, @Kevin already "fixed" your problem without even realising. Change the HTML from this: <a>My Link</a> to this: <a href="#">My Link</a> and it works in IE7, see: http://jsbin.com/exuga3