(转)必须记住的 30 类 CSS 选择器

realitycss 2014-11-27

大概大家读知道`id`,`class`以及`descendant`选择器，并且整体都在使用它们，那么你正在错误拥有更大级别的灵活性的选择方式。这篇文章里面提到的大部分选择器都是在CSS3标准下的，所以它们只能在相应最新版本的浏览器中才能生效，你完全应该把这些都记在你聪明的脑袋里面。

1.*

Css代码

* {  
  margin: 0;  
  padding: 0;  
}
 

在我们看比较高级的选择器之前，应该认识下这个众所周知的清空选择器。星号呢会将页面上所有每一个元素都选到。许多开发者都用它来清空`margin`和`padding`。当然你在练习的时候使用这个没问题，但是我不建议在生产环境中使用它。它会给浏览器凭添许多不必要的东西。

`*`也可以用来选择某元素的所有子元素。

Css代码

#container * {  
  border: 1px solid black;  
}

它会选中`#container`下的所有元素。当然，我还是不建议你去使用它，如果可能的话。

DEMO

兼容性

IE6+

Firefox

Chrome

Safari

Opera

2.#X

Css代码

#container {  
   width: 960px;  
   margin: auto;  
}

在选择器中使用`#`可以用id来定位某个元素。大家通常都会这么使用，然后使用的时候大家还是得相当小心的。

需要问自己一下：我是不是必须要给这个元素来赋值个id来定位它呢？

`id`选择器是很严格的并且你没办法去复用它。如果可能的话，首先试试用标签名字，HTML5中的新元素，或者是伪类。

DEMO

兼容性

IE6+

Firefox

Chrome

Safari

Opera

3..X

Css代码

.error {  
  color: red;  
}

这是个`class`选择器。它跟`id`选择器不同的是，它可以定位多个元素。当你想对多个元素进行样式修饰的时候就可以使用`class`。当你要对某个特定的元素进行修饰那就是用`id`来定位它。

DEMO

兼容性

IE6+

Firefox

Chrome

Safari

Opera

4.XY

Css代码

li a {  
  text-decoration: none;  
}

下一个常用的就是`descendant`选择器。如果你想更加具体的去定位元素，你可以使用它。例如，假如，你不需要定位所有的`a`元素，而只需要定位`li`标签下的`a`标签？这时候你就需要使用`descendant`选择器了。

专家提示：如果你的选择器像`XYZAB.error`这样，那你就错了。时刻都提醒自己，是否真的需要对那么多元素修饰。

DEMO

兼容性

IE6+

Firefox

Chrome

Safari

Opera

5.X

Css代码

a { color: red; }  
ul { margin-left: 0; }

如果你想定位页面上所有的某标签，不是通过`id`或者是’class’，这简单，直接使用类型选择器。

DEMO

兼容性

IE6+

Firefox

Chrome

Safari

Opera

6.X:visited和X:link

Css代码

a:link {color:red;}  
a:visited {color: purple;}

我们使用`:link`这个伪类来定位所有还没有被访问过的链接。

另外，我们也使用`:visited`来定位所有已经被访问过的链接。

DEMO

兼容性

IE7+

Firefox

Chrome

Safari

Opera

7.X+Y

Css代码

ul + p {  
   color: red;  
}
 

这个叫相邻选择器。它指挥选中指定元素的直接后继元素。上面那个例子就是选中了所有`ul`标签后面的第一段，并将它们的颜色都设置为红色。

DEMO

兼容性

IE7+

Firefox

Chrome

Safari

Opera

8.X>Y

Css代码

div#container > ul {  
  border: 1px solid black;  
}

`XY`和`X>Y`的差别就是后面这个指挥选择它的直接子元素。看下面的例子：

Css代码

<div id="container">  
   <ul>  
      <li> List Item  
        <ul>  
           <li> Child </li>  
        </ul>  
      </li>  
      <li> List Item </li>  
      <li> List Item </li>  
      <li> List Item </li>  
   </ul>  
</div>

`#container>ul`只会选中`id`为’container’的`div`下的所有直接`ul`元素。它不会定位到如第一个`li`下的`ul`元素。

由于某些原因，使用子节点组合选择器会在性能上有许多的优势。事实上，当在javascript中使用`css`选择器时候是强烈建议这么做的。

DEMO

兼容性

IE7+

Firefox

Chrome

Safari

Opera

9.X~Y

Css代码

