常用选择器:
" * "其含义就是所有的元素
1、通配选择器(为所有的元素进行设置)
一般的用法是消除块元素的外边距和内边距
*{
margin: 0px;
padding: 0px;
}
2、属性选择器:
p[id] { 属性:属性值;
属性:属性值;
属性:属性值;
}
1:属性选择器
语法:[属性名] {} 选择含有指定属性的元素
[属性名=属性值] {} 选择含有指定属性和属性值的元素
[属性名^=属性值] {} 选择属性值以指定值开头的元素
[属性名$=属性值] {} 选择属性值以指定值结尾的元素
[属性名*=属性值] {} 选择属性值含有某值的元素
3、标签选择器
语法:标签名{ 属性:属性值;
属性:属性值;
属性:属性值;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
div {
background-color: chocolate;
}
</style>
</head>
<body>
<div>AAAAAAAAAA</div>
</body>
</html>
4、id选择器
语法:#id属性值{}
注意:①id属性名不能数字开头;
②不建议使用汉字;
③不能重复;
只要标签里面有id的,就会给你选中
5、class选择器(通配选择器)
语法:.class{属性:属性值;
属性:属性值;
属性:属性值;
}
6、复合选择器
div.h1{ 属性:属性值;
属性:属性值;
属性:属性值;
}
同时使用两个选择器来选中对应的语句
7、交集选择器(功能如其名)
语法:
选择器1选择器2选择器3{属性:属性值;
属性:属性值;
属性:属性值;
}
8、并集选择器(功能如其名)
语法:
h1,h3{ 属性:属性值;
属性:属性值;
属性:属性值;
}
9、关系选择器
①父子选择器:直接包含与被包含的两者之间关系;能用子元素选择器的不要用后代选择器
父元素>子元素{属性:属性值;
属性:属性值;
属性:属性值;
}
②后代选择器:直接或间接包含与被包含的两者之间关系;
祖先元素 ol后代元素{ 属性:属性值;
属性:属性值;
属性:属性值;
}
③兄弟关系:拥有共同的粑粑
选择下一个紧挨着的兄弟元素
语法:兄+紧挨着的兄弟{ 属性:属性值;
属性:属性值;
}
④选择所有的兄弟元素:
兄元素~弟元素 { 属性:属性值;
属性:属性值;
}