目录
在前端开发中,使用css是必不可少的,而熟练使用css选择器又是熟练使用css的前提条件,只有能够熟练使用css选择器,才能找到与之相对应的元素,从而添加对应的属性。
一、通配符选择器
通配符选择器会匹配页面中的所有元素,通常使用它清除外边距、内边距
* { margin: 0; padding: 0; }
二、id选择器
id选择器使用 “#” 进行标识,后面紧跟id名。id是唯一的,只能对应页面中唯一的元素.
#id名 { 属性一: 属性值; 属性二: 属性值; }
三、标签名选择器
标签名选择器会匹配页面中所有的这个标签,从而添加相应的属性
标签名 { 属性一: 属性值; 属性二: 属性值; }
例如
p { font-size: 16px; color: red } // 会给页面所有的p标签设置字体大小16px、字体颜色为红色
四、类选择器
类选择器又叫class选择器,是使用最多的选择器,使用时需要给标签添加一个class属性,不同的类名之间用空格隔开
<p class="类名一 类名二"></p>
类选择器使用“.”进行标识,后面紧跟id名。类选择器会匹配页面中所有具有此类名的元素。
.类名 { 属性一: 属性值; 属性二: 属性值; }
例如
.color-red { color: red } // 会给页面中所有具有”color-red”类名的元素设置字体颜色为红色
五、属性选择器
属性选择器会匹配带有这个属性条件的元素。
选择器 | 描述 |
[attr] | 匹配所有带有attr属性的元素 |
[attr = value] | 匹配所有attr属性值为value的元素 |
[attr ~= value] | 匹配所有attr属性包含value的元素(value和其他值要用空格隔开) |
[attr *= value] | 匹配所有attr属性包含"value"字符串的元素(value和其他值不需要用空格隔开) |
[attr ^= value] | 匹配所有attr属性以"value"字符串开头的元素 |
[attr $=value] | 匹配所有attr属性以"value"字符串结尾的元素 |
六、后代选择器
语法格式:选择器一 选择器二 {} (多个选择器名称之间用空格隔开)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.box1 p { // 会匹配到box1下面的所有p标签
color: red;
}
</style>
</head>
<body>
<div class="box1">
<p>这是一段文字</p>
<div class="box2"> <!-- 这两个p标签字体颜色都会变成红色 -->
<p>这是另一段文字</p>
</div>
</div>
</body>
</html>
七、子代选择器
语法格式:选择器一 > 选择器二 {} (多个选择器名称之间用">"隔开)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.box1 > p { // 只会匹配box1子元素中的p标签
color: red;
}
</style>
</head>
<body>
<div class="box1">
<p>这是一段文字</p> <!-- 只有这个p标签字体颜色会变成红色 -->
<div class="box2">
<p>这是另一段文字</p>
</div>
</div>
</body>
</html>
八、兄弟选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div ~ p {
color: red;
}
</style>
</head>
<body>
<p>第一个p标签</p>
<div>这是一个div标签</div>
<p>第二个p标签</p>
<h1>这是一个H1标签</h1>
<p>第三个p标签</p>
</body>
</html>
运行效果:
九、伪元素选择器
选择器 | 示例 | 描述 |
empty | p:empty | 选择没有子元素的p元素 |
first-child | p:first-child | 选择p元素为父元素第一个子元素的p元素 |
last-child | p:last-child | 选择p元素为父元素的最后一个子元素的p元素 |
not | p:not(.aa) | 选择所有不带有名为aa的class的p标签 |
nth-child(n) | p:nth-child(2) | 选择p元素为父元素第二个子元素的p元素 |
nth-last-child(n) | p:nth-last-child(2) | 选择p元素为父元素第二个子元素的p元素 |
内容不全,后续会继续补充