ul ~ p {  
  color: red;  
}

兄弟节点组合选择器跟`X+Y`很相似，然后它又不是那么的严格。`ul+p`选择器只会选择紧挨跟着指定元素的那些元素。而这个选择器，会选择跟在目标元素后面的所有匹配的元素。

DEMO

兼容性

IE7+

Firefox

Chrome

Safari

Opera

10.X[title]

Css代码

a[title] {  
  color: green;  
}

这个叫属性选择器，上面的这个例子中，只会选择有title属性的元素。那些没有此属性的锚点标签将不会被这个代码修饰。那再想想如果你想更加具体的去筛选？那…

DEMO

兼容性

IE7+

Firefox

Chrome

Safari

Opera

11.X[href="foo"]

Css代码

a[href="http://strongme.cn"] {  
  color: #1f6053; /* nettuts green */  
}
 

上面这片代码将会把`href`属性值为`http://strongme.cn`的锚点标签设置为绿色，而其他标签则不受影响。

注意我们将值用双引号括起来了。那么在使用Javascript的时候也要使用双引号括起来。可以的话，尽量使用标准的CSS3选择器。

这样可以用了，但是还是有点死，如果不是这个链接，而是类似的链接，那么这时就得用正则表达式了。

DEMO

兼容性

IE7+

Firefox

Chrome

Safari

Opera

12.X[href*="strongme"]

Css代码

a[href*="strongme"] {  
  color: #1f6053;  
}

Tada,正是我们需要的，这样，就指定了`strongme`这个值必须出现在锚点标签的`href`属性中，不管是`strongme.cn`还是`strongme.com`还是`www.strongme.cn`都可以被选中。

但是记得这是个很宽泛的表达方式。如果锚点标签指向的不是`strongme`相关的站点，如果要更加具体的限制的话，那就使用`^`和`$`，分别表示字符串的开始和结束。

DEMO

兼容性

IE7+

Firefox

Chrome

Safari

Opera

13.X[href^="href"]

Css代码

a[href^="http"] {  
   background: url(path/to/external/icon.png) no-repeat;  
   padding-left: 10px;  
}

大家肯定好奇过，有些站点的锚点标签旁边会有一个外链图标，我也相信大家肯定见过这种情况。这样的设计会很明确的告诉你会跳转到别的网站。

用克拉符号就可以轻易做到。它通常使用在正则表达式中标识开头。如果我们想定位锚点属性`href`中以`http`开头的标签，那我们就可以用与上面相似的代码。

注意我们没有搜索http://，那是没必要的，因为它都不包含https://。

那如果我们想找到所有指向一张图片的锚点标签呢？那我们来使用下`&`字符。

DEMO

兼容性

IE7+

Firefox

Chrome

Safari

Opera

14.X[href$=".jpg"]

Css代码

a[href$=".jpg"] {  
  color: red;  
}

这次我们又使用了正则表达式`$`，表示字符串的结尾处。这段代码的意思就是去搜索所有的图片链接，或者其它链接是以`.jpg`结尾的。但是记住这种写法是不会对`gifs`和`pngs`起作用的。

DEMO

兼容性

IE7+

Firefox

Chrome

Safari

Opera

15.X[data-*="foo"]

Css代码

a[data-filetype="image"] {  
   color: red;  
}
 

在回到第8条，我们如何把所有的图片类型都选中呢`png`,`jpeg`,’jpg’,'gif’？我们可以使用多选择器。看下面：

Css代码

a[href$=".jpg"],  
a[href$=".jpeg"],  
a[href$=".png"],  
a[href$=".gif"] {  
   color: red;  
}

但是这样写着很蛋疼啊，而且效率会很低。另外一个办法就是使用自定义属性。我们可以给每个锚点加个属性`data-filetype`指定这个链接指向的图片类型。

[html]

ImageLink</a[/html]那有了这个钩子，我们就可以去用标准的办法只去选定文件类型为`image`的锚点了。

Css代码

a[data-filetype="image"] {  
   color: red;  
}

DEMO

兼容性

IE7+

Firefox

Chrome

Safari

Opera

16.X[foo~="bar"]

Css代码

a[data-info~="external"] {  
   color: red;  
} 
   
a[data-info~="image"] {  
   border: 1px solid black;  
}

这个我想会让你的小伙伴惊呼妙极了。很少有人知道这个技巧。这个`~`符号可以定位那些某属性值是空格分隔多值的标签。

