UNPKG

wecui

Version:

一款基于Vue2.x版本的移动端web组件

111 lines (76 loc) 2.85 kB
# PostCSS Pseudo-Class Any-Link [![Build Status][ci-img]][ci] <img align="right" width="135" height="95" src="http://postcss.github.io/postcss/logo-leftp.png" title="Philosopher’s stone, logo of PostCSS"> [PostCSS Pseudo-Class Any-Link] is a [PostCSS] plugin that allows you to use the proposed [`:any-link`] pseudo-class in CSS. `:any-link` simplifies selectors targeting links, as the naming of `:link` is misleading; it specifically means unvisited links only, rather than all links. ```css /* before */ nav :any-link > span { background-color: yellow; } /* after */ nav :link > span, nav :visited > span { background-color: yellow; } ``` From the [proposal]: > The [`:any-link`] pseudo-class represents an element that acts as the source anchor of a hyperlink. It matches an element if the element would match [`:link`] or [`:visited`]. ## Usage You just need to follow these two steps to use [PostCSS Pseudo-Class Any-Link]: 1. Add [PostCSS] to your build tool. 2. Add [PostCSS Pseudo-Class Any-Link] as a PostCSS process. ```sh npm install postcss-pseudo-class-any-link --save-dev ``` ### Node ```js postcss([ require('postcss-pseudo-class-any-link')({ /* options */ }) ]) ``` ### Grunt Add [Grunt PostCSS] to your build tool: ```sh npm install postcss-pseudo-class-any-link --save-dev ``` Enable [PostCSS Pseudo-Class Any-Link] within your Gruntfile: ```js grunt.loadNpmTasks('grunt-postcss'); grunt.initConfig({ postcss: { options: { processors: [ require('postcss-pseudo-class-any-link')({ /* options */ }) ] }, dist: { src: 'css/*.css' } } }); ``` ### Options **prefix** (string): prepends a prefix (surrounded by dashes) to the pseudo-class, preventing any clash with native syntax. ```js { prefix: 'foo' // pseudo-class becomes :-foo-any-link } ``` ### Alternatives Here are a few other ways to simulate the effect of [PostCSS Pseudo-Class Any-Link]. ```css /* Use @custom-selector; supported nowhere yet */ @custom-selector :--any-link :link, :visited; :--any-link { /* ... */ } /* Use :matches; supported in Firefox 4+, Chrome 12+, Opera 15+, Safari 5.1+ */ :matches(:link, :visited) { /* ... */ } /* Use :link and :visited; supported everywhere */ :link, :visited { /* ... */ } ``` [`:any-link`]: http://dev.w3.org/csswg/selectors/#any-link-pseudo [`:link`]: http://dev.w3.org/csswg/selectors/#link-pseudo [`:visited`]: http://dev.w3.org/csswg/selectors/#visited-pseudo [ci]: https://travis-ci.org/jonathantneal/postcss-pseudo-class-any-link [ci-img]: https://travis-ci.org/jonathantneal/postcss-pseudo-class-any-link.svg [Grunt PostCSS]: https://github.com/nDmitry/grunt-postcss [PostCSS]: https://github.com/postcss/postcss [PostCSS Pseudo-Class Any-Link]: https://github.com/jonathantneal/postcss-pseudo-class-any-link [proposal]: http://dev.w3.org/csswg/selectors/