html行内样式选择器怎么写,巧用CSS伪类选择器实现九种样式的九宫格

三剑客

传说在前端界有这么三剑客——HTML、CSS、JavaScript。

HTML

HTML——无非就是一些标签，配上一些属性，算不上编程语言，所以可能很多人对其是看不上眼的，小学生都会，但其实HTML只是深藏不露。如果它使出“语义化”大概很多人，包括很多工作多年的前端er们都要“死”在它的刀下。更别说都9012年了还div/span一把梭的还大有人在。虽然关于HTML的语义化也值得学习研究和讨论。不过这篇文章主旨并非在此。

JavaScript

作为一门真正的编程语言，虽然其具有被饱受诟病的一些“特性”，但也不妨它成为当今被广泛运用的语言，而且JS也确实在进步和改善。而今的JS已经今非昔比，到处“踢馆”，拳打后端，脚踢移动端，桌面端也展露头角，结果如何暂且不论，这份勇气着实可嘉。以至于"江湖"流传这么一句话：

Any application that can be written in JavaScript, will eventually be written in JavaScript.

JS在江湖的地位可见一斑。虽然JS很受欢迎，但它依然不是今天的重点。

CSS

虽然JS非常强大，很受欢迎，但大概会是男粉居多，女生应该会更青睐CSS，作为三剑客中最会“打扮”的一位，CSS可比亚洲四大邪术厉害多了，HTML本来是“奇丑无比”的，但有了CSS的加持，就可以变得“千姿百态”。

CSS虽然有许多的化妆工具来美化HTML的脸，但是这些工具又不像现实中妹纸们使用的——粉扑、眉笔、睫毛刷...是单一作用的，有时为了一个效果需要许多属性同时应用，所以CSS是非正交的。因为是非正交的，所以常会有很多难以理解的现象出现，用不好的话这个妆就毁了。

CSS VS JS

相信很多前端er们对自己的JS能力是很有自信的，能够熟练运用甚至精通，但大概是没人敢说精通CSS，可见CSS的难度其实不亚于JS，其实两者没什么比较性，说到底CSS也不是编程语言，只是因为其非正交的特点，使得其有许多难以理解的现象，同时也有很多出人意料的神奇之处。笔者对于两者也都是一知半解的程度，写这篇文章也是因为确实碰到这么一个需求，但对于这其中运用的技巧自认为可能对一些人会有帮助，故而在此献丑。如表述有误，或有何待改进的地方也欢迎批评指正。

需求

那么究竟是怎样一个需求呢？正所谓“有图有真相”，那么就来看看最终设计稿是何面貌吧。

这是一些社交类APP或者是一些内容型的APP可能会出现的场景，无非就是像微信朋友圈那样的一条消息，业务场景是很常见的，但是，既然是图文的展示，势必涉及到布局的问题，我们重点关注下其中的图片即可。九宫格图片是非常常见的一种图片布局，但“千不怕万不怕就怕设计有想法”，从上面图片中也可以看出，九宫格可以说对应了九种不同的样式。读者可以先尝试着针对这样的设计稿思考该如何实现。可能很多开发者接到这样一个设计稿的时候会选择通过使用JS修改相应位置图片的class来实现。加之现在三大框架的流行，使得DOM的修改更加的方便，不论是React的JSX或者Vue的模版语法都非常方便。也许是太过于较真，笔者总认为关于布局/样式之类的实现就应该是CSS干的事，JS不应该参与其中，就好像那句话一样：

上帝的归上帝，凯撒的归凯撒

也好比现今常被提及的MV*理论所述那样，HTML、CSS、JavaScript有各自的权责范围，“貌美如花”的活就应该让CSS单独承受。故而，当笔者接到这样一个设计稿的时候，就在思考如何让三剑客们都专注于自己分内的事。

重申一遍，这个需求的重点在于九宫格，故而其余部分请自行忽略。

实现

HTML

首先，HTML负责的是页面的骨架，理论上来说DOM越简单越好，如果抛开样式布局，无非就是有几张图就展示几张。HTML只需要把这些图片一个个排列即可。于是，HTML的结构应该是这样的：

</