继续使用第15条那个例子，我们可以设置一个`data-info`属性，它可以用来设置任何我们需要的空格分隔的值。这个例子我们将指示它们为外部连接和图片链接。

Css代码

<ahref="path/to/image.jpg"data-info="externalimage">ClickMe,Fool</a>

给这些元素设置了这个标志之后，我们就可以使用`~`来定位这些标签了。

Css代码

/* Target data-info attr that contains the value "external" */  
a[data-info~="external"] {  
   color: red;  
}  
   
/* And which contain the value "image" */  
a[data-info~="image"] {  
  border: 1px solid black;  
}

17.X:checked

Css代码

input[type=radio]:checked {  
   border: 1px solid black;  
}

上面这个伪类写法可以定位那些被选中的单选框和多选框，就是这么简单。

DEMO

兼容性

IE9+

Firefox

Chrome

Safari

Opera

18.X:after

`before`和`after`这俩伪类。好像每天大家都能找到使用它们的创造性方法。它们会在被选中的标签周围生成一些内容。

当使用`.clear-fix`技巧时许多属性都是第一次被使用到里面的。

Css代码

.clearfix:after {  
    content: "";  
    display: block;  
    clear: both;  
    visibility: hidden;  
    font-size: 0;  
    height: 0;  
  }  
   
.clearfix {   
   *display: inline-block;   
   _height: 1%;  
}

上面这段代码会在目标标签后面补上一段空白，然后将它清除。这个方法你一定得放你的聚宝盆里面。特别是当`overflow:hidden`方法不顶用的时候，这招就特别管用了。

还想看其他创造性的使用这个伪类，看[这里](http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-getting-clever-with-css3-shadows/)。

根据CSS3标准规定，可以使用两个冒号`::`。然后为了兼容性，浏览器也会接受一个双引号的写法。其实在这个情况下，用一个冒号还是比较明智的。

兼容性

IE8+

Firefox

Chrome

Safari

Opera

19.X::hover

Css代码

div:hover {  
  background: #e3e3e3;  
}

不用说，大家肯定知道它。官方的说法是`useractionpseudoclass`.听起来有点儿迷糊，其实还好。如果想在用户鼠标飘过的地方涂点儿彩，那这个伪类写法可以办到。

注意旧版本的IE只会对加在锚点`a`标签上的`:hover`伪类起作用。

通常大家在鼠标飘过锚点链接时候加下边框的时候用到它。

Css代码

a:hover {  
 border-bottom: 1px solid black;  
}

专家提示：border-bottom:1pxsolidblack;比text-decoration:underline;要好看很多。

兼容性

IE6+(IE6只能在锚点标签上起作用)

Firefox

Chrome

Safari

Opera

20.X:not(selector)

Css代码

p::first-line {  
  font-weight: bold;  
  font-size:1.2em;  
}

我们可以使用`::`来选中某标签的部分内容，如地一段，或者是第一个字没有。但是记得必须使用在块式标签上才起作用。

伪标签是由两个冒号::组成的。

定位第一个字

Css代码

p::first-letter {  
   float: left;  
   font-size: 2em;  
   font-weight: bold;  
   font-family: cursive;  
   padding-right: 2px;  
}

上面这段代码会找到页面上所有段落，并且指定为每一段的第一个字。

它通常在一些新闻报刊内容的重点突出会使用到。

定位某段的第一行

Css代码

p::first-line {  
   font-weight: bold;  
   font-size: 1.2em;  
}

跟`::first-line`相似，会选中段落的第一行。

为了兼容性，之前旧版浏览器也会兼容单冒号的写法，例如`:first-line`,`:first-letter`,`:before`,`:after`.但是这个兼容对新介绍的特性不起作用。

DEMO

兼容性

IE6+

Firefox

Chrome

Safari

Opera

22.X:nth-child(n)

Css代码

li:nth-child(3) {  
   color: red;  
}

还记得我们面对如何取到推跌式标签的第几个元素是无处下手的时光么，有了`nth-child`那日子就一去不复返了。

请注意`nth-child`接受一个整形参数，然后它不是从0开始的。如果你想获取第二个元素那么你传的值就是`li:nth-child(2)`.

我们甚至可以获取到由变量名定义的个数个子标签。例如我们可以用`li:nth-child(4n)`去每隔3个元素获取一次标签。

DEMO

兼容性

IE9+

