wecui
Version:
一款基于Vue2.x版本的移动端web组件
111 lines (76 loc) • 2.85 kB
Markdown
# 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 */
:--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/