css3 作用域

CSS3作用域是指一个CSS属性只对选择器所匹配的元素生效，而不会影响到其他元素。这是CSS3新增的一项功能，可以帮助开发者更好地控制样式的作用范围。

在CSS3中，我们可以使用以下几种方式来定义样式作用的范围：

/* 类选择器 */
.Box {
    color: red;
}

/* ID选择器 */
#container {
    background-color: green;
}

/* 元素选择器 */
p {
    font-size: 16px;
}

以上代码中，类选择器“.Box”只会作用于HTML中class为“Box”的元素，ID选择器“#container”只会作用于HTML中id为“container”的元素，元素选择器“p”只会作用于HTML中所有的段落元素。

除了以上三种选择器外，CSS3还新增了伪元素选择器和属性选择器。

/* 伪元素选择器 */
p::before {
    content: "Hello ";
}

/* 属性选择器 */
input[type="text"] {
    border: 1px solid #ccc;
}

伪元素选择器“::before”会在选中的元素内容之前插入一个伪元素，属性选择器“[type='text']”只会作用于type属性为“text”的元素。

总之，在CSS3中，我们可以根据需要选择各种选择器来控制样式的作用范围，从而实现更灵活的样式控制。