pseudo-class

问题 My team was debating what the best practice would be for wanting to insert an icon after links to the various media file types we have on our site. Examples would be linking to a PDF and wanting to insert an icon image to let users know it's a PDF. The same could be used for video or audio files. I suggested using CSS, putting a class on the and using :after to create an element. I recall IE6 and IE7 won't support the pseudo CSS class, but aside from that, would there be a better practice? If

问题 I have read in this sitepoint page and quirksmode page about the new :empty pseudoclass. Sitepoint said that even when there is dynamic content appended, the empty style will still take effect. It is noted that firefox was the one who behaves this way. Quirksmode said that it discards the empty state when it it filled in with some elements or text. the demo on this site works in my browser (chrome 19). So i assumed only firefox would be buggy. However I have this piece of code in my plugin,

问题 I want to make a menu where each item is separated with a ·. To achieve this I use menu li:before { content: "· "; } This is swell, but it generates a dot before the first item as well. Therefore, i would like to use :first-child pseudo-class as well. Can I do this? 回答1: Sure you can - http://jsfiddle.net/WQBxk/ p:before { content: "BEFORE "; display: block; } p:first-child:before { content: "1ST"; display: block } ​ The bad - it won't work in IE7 and below. Not because of the multiple pseudo

问题 I know there is an official CSS3 :checked pseudo-class, but is there an :unchecked pseudo-class, and do they have the same browser support? Sitepoint's reference doesn't mention one, however this whatwg spec (whatever that is) does. I know the same result can be achieved when the :checked and :not() pseudo-classes are combined, but i'm still curious: input[type="checkbox"]:not(:checked) { /* styles */ } Edit: The w3c recommends the same technique An unchecked checkbox can be selected by using

问题 I am trying to get the css font color to change to white when a button is pressed, however the only way I can currently do this is if I use !important and force the color to change. Is there a way to do this without using !important? Here is my code: Currently the button font color changes to the background color of .modal-close, unless I use !important to force it to change to white. Is there any way to make this work properly without using !important? Any help would be appreciated. .modal

问题 In css, how can I stop the :hover event being triggered in a parent element when a child event is hovered, so that it only gets triggered when the parent itself gets hovered? In this case my child element is actually positioned outside it's parent element with absolute positioning, so it's a bit weird when the parent changes when the child gets hovered. I made a JSFiddle to illustrate the problem. Here's a JSFiddle of the used solution to my example. 回答1: There is a pure css solution (even

问题 I have a table similar to the one illustrated below in a SharePoint site. I cannot modify the table as it is generated dynamically but I can add external CSS to override its style. I am required to show only second column and hide first, third and fourth column. The pseudo class to hide first column is table#student tr td:first-child { display: none; } Please help me with pseudo class or any other trick to hide third and forth column. <table id="student"> <tr> <td>Role</td> <td>Merin</td> <td

问题 I'm trying to set style for a <div> following an empty <ul> . This is simple code i'm currently testing: (OS is win7) Basic jsFiddle DEMO HTML: <button class="btnAdd">add new LI</button> <button class="btnRemove">remove last LI</button> <ul></ul> <div>Should be red if UL is empty</div> CSS: ul:empty + div { color:red; } jQuery: (not relevant to issue, just for testing purpose) $('.btnAdd').on('click', function () { $('ul').append('<li>LI</li>'); }); $('.btnRemove').on('click', function () { $

问题 Lately I've been working on Shower HTML5+CSS3 presentation template to make a upcoming presentation. Shower uses the CSS :target pseudo-class which makes it easy to identify the current slide in the overview of the slides. I understand how :target works through the hash in the URL, but however I cannot get it to clear the :target CSS from all elements at all. So my question is: given that after an element has been :target ed, how can we clear all the :target and revert it to the norm using

问题 How can I indent starting from the second line of a paragraph? I've tried p { text-indent: 200px; } p:first-line { text-indent: 0; } and p { margin-left: 200px; } p:first-line { margin-left: 0; } and (with position:relative;) p { left: 200px; } p:first-line { left: 0; } 回答1: Is it literally just the second line you want to indent, or is it from the second line (ie. a hanging indent )? If it is the latter, something along the lines of this JSFiddle would be appropriate. div { padding-left: 1