<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
<!-- 方法一:用id的形式单独的对每一个标签设置属性 -->
#p1{
font-size: 30px;
color: green;
}
#p2{
color: green;
text-decoration: underline;
}
#p3{
font-size: 30px;
text-decoration: underline;
}
<!-- 方法二:创建一个类,把相同的属性放进这个类中,等标签需要修改时自己继承该类 -->
.lg{
font-size:30px; #为p1与p3中的30px创建了一个类,p1,p3需要用时直接继承即可
}
.lv{
color:green; # 单独为p1与p2中的绿色字体创建了一个类,这样避免了需要重复编写绿色字体这行代码
}
.un{
text-decoration: underline; # 为p2与p3中的下划线属性创建了一个类,p2,p3要用时可以直接继承,简化了代码
}
<!-- 后代选择器-->
.father ul li p{
color: red;
} # 会选中father类下的ul标签中嵌套着的li标签中的p标签,精确的把'wusir'进行了定位
<!-- 子代选择器-->
.father2>p{
color: red;
} # 使用>表示子代选择器。比如div>p,仅仅表示的是当前div元素选中的子代(不包含孙子....),也即选中的是alex,不会选中wusir.
<!-- 组合选择器-->
div,p,a{
color:red;
} # 同时选中div,p和a标签
<!-- 交集选择器-->
div{
font-size: 30px;
}
.active{
color: green;
}
div.active{
text-decoration: underline;
} # 使用.表示交集选择器。第一个标签必须是标签选择器，第二个标签必须是类选择器 语法：div.active
<!-- 属性选择器-->
form input[type='text']{
} #会选中form标签中所有的input标签,中type属性为'text'的那个input标签,也即type='password'的那个input不会被选中
<!-- 伪类选择器-->
伪类选择器一般只会用在超链接a标签中，使用a标签的伪类选择器，我们一定要遵循"爱恨准则" LoVe HAte(link,visited,hover,active)
(注意了,span标签中也能用一个hover伪类选择器,其他的标签都不能用这些伪类选择器)
/*没有被访问的a标签的样式*/
.box ul li.item1 a:link{
color: #666;
}
/*访问过后的a标签的样式*/
.box ul li.item2 a:visited{
color: yellow;
}
/*鼠标悬停时a标签的样式*/
.box ul li.item3 a:hover{
color: green;
}
/*鼠标摁住的时候a标签的样式*/
.box ul li.item4 a:active{
color: yellow;
}
<!-- 伪元素选择器-->
/*设置第一个首字母的样式*/
p:first-letter{
color: red;
font-size: 30px;
display:none;# display属性会隐藏元素,但不会占位置
visibility:hidden;# visibility属性会隐藏元素,且会占位置
}
/* 在....之前 添加内容 这个属性使用不是很频繁 了解 使用此伪元素选择器一定要结合content属性*/
p:before{
content:'alex';
}
/*在....之后 添加内容，使用非常频繁 通常与咱们后面要讲到布局 有很大的关联（清除浮动）*/
p:after{
content:'&';
color: red;
font-size: 40px;
}
<!-- 科普属性知识-->
.box{
display:none;# display属性会隐藏元素,但不会占位置
visibility:hidden;# visibility属性会隐藏元素,且会占位置
}
.father:hover .child{
display:block;# 和none属性相反,当你点击它的时候就会显示元素.这种用父类嵌套子类,以求当鼠标移动到父类标签内容上时,显示出子类
内容的方法,可比js.
}
.box2{
/*当你要求这个盒子一定是块级标签,且不在页面中占位置时,可以用以下结构来实现,这个需求未来与布局有很大关系*/
display: block; #实现当点击该标签内容时才显示内容
visibility: hidden; #实现隐藏该盒子元素的功能
height:0; #把visibility所占的位置高给设为0,这样就可简便使visibility所占的空间给清零
}
<!-- css的继承性和层叠性-->
继承性: color,text-xxx,font-xxx,line-xxx的属性是可以继承下来的.盒模型的属性属性是不可以继承下来的.
a标签有特殊情况: 设置a标签的字体颜色,一定要选中a标签,不能使用继承性.
层叠性: 与权重有关,谁的权重越大就会显示谁的样式
如何看权重: 数数选择器 行内 > id > class > 标签,选择器为id的权重最大,它规定的样式必定会覆盖其他选择器规定的元素.
继承来的属性权重为0,跟选中的标签没有可比性.
#father1 #father2 #father3{
color:red;
} # 通过继承性使得p标签中内容为红色
#father1 .box2 .box3 p{
color:green;
} # 通过精确定位到p标签,使得p标签中内容为绿色
结果为:绿色
因为第一个red颜色,是p标签继承过来的属性,其权重默认为0.第二个为精确定位,权重为121,因此权重最大,显示绿色.
如果都是继承来的属性,就近原则,谁更深选择谁
如果都一样深,则再去比权重.
如果权重又都一样,则以后设置的为主.
</style>
</head>
<body>
<!-- 可把标签中想要修改的相同属性放进一个类中,这样在调用时可以简化你的代码-->
<p id="p1" class="lg lv">alex</p> #继承了lg与lv俩类的属性
<p id="p2" class="lv un">日天</p> #继承了lv与un俩类的属性
<!--后代选择器-->
<div class="father">
<p>alex</p>
<ul>
<li>
<p>wusir</p> #通过后代选择器对wusir进行了精确定位
</li>
</ul>
</div>
<!--子代选择器-->
<div class="father2">
<p>alex2</p>
<div class="content">
<p>wusir</p>
</div>
</div>
<!--组合选择器-->
<div class="father3">alex</div>
<p>日天</p>
<a>wusir</a>
<!--交集选择器-->
<div class="active">alex</div>
<!--属性选择器-->
<form action="">
<input type="text">
<input type="password">
</form>
<!--继承来的属性,权重为0-->
<div class="box1" id="father1">
<ul class="box2" id="father2">
<li class="box3" id="father3">
<p class="box4" id="child">猜猜我的颜色</p>
</li>
</ul>
</div>
</body>
</html>