选择器: 选择标签的,选择出标签以后给标签加样式
常用的选择器6+1种
一.标签选择器
语法:
标签名 {
样式规则
}
例如:
p {
样式规则
}
作用: 所有的p标签被选中 套用后面的样式
二.id选择器
1.语法
#id名 {
样式规则
}
例如:
#myId1 {
样式规则
}
作用: id值为myId1的元素会被选中,套用后面的样式
2.使用
<p id="myId1"></p>
三.类选择器
如果想把同一个样式,给多个元素使用 需要使用类选择器
1. 不带标签名的
语法:
.类名 {
}
例如:
.myClass1 {
样式规则
}
作用: class属性为myClass1的所有标签被选中
使用
<p class="myClass1">我是p标签</p>
2.带标签名
标签名.类名 {
}
例如:
p.myClass1 {
样式规则
}
四.组合选择器
选择器1,选择器2,...选择器n {
样式规则
}
选择器1、选择器2...选择器n 所有的选择器 选用的元素都会套用后面的样式
解决了代码冗余问题
五.通配符选择器
* {
}
作用: 该页面中所有的元素都会被选中,套用后面的样式
六.子代选择器和后代选择器
1. 子代
儿子节点
p>div {
样式规则
}
#myId1>.myClass{
}
2.后代选择器
后代: 儿子和子孙节点....
p div{
}
*************************注释*********************************
CSS没有单行注释一说 所有的注释 都是/**/
*******************************1 伪类*************************************
前6种选择器 都是作用在标签上
伪类: 不是作用在标签上的,作用在标签的某个具体的属性上....
超链接的伪类
1. 未访问时的状态
a:link {
color: green;
text-decoration: none;;
}
2. 访问后的状态
a:visited {
color:pink;
text-decoration: none;;
}
3. 鼠标悬停
a:hover {
color:red;
font-size:30px;
text-decoration: none;;
}
4. 激活状态(从点击鼠标左键开始 到松开左键之间的状态)
a:active {
color:blue;
text-decoration: none;;
}
****************************面试题:如何给一个标签套用多个类选择器? ***********************************
<style type="text/css">
.myClass2 {
font-size:30px;
color:green;
}
.myClass1 {
background-color:#000000;
color:red;/*CSS文件中 后定义的优先*/
}
</style>
<p class="myClass1 myClass2"></p>
如果两个样式中定义了相同的属性color, 哪个起作用??
CSS文件中 后定义的优先, 而不是看class属性后定义的...
****************************选择器的优先级***********************************
id>类选择器>标签选择器