CSS选择器的新用法(推荐)

下面是详细的“CSS选择器的新用法(推荐)”攻略：

什么是CSS选择器

CSS选择器是一种用来指定CSS样式作用于哪些HTML元素的方法，使用不同的选择器可以选择不同的HTML元素。

CSS选择器的新用法

CSS选择器的新用法包括以下三种：

1.属性选择器

属性选择器可以选择具有特定属性值的HTML元素。属性选择器的语法为：[attribute=value]。

示例：

<div data-role="header">头部</div>
<div data-role="content">内容</div>
<div data-role="footer">底部</div>

现在我们要设置头部的背景颜色为红色，我们可以使用以下CSS代码：

div[data-role="header"] {
   background-color: red;
}

2.通配选择器

通配选择器表示所有的HTML元素都会被选择。通配选择器的语法为：*。

示例：

<p>这是一个段落。</p>
<div>这是一个div。</div>

现在我们要设置所有的HTML元素的边框为1px，我们可以使用以下CSS代码：

* {
   border: 1px solid black;
}

3.子串匹配选择器

子串匹配选择器可以选择具有特定属性值的HTML元素，该属性值是另一个属性值的子串。子串匹配选择器的语法为：[attribute*=value]。

示例：

<a href="http://www.example.com">这是一个链接</a>
<a href="http://www.example.cn">这也是一个链接</a>

现在我们要设置只有链接的地址以.com结尾的链接字体颜色为红色，我们可以使用以下CSS代码：

a[href*=".com"] {
   color: red;
}

总结

CSS选择器的新用法包括属性选择器、通配选择器、子串匹配选择器等，利用这些选择器能够让我们更方便地为HTML元素添加样式。