CSS3属性选择器与(:not)选择器

CSS3属性选择器和(:not)选择器是CSS中常用的选择器之一，它们的作用是根据元素的特定属性或者排除特定的元素来选择样式应用的元素。本文将详细介绍这两种选择器的用法和示例，并举例说明它们在实际开发中的应用。

一、CSS3属性选择器

CSS3属性选择器允许我们通过指定元素的属性来选择元素。属性选择器有多种形式，最常见的有以下几种：

1. [attribute]：选择带有指定属性的所有元素。

例如，要选择所有带有title属性的元素，可以使用以下CSS代码：

```

[title] {

color: red;

}

```

上述代码将会将所有带有title属性的元素的文字颜色设置为红色。

2. [attribute=value]：选择具有指定属性值的元素。

例如，要选择所有带有title属性且属性值为"example"的元素，可以使用以下CSS代码：

```

[title="example"] {

background-color: yellow;

}

```

上述代码将会将所有带有title属性且属性值为"example"的元素的背景颜色设置为黄色。

3. [attribute~=value]：选择具有具有空格分隔的属性值列表中包含指定值的元素。

例如，要选择所有带有class属性且属性值列表中包含"example"的元素，可以使用以下CSS代码：

```

[class~="example"] {

border: 1px solid blue;

}

```

上述代码将会将所有带有class属性且属性值列表中包含"example"的元素的边框设置为蓝色。

4. [attribute^=value]：选择具有以指定值开头的属性值的元素。

例如，要选择所有带有href属性且属性值以"https://"开头的元素，可以使用以下CSS代码：

```

[href^="https://"] {

font-weight: bold;

}

```

上述代码将会将所有带有href属性且属性值以"https://"开头的元素的字体加粗。

5. [attribute$=value]：选择具有以指定值结尾的属性值的元素。

例如，要选择所有带有src属性且属性值以".png"结尾的元素，可以使用以下CSS代码：

```

[src$=".png"] {

opacity: 0.5;

}

```

上述代码将会将所有带有src属性且属性值以".png"结尾的元素的透明度设置为0.5。

6. [attribute*=value]：选择具有包含指定值的属性值的元素。

例如，要选择所有带有alt属性且属性值包含"example"的元素，可以使用以下CSS代码：

```

[alt*="example"] {

text-decoration: underline;

}

```

上述代码将会将所有带有alt属性且属性值包含"example"的元素的文本添加下划线。

以上就是CSS3属性选择器的几种常见用法，通过使用不同形式的属性选择器，我们可以根据元素的属性来选择元素并应用相应的样式。

二、(:not)选择器

(:not)选择器允许我们排除特定的元素并选择其他的元素来应用样式。(:not)选择器的使用格式为:not(selector)，其中selector指定了需要排除的元素。

例如，要选择所有不是按钮的链接元素并将它们的文本颜色设置为红色，可以使用以下CSS代码：

```

a:not(.button) {

color: red;

}

```

上述代码将会将所有不具有class为"button"的链接元素的文本颜色设置为红色。

(:not)选择器还支持复杂选择器，例如可以根据元素的父元素、子元素或者同级元素进行排除。

例如，要选择所有没有嵌套在p元素内部的span元素，并将它们的背景色设置为灰色，可以使用以下CSS代码：

```

span:not(p span) {

background-color: gray;

}

```

上述代码将会将所有不是p元素内部的span元素的背景色设置为灰色。

(:not)选择器的灵活性使得我们能够更加精确地选择要应用样式的元素，提供了更多的样式定制可能性。

三、属性选择器与(:not)选择器的实际应用

属性选择器和(:not)选择器在实际开发中有广泛的应用。以下是几个常见的应用示例：

1. 表单样式定制：

通过属性选择器，我们可以根据表单元素的属性值来定制样式。例如，可以根据表单元素的状态来应用不同的样式，或者根据表单元素的格式要求来提示用户输入。

```

input[type="text"] {

border: 1px solid gray;

}

input:not([type="submit"]) {

background-color: white;

}

```

上述代码将会将文本输入框的边框颜色设置为灰色，排除了提交按钮并将其他输入框的背景色设置为白色。

2. 链接样式定制：

通过属性选择器和(:not)选择器，我们可以根据链接的属性值来定制链接的样式。例如，可以根据链接的状态来应用不同的样式，或者根据链接的目标位置来提示用户跳转。

```

a[href^="https://"] {

color: green;

}

a:not([href]) {

border-bottom: 1px dotted black;

}

```

上述代码将会将以"https://"开头的链接的文本颜色设置为绿色，将没有href属性的链接添加虚线下划线。

3. 导航菜单样式定制：

通过属性选择器和(:not)选择器，我们可以根据导航菜单项的属性值来定制菜单项的样式。例如，可以根据当前页面所在的菜单项来突出显示。

```

.nav-item:not(.active) {

opacity: 0.5;

}

.nav-item[aria-current="page"] {

font-weight: bold;

}

```

上述代码将会将非当前页面所在的菜单项的透明度设置为0.5，将当前页面所在的菜单项的字体加粗。

以上就是属性选择器和(:not)选择器的几个实际应用示例，在实际开发中我们可以根据具体需求灵活运用，提升用户体验和界面的可访问性。

总结：

CSS3属性选择器和(:not)选择器是CSS中常用的选择器之一。通过属性选择器，我们可以根据元素的属性来选择元素并应用相应的样式，而(:not)选择器则可以排除特定的元素并选择其他的元素来应用样式。属性选择器和(:not)选择器在实际开发中有广泛的应用，例如表单样式定制、链接样式定制和导航菜单样式定制等。通过灵活运用这两种选择器，我们可以实现更多样式定制的需求，提升用户体验和界面的可访问性。