pseudo-class

问题 I'm studying a bit of CSS and from reading there are some pseudo-classes that don't have specificity like where() and not() . Are there more? 回答1: If you check the specification you can find the full detail of specificity calculation. I am going to refer to CSS selectors level 4 that include all the new selectors: A selector’s specificity is calculated for a given element as follows: count the number of ID selectors in the selector (= A) count the number of class selectors, attributes

问题 This question already has answers here : Why do pseudoclasses on the host element have to be inside of the host function? (2 answers) Closed 5 months ago . Is it not possible, or not allowed, to combine :host and :defined in CSS, while combining the latter with the :host() pseudoclass works? As you can see in below example, the following :host:defined { display: block; } does not work, while :host(:defined) { display: block; } works. class CustomElement extends HTMLElement { constructor() {

问题 This question already has answers here : Why do pseudoclasses on the host element have to be inside of the host function? (2 answers) Closed 5 months ago . Is it not possible, or not allowed, to combine :host and :defined in CSS, while combining the latter with the :host() pseudoclass works? As you can see in below example, the following :host:defined { display: block; } does not work, while :host(:defined) { display: block; } works. class CustomElement extends HTMLElement { constructor() {

问题 OK so I found the :not pseudo element and wanted to apply a style to all buttons that are active EXCEPT one within another class. This is the CSS decleration I came up with but Dreamweaver, and more importantly the browser, does not like it and voids the whole decleration... .button:active:not(.success .button:active) { position:relative; top:4px; } It looks like it makes sense to me logically but is there something about all these colons which confuses CSS? PS. Its important because the

问题 I am currently trying to pass in some html into the the :after pseudo class in css to add an arrow after a link once hovered on. I have seen this done quite some time ago in the stock WordPress theme that used to ship with the default install. I feel like I must me missing something simple. a:hover:after{content: "»"} thank in advance! 回答1: You need to use the hex value \00BB . http://jsfiddle.net/durilai/AGDbH/ 回答2: You're looking for, I think: a:hover:after { content: "\00bb"; } JS Fiddle

问题 I have some HTML that looks like this: <div class="SomeContainer"> <div class="MyClass"></div> <div class="MyClass"></div> <div class="MyClass"></div> <div class="MyOtherClass"></div> </div> And I use the following CSS .MyClass{...} .MyClass:last-child{box-shadow:0px 5px 10px black;} I wrongly assumed that last-child operated on the last child of a certain class but it actually operates on the last-child of the container if it's of the same class. Is there some convenient way around? I know I

问题 What's concept of detecting support of any css pseudo-class in browser through JavaScript? Exactly, I want to check if user's browser supports :checked pseudo-class or not, because I've made some CSS-popups with checkboxes and needs to do fallbacks for old browsers. ANSWER: I'm found already implemented method of testing css selectors in a Modernizr "Additional Tests". 回答1: You can simply check if your style with pseudo-class was applied. Something like this: http://jsfiddle.net/qPmT2/1/ 回答2:

问题 I am building a portfolio website that uses only CSS3 to display a grid and filter out thumbnail images. You can see what I've done here. I got the filter functionality to work by using this tutorial and using the :checked pseudo class. The grid is made using css3 columns to create a seamless responsive photo grid. I used Chris Coyier's example. Everything works in most modern browsers, but it breaks in mobile safari for the iPhone. Upon further testing, it seems to also break in the Sleipnir

问题 I already know how to calculate selector specificity for CSS (the a/b/c/d mentioned in specs). However, I am having trouble figuring how to calculate it for the :not() pseudo-class. See the following example: input:not([type="text"],[type="password"],.someClass) {...} input:not(#someId[type="text"]) {...} Assuming both of them apply to one element, should these two be calculated as (0011) and therefore they should be ordered according to order of appearance? Or should the selectors inside the

问题 HTML <div> <div></div> </div> CSS div > :first-child:after { background-color: orange; color: #fff; font-family: sans-serif; font-size: 50px; line-height: 50px; text-align: center; vertical-align: middle; -webkit-font-smoothing: antialiased; content: "hello world"; display: block; font-size: 50px; height: 160px; line-height: 160px; margin-top: 14px; font-weight: normal; } div > :first-child:after:hover { background-color: #44b800; } Fiddle http://jsfiddle.net/VSBr6/ Basically, all I want to