Firefox3.5+

Chrome

Safari

23.X:nth-last-child(n)

Css代码

li:nth-last-child(2) {  
   color: red;  
}

假设你在一个`ul`标签中有N多的元素，而你只想获取最后三个元素，甚至是这样`li:nth-child(397)`，你可以用`nth-last-child`伪类去代替它。

这个技巧可以很正确的代替第16个TIP，不同的就是它是从结尾处开始的，倒回去的。

DEMO

兼容性

IE9+

Firefox3.5+

Chrome

Safari

Opera

24.X:nth-of-type(n)

Css代码

ul:nth-of-type(3) {  
   border: 1px solid black;  
}

曾几何时，我们不想去选择子节点，而是想根据元素的类型来进行选择。

想象一下有5个`ul`标签。如果你只想对其中的第三个进行修饰，而且你也不想使用`id`属性，那你就可以使用`nth-of-type(n)`伪类来实现了，上面的那个代码，只有第三个`ul`标签会被设置边框。

DEMO

兼容性

IE9+

Firefox3.5+

Chrome

Safari

25.X:nth-last-of-type(n)

Css代码

ul:nth-last-of-type(3) {  
   border: 1px solid black;  
}

同样，也可以类似的使用`nth-last-of-type`来倒序的获取标签。

兼容性

IE9+

Firefox3.5+

Chrome

Safari

Opera

26.X:first-child

Css代码

ul li:first-child {  
   border-top: none;  
}

这个结构性的伪类可以选择到第一个子标签，你会经常使用它来取出第一个和最后一个的边框。

假设有个列表，没个标签都有上下边框，那么效果就是第一个和最后一个就会看起来有点奇怪。这时候就可以使用这个伪类来处理这种情况了。

DEMO

兼容性

IE7+

Firefox

Chrome

Safari

Opera

27.X:last-child

Css代码

ul > li:last-child {  
   color: green;  
}

跟`first-child`相反，`last-child`取的是父标签的最后一个标签。

例如

标签

Css代码

<ul>  
   <li> List Item </li>  
   <li> List Item </li>  
   <li> List Item </li>  
</ul>

这里没啥内容，就是一个了List。

Css代码

ul {  
 width: 200px;  
 background: #292929;  
 color: white;  
 list-style: none;  
 padding-left: 0;  
}  
   
li {  
 padding: 10px;  
 border-bottom: 1px solid black;  
 border-top: 1px solid #3c3c3c;  
}

上面的代码将设置背景色，移除浏览器默认的内边距，为每个`li`设置边框以凸显一定的深度。

DEMO

兼容性

IE9+

Firefox

Chrome

Safari

Opera

28.X:only-child

Css代码

div p:only-child {  
   color: red;  
}

说实话，你会发现你几乎都不会用到这个伪类。然而，它是可用的，有会需要它的。

它允许你获取到那些只有一个子标签的父标签。就像上面那段代码，只有一个段落标签的`div`才被着色。

Css代码

<div><p> My paragraph here. </p></div>  
   
<div>  
   <p> Two paragraphs total. </p>  
   <p> Two paragraphs total. </p>  
</div>

上面例子中，第二个`div`不会被选中。一旦第一个`div`有了多个子段落，那这个就不再起作用了。

DEMO

兼容性

IE9+

Firefox

Chrome

Safari

Opera

29.X:only-of-type

Css代码

li:only-of-type {  
   font-weight: bold;  
}
 

结构性伪类可以用的很聪明。它会定位某标签只有一个子标签的目标。设想你想获取到只有一个子标签的`ul`标签？

使用`ulli`会选中所有`li`标签。这时候就要使用`only-of-type`了。

Css代码

ul > li:only-of-type {  
   font-weight: bold;  
}

DEMO

兼容性

IE9+

Firefox3.5+

Chrome

Safari

Opera

30.X:first-of-type`first-of-type`伪类可以选择指定标签的第一个兄弟标签。

测试

Css代码

<div>  
   <p> My paragraph here. </p>  
   <ul>  
      <li> List Item 1 </li>  
      <li> List Item 2 </li>  
   </ul>  
   
   <ul>  
      <li> List Item 3 </li>  
      <li> List Item 4 </li>  
   </ul>     
</div>

来你把ListItem2取出来，如果你已经取出来或者是放弃了，来继续。

解决办法1

办法很多，我们看一些比较方便的。首先是`first-of-type`。

