【基础学习-css】2.css简单选择器和属性选择器

元素选择器

选择器名和指定的HTML元素名的不区分大小写的匹配

html:

1
<h1>css部分</h1>

css:

1
2
3
4
h1 {
color: #000;
font-size: 18px;
}

类选择器

选择器名对元素class的匹配。 使用英文句号. + class 名进行匹配。

html:

1
<h1 class="title">css部分</h1>

css:

1
2
3
4
.title {
color: #000;
font-size: 18px;
}

id选择器

选择器名对元素id的匹配。 使用英文哈希符号#+ id 名进行匹配。

需要注意的是一个ID名称必须在当前文件中是唯一的,重复则不可预测,例如一些浏览器只识别第一个id名
html:

1
<h1 id="title">css部分</h1>

css:

1
2
3
4
#title {
color: #000;
font-size: 18px;
}

通用选择器

使用*对当前文件所有html元素的通配。

比较常用的是一个对所有元素去掉 margin padding 的用法

1
2
3
4
* {
margin: 0;
padding: 0;
}

属性和值选择器

  • [attr]:该选择器选择包含 attr 属性的所有元素,不论 attr 的值为何。 (css2.1)
  • [attr=val]:该选择器仅选择 attr 属性被赋值为 val 的所有元素。 (css2.1)
  • [attr~=val]:该选择器仅选择具有 attr 属性的元素,而且要求 val 值是 attr 值包含的被空格分隔的取值列表里中的一个。 (css2.1)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/* 所有具有"data-vegetable"属性的元素将被应用绿色的文本颜色 */
[data-vegetable] {
color: green
}

/* 所有具有"data-vegetable"属性且属性值刚好为"liquid"的元素将被应用金色的背景颜色 */
[data-vegetable="liquid"] {
background-color: goldenrod;
}

/* 所有具有"data-vegetable"属性且属性值包含"spicy"的元素,
即使元素的属性中还包含其他属性值,都会被应用红色的文本颜色 */
[data-vegetable~="spicy"] {
color: red;
}

子字符串值选择器

  • [attr|=val] : 选择attr属性的值是 val 或值以 val- 开头的元素(注意,这里的 “-” 不是一个错误,这是用来处理语言编码的)。 (css2.1)
  • [attr^=val] : 选择attr属性的值以 val 开头(包括 val)的元素。 (css3)
  • [attr$=val] : 选择attr属性的值以 val 结尾(包括 val)的元素。 (css3)
  • [attr*=val] : 选择attr属性的值中包含子字符串 val 的元素(一个子字符串就是一个字符串的一部分而已,例如,”cat“ 是 字符串 ”caterpillar“ 的子字符串)。 (css3)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
/* 语言选择的经典用法 */
[lang|="fr"] {
font-weight: bold;
}

/*
具有"data-vegetable"属性含有值"not spicy"的所有元素,都变回绿色
*/
[data-vegetable*="not spicy"] {
color: green;
}

/*
具有"data-quantity"属性其值以"kg"结尾的所有元素*/
[data-quantity$="kg"] {
font-weight: bold;
}

/*
具有属性"data-quantity"其值以"optional"开头的所有元素
*/
[data-quantity^="optional"] {
opacity: 0.5;
}

本文作者: haise
本文地址https://www.shifeng1993.com/2018/10/30/base_css2/
版权声明: 转载请注明出处!