前端重点知识总结—CSS3

Table of Contents

1.CSS3有哪些新属性，举例

边框属性：border-radius、box-shadow
背景属性：background-size、background-origin
2D、3D转换：transform
动画属性：animation

2.nth-child和:nth-of-type的区别

ele:nth-of-type(n)是指父元素下第n个ele元素，
ele:nth-child(n)是指父元素下第n个元素且这个元素为ele，若不是，则选择失败。

<ul class="demo"> 
        <p>zero</p> 
        <li>one</li> 
        <li>two</li> 
</ul>

上面这个例子，.demo li:nth-child(2)选择的是<li>one</li>节点，而.demo li:nth-of-type(2)则选择的是<li>two</li>节点。

3.:is、:where伪类函数让选择器更简洁

简化选择

使用前：

ul li,
ol li {}

使用后：

:is(ul, ol) li {}

避免 CSS 错误

假如我们的 CSS 中有错误，将导致整个选择器不生效。比如下面的 .content 写成 :content。

<div class="container-1">
  <p class="title">I am Gopal</p>
  <div class="content">我是锅巴</div>
</div>

<div class="container-2">
  <p class="title">I am Gopal</p>
  <div class="content">我是锅巴</div>
</div>

写错，将导致都不生效：

.container-1 .title, .container-1 :content {
  color: #885c5c;
}

但假如使用:is()，.title选择器依然可以生效，如下：

/* content 写错，title 还可以生效 */
.container-2 :is(.title, :content) {
  color: #885c5c;
}

4.css父选择器:has伪类函数

/* 匹配包含 <img> 子元素的 <a> 元素 */
a:has(img) { … }

/* 匹配包含<img>直接后代子元素的<a>元素 */
a:has(> img) { … }

/* 匹配不包含任何H元素的 <section> 元素：: */
section:not(:has(h1, h2, h3, h4, h5, h6))

/* 仅当 <p> 元素紧随其后时才匹配 <h1> 元素 */
h1:has(+ p) { … }

本文固定连接：https://code.zuifengyun.com/2017/02/1923.html，转载须征得作者授权。