Menu

前端重点知识总结—CSS3

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

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

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

  1. ele:nth-of-type(n)是指父元素下第n个ele元素,
  2. 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,转载须征得作者授权。

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!

¥ 打赏支持