Css代码

ul:first-of-type > li:nth-child(2) {  
   font-weight: bold;  
}

找到第一个`ul`标签，然后找到直接子标签`li`，然后找到第二个子节点。

解决办法2

另一个解决办法就是邻近选择器。

这种情况下，找到`p`下的直接`ul`标签，然后找到它的最后一个直接子标签。

解决办法3

我们可以随便玩耍这些选择器。来看看：

Css代码

ul:first-of-type li:nth-last-child(1) {  
   font-weight: bold;     
}
 

先获取到页面上第一个`ul`标签，然后找到最后一个子标签。

DEMO

兼容性

IE9+

Firefox3.5+

Chrome

Safari

Opera

结论

如果你想向旧版本浏览器妥协，比如IE6，那你用这些新的选择器的时候还是得小心点。但别别让IE6组织你去学这些新的技能。那你就对自己太残忍了。记得多查查[兼容性列表](http://www.quirksmode.org/css/contents.html)，或者使用[DeanEdward'sexcellentIE9.jsscript](http://code.google.com/p/ie7-js/)来让你的浏览器具有这些特性。

第二个，使用向jQuery的时候，尽量使用原生的CSS3选择器。可能活让你的代码跑的很快。这样选择器引擎就可以使用浏览器原生解析器，而不是选择器自己的。

realitycss

realitycss

相关推荐

纯CSS实现密室逃脱游戏

“密室逃脱”这个词想必大家并不陌生，在以前的flash时代，这是一类很经典的益智游戏之一。玩家常常会被困在一间密室中，而过关的目的就是想法设法逃出这件密室。接下来，笔者要用纯CSS实现一款类似的密室逃脱类游戏。是的，你没听错，纯CSS，也就意味着完全没有J

qiupu / 0评论 2020-11-04

一篇文章带你了解CSS对齐方式

将块元素水平居中对齐 , 使用 margin: auto;设置元素的宽度将阻止它伸展到容器的边缘。将元素内部的文本居中, 使用text-align: center;对齐元素的一种方法是使用 position: absolute;在我年轻而脆弱的岁月里，父亲

多读书读好书 / 0评论 2020-11-03

Node Sass 弃用，以 Dart Sass 代替

就在今天，Sass 官方团队正式宣布 Libsass 将弃用，以及基于它的 Node Sass 和 SassC，并且建议用户使用 Dart Sass。读完本文以下问题将会得到解答。那么为什么会有这次改动呢?之后 Node Sass 还维护吗?Dart S

RedCode / 0评论 2020-10-28

CSS元素选择器是怎样运作的？

在前端工程师的日常工作中，使用 CSS 元素选择器是稀松平常的事；无论你是编写一般的 CSS 还是需要经过编译的 SASS，SCSS，LESS等，最终都被编译成一行一行的 CSS 样式属性，最终交给浏览器解析并套用。但是你想过没有这是如何实现的呢?CSS

jiedinghui / 0评论 2020-10-25

CSS(Cascading Style Sheets)样式更改——过渡、动画

元素从一种样式逐渐改变为另一种的样式。cubic-bezier在cubic-bezie函数中定义自己的值，可能的值是0至1之间的数值

Ladyseven / 0评论 2020-10-22

多个你不知道的 CSS 居中方案！

要使内联元素居中，使用 text-align: center 足够了。对于多个内联的项目，也可以正常工作。使用网格容器时，图中的盘子将根据其网格区域居中。请注意，除非将它们包裹在一个元素中，否则这将不适用于多个盘子。宽度和高度已知的块元素可以通过设置mar

hellowzm / 0评论 2020-10-12

540 CSS3属性对层叠上下文的影响

-- 案例二分解:opacity -->

impress / 0评论 2020-10-07

如何在Shadow DOM/Web组件中覆盖CSS

Web组件的主要目的之一是提供封装——能够隐藏HTML标记结构和CSS样式，并与页面上的其他代码分离，这样不同的部分就不会冲突，通过这种方式，这样代码就可以保持漂亮和干净。影子DOM为我们提供了范围限定的样式封装，并提供了一种让我们随意选择进入外界的方法。

zuncle / 0评论 2020-09-28

超越媒体查询：使用更新的HTML和CSS功能进行响应式设计

在本文中，我们将探讨许多可用的工具，从响应图像到相对较新的CSS函数，无论我们是否使用媒体查询，它们都可以正常工作。事实上，媒体查询与这些功能一起使用时，更多的是成为一种补充，而不是完整的方法。让我们来看看是如何运作的。图像可能会变形到失去焦点的程度。较小

Ladyseven / 0评论 2020-09-11

5个好用的 CSS 函数

CSS 包含了许多函数，而且它能够完成许多早期需要用 JavaScript才能完成的事情。每年都有新的特性被添加进来，这让我们的开发更加轻松，也减少了对JavaScript的依赖。CSS 函数是它所具有的最强大的特性之一，在本文中，我将介绍一些我认为有

jiedinghui / 0评论 2020-09-07

使用这些不太常用的 CSS 属性，让我在前端布局效率上，又提高了一个层次！

有很多CSS属性，有些人不了解，或者他们了解它们，但是忘记在需要时使用它们。其实，有时候我们用 JavaScript 来实某些交互，CSS 一个属性就能搞定了，这可以大大节约我们编码的时间。作为前端开发人员，我们经常会遇到这样的事情。所以我问自己，为什么

xiaohuli / 0评论 2020-09-02

16个非常有用的CSS伪选择器，你千万不要错过了！

熟悉所有的 CSS 是实现这个目标的一种方法 —— 另一种是实施最佳实践和尽可能的减少代码。这个伪元素选择器选择换行之前文本的首行。这个伪元素选择器应用于元素中文本的首字母。应用于任何被用户选中的高亮区域。在 HTML 中，为 HTML 元素。这个规则将应

葉無聞 / 0评论 2020-09-01

总结一些，我在书写 CSS 的时候，经常犯的错误！

当我们非常专注写代码时候，我们往往会无意识的写出一些无效CSS代码。我把这种称为 “潜意识错误”。不过，这些错误都比较好解决，不需要花很多时间，只要纠正一下就行了。跟着本文看看，我会经常写哪些有趣的 CSS 错误。/*现这一点并不容易，你们看出错误在哪里吗

impress / 0评论 2020-08-26

一个思路，如何尝试创建自己的CSS框架？

在2019年，我创建了一个CSS框架并将其命名为Rotala.css[1]。经过一些重构和修改，我终于在2020年发布了“玩具”框架。但它仍在原型设计中，因为我认为我的解决方案还不优雅。我构建此框架的原因很简单：我自己想要一个CSS框架。最初，我开始使用

ThikHome / 0评论 2020-08-24

前端开发CSS清除浮动的方法有哪些？

在前端开发过程中，非IE浏览器下，当容器的高度自动，并且容器内容中有浮动元素，此时如果容器的高度不能自适应内容的高度，从而使得内容溢出破坏整体布局，这种现象叫做浮动溢出，为了方式这个现象的发生，就需要对CSS样式进行处理，而这个过程就叫做CSS清除浮动。现

nicepainkiller / 0评论 2020-08-20

多终端同步工具browsersync安装使用

2：进入项目目录 window可以进到目标目录，shift+右键，在此处打开命令窗口 也可以cmd里面切换进入

aSuncat / 0评论 2020-08-19

CSS知识点（三）

text-align:center:内容水平居中，可以让行内元素和行内块元素水平居中，不可以让块状元素居中。则他们之间的垂直间距不是margin-bottom与margin-top之和，而是两者中的较大者?,这种现象被称为相邻块元素垂直外边距的合并。确定页

hellowzm / 0评论 2020-08-18

css浮动

2、为什么要清除浮动？

aSuncat / 0评论 2020-08-18

HTML&amp;CSS 案例

案例 1：旅游网站首页。确定使用table来完成布局。如果某一行只有一个单元格，则使用<tr><td></td></tr>

zengni / 0评论 2020-08-17

css 背景图片路径问题

background-size: 宽 高 | cover 完全覆盖 | contain 宽高自动调节

zhanghaibing00 / 0评论 2020-08-17

提升布局能力！理解 CSS 的多种背景及使用场景和技巧

如果你还了解 CSS background 属性，可以去先 MDN 查看相关的知识。background-clip, background-color, background-image, background-origin, background-po

李鴻耀 / 0评论 2020-08-17

前端CSS引入外部字体

src:url;/*字体包的引入路径*/

SHINESUNNY / 0评论 2020-08-15

CSS动画实例：图文切换

先准备好一张图片，在页面中放置一个类名为container的层作为图文容器，在该层中再定义两个层：一个类名为image-box的层放置图片，一个类名为text-desc的层放置文本描述，HTML代码描述如下：。<p>黄鹤楼是国家首批AAAAA级

AlisaClass / 0评论 2020-08-09

CSS盒子模型

CSS盒子模型本质上是一个盒子，封装周围的HTML元素。该属性控制浏览器绘制表格边框的方式，它控制相邻单元格的边框。使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。如上图，出现了取两个值中的较大者的现象，即为相邻块元素垂直外边距的合并。这

myloveqiqi / 0评论 2020-08-09

CSS网页布局基础

CSS网页布局基础1.行布局-基础的行布局-行布局自适应-行布局自适应限制最大宽-行布局垂直水平居中-行布局某部位自适应-行布局固定宽-行布局导航随屏幕滚动2.多列布局-两列布局固定-两列布局自适应-三列布局固定-三列布局自适应3.混合布局-混合布局固定-

csstpeixun / 0评论 2020-08-07

一个有意思的方案：不借助后台和 JS ，只用 CSS 让一个列表编号倒序，你会怎么做？

我正在做一个项目，其中有一个倒序的列表。列表创建时间降序排序的，这里我想在语义和视觉上都能体现出来。网上做了一些研究，找到了一些有趣的解决办法，有些很好，有些就不那么好了。接着，我们来看看有哪些实现的方式。简单，最直接的解决方案是HTML中的reverse

NARUTOLUOLUO / 0评论 2020-08-03

左右切换css，html

<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script type="

yaodilu / 0评论 2020-08-03

CSS选择器

应用于页面中的所有元素。匹配元素名称与选择器相似的元素。应用于<h1>元素，<h2>元素和<h3>元素。应用于所有class特性值为note的元素。匹配指定元素的后代元素。应用于所有位于<p>元素中的<

buttonChan / 0评论 2020-08-02

css经典布局

2.去掉共同的父级wrapper，给middle加一个父级middle-wrap，属性设置为margin：0 100px，同时取消三者共同属性position：relative，也不用给left和right去调整位置。

lanzhusiyu / 0评论 2020-08-01

怎么减少http请求次数

2.CSS Sprites图片是增加HTTP请求的最大可能者，把全站的图标都放在一个图像文件中，然后用CSS的background-image和background-position属性定位来显示其中的一小部分。

xvzhengyang / 0评论 2020-07-30

JavaScript DOM 控制CSS

JavaScript更改P元素的样式：1.<html>2.<body>3.<p id="p2">Hello World!"red";6.</script>7.<p

drdrsky / 0评论 2020-07-29

Front-end 前端优化总结

　　a. 早期使用 gulp 合并 或者内嵌js，css， 现在用webpack。　　b. 使用浏览器缓存，http1.0 , http1.1 cache-control ETag, if-none-match. c. code split + 按需加载

Phoebe的学习天地 / 0评论 2020-07-28

CSS3动画旋转——（图片360°旋转）

注意的是，建议这里使用的是插入图片，如果用背景图片的话，那么盒子内的内容也会进行旋转。

zhanghaibing00 / 0评论 2020-07-28

关于 CSS 中 Grid响应式布局

/*auto-fit，让我们跳过固定数量的列，将指定数量根据指定宽度替换为自适应的数量 。/*栅格将会根据容器的宽度调整其数量。它会尝试在容器中容纳尽可能多的100px宽的列。但如果我们将所有列硬写为100px，永远没法实现的弹性，因为它们很难填充整个宽度

xiaohuli / 0评论 2020-07-28

只用 css 就可以画饼状图

原理很简单，就是用画三角形的方法画一个个扇形，然后计算所需的旋转角度。画三角形的方法就是设置盒子的 width 和 height 为0，计算边框的宽度画出对应的三角形，麻烦的就是应该怎么去旋转这个扇形。

somboy / 0评论 2020-07-27

20个CSS快速提升技巧

本文涵盖了20个css技巧，可以解决许多工作中常见的问题。css重置库如normalize.css已经被使用很多年了，它们可以为你的网站样式提供一个比较清晰的标准，来确保跨浏览器之间的一致性。大多数项目并不需要这些库包含的所有规则，可以通过一条简单的规则来

Ladyseven / 0评论 2020-07-25

css属性 z-index使用

z-index 值较大的元素将叠加在z-index值较小的元素之上。对于未指定此属性的定位对象，z-index 值为正数的对象会在其之上，而z-index 值为负数的对象在其之下。而在之前的浏览器版本中，iframe 对象是窗口控件，会忽略此属性。并且st

teresalxm / 0评论 2020-07-25

详解 css float属性

　　在css中float就是浮动的意思，简单来说，就是让元素浮动起来。我们把网页想象成是拼图的底板，里面的元素就是一个个小的拼图块，所谓浮动就是让本来应该贴着拼图底板的块起来，这就是浮动，也是所谓的脱离文档流。标准文档流就是拼好的拼图。我们会看到，son2

xvzhengyang / 0评论 2020-07-25

妙用CSS变量，让你的CSS变得更心动

「CSS变量」又叫「CSS自定义属性」，为什么会突然提起这个很少人用到的东西呢？因为最近在重构个人官网，不知道为什么突然喜欢用上「CSS变量」，可能其自身隐藏的魅力，让笔者对它刮目相看。谈到为什么会在CSS中使用变量，下面举个栗子，估计大家一看就会明白。看

nicepainkiller / 0评论 2020-07-24

css基础--盒子模型

1 绝大多数标签都可以看作盒子，可以设置宽高或设置内容；在CSS中，"box model"这一术语是用来设计和布局时使用。　　CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。　　盒模型允许我们

AlisaClass / 0评论 2020-07-19

css 属性值 display

/* display: block; */ /* 浏览器默认样式 *//* display: inline; */ /* 设置为行内元素 *//* display: none; */ /* 隐藏元素不占空间 *//* display: inline-blo

hellowzm / 0评论 2020-07-19

vue 对css样式进行修改

background-color: blue;background-color: yellow;<input type="button" value="变蓝" @click="changeColorT

昔人已老 / 0评论 2020-07-19

CSS - 正确解决 float 高度坍塌的问题

子元素使用 float 后，使其脱离文档流 。4，子元素后面添加 一个 clear:both 的 兄弟元素 ， 缺陷是 ： 使 html 添加了一个多余的结构。5，为父元素添加一个 content:"";clear:both;displ

zhanghao / 0评论 2020-07-19

css变量_原生css 中变量的使用

前两天看到阮大神的一篇在css中使用变量的文章，整理了一下。这个重要的css新功能，所有主要浏览器已经都支持了。本文全面介绍如何使用它，你会发现原生css从此变得异常强大。上面代码中，body选择器里面声明了两个变量：--foo和--bar。它们与colo

lanzhusiyu / 0评论 2020-07-19

CSS让页面平滑滚动

兼容情况可以点击这里查看。凡是需要滚动的地方都加一句scroll-behavior:smooth就好了！你别管他用不用得到，也不用管浏览器兼容性如何，你都加上。这就像一个不要钱的免费抽奖，没有中奖，没关系，又没什么损失，中奖了自然好，锦上添花！scroll

骆驼的自白 / 0评论 2020-07-18

CSS 伪元素的用法和使用详解

CSS伪元素是用来添加一些选择器的特殊效果。"first-line" 伪元素用于向文本的首行设置特殊样式。在下面的例子中，浏览器会根据 "first-line" 伪元素中的样式对 p 元素的第一行文本进行格式化：。上

lanzhusiyu / 0评论 2020-07-19

CSS便捷开发小工具汇总

虽然现代浏览器支持css3，但是一些过往的版本或是目前有些css3属性的应用还是离不开前缀的。一些牛逼且执着于web技术且乐于分享的仁兄就搞了个名叫prefixfree.js的插件可以自动补全前缀。首先在页面任意地方插入插件:. 但是其实部分我们要的想要的

hellowzm / 0评论 2020-07-19

06、Webpack使用loader配置css文件、图片文件、

loader 让 webpack 能够去处理那些非 JavaScript 文件。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，然后你就可以利用 webpack 的打包能力，对它们进行处理。本质上，webpack loader

waterv / 0评论 2020-07-18

前端工程师面试题汇总-5

属于元素事件属性的是( )正确答案: A CA. onblurB. requiredC. onfocusD. onsearch. 关于link与@import的区别:区别1：link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@impo

CSSEIKOCS / 0评论 2020-07-18

分享一个纯CSS写的钟表式计时器

width: 400px;height: 400px;border-radius: 50%;border: 3px solid black;margin: 200px auto;position: relative;width: 3px;height: 4

lanzhusiyu / 0评论 2020-07-18