博客核心内容:
①标签(名字)选择器
②ID选择器
③类选择器
④通配符选择器
⑤优先级就近原则,同权重情况下样式定义最近者为准
⑥多元素选择器
⑦后代选择器(.outer p)==>向下找
⑧子代选择器(.outer > p) ==>向下找
⑨相邻选择器(.outer + p) ==>向下找
⑩兄弟选择器(.outer ~ p) ==>向下找
⑾属性选择器(属性既可以是自带的,也可以是用户自定义的 [item=”item1”])
⑿并且选择器
⒀class=”item1 item2”的应用
⒁伪类选择器
⒂选择器的优先级
⒃
⒄
1、标签(名字)选择器 |
运行结果:
2、ID选择器 |
运行结果:
3、类选择器 |
运行结果:
4、通配符选择器 |
运行结果:
5、优先级就近原则,同权重情况下样式定义最近者为准 |
示例1:
运行结果:
6、多元素选择器 |
运行结果:
7、后代选择器(.outer p) |
运行结果:
8、子代选择器 |
运行结果:
9、相邻选择器 |
运行结果:
10、兄弟选择器 |
运行结果:
11、属性选择器 |
带有A属性的标签:
[A]{
background-color: red;
}
A属性等于DIV1的标签:
[A="DIV1"]{
background-color: red;
}
A属性等于DIV1的p标签:
p[A="DIV1"]{
background-color: red;
}
带有A属性的p标签:
p[A]{
background-color: red;
}
示例程序1:(标签自带的属性)
运行结果:
示例程序2:(用户自定义的属性)
运行结果:
12、并且选择器 |
运行结果:
13、class=”item1 item2”的应用 |
运行结果:
14、伪类选择器 |
anchor伪类:专门用于控制链接的显示效果。
a:link,用于定义链接的常规状态。
a:hover,当鼠标放在链接上时产生的状态。
before after伪类:适用于所用标签,主要用于进行调控。
:before p:before 在每个<p>元素之前插入内容
:after p:after 在每个<p>元素之后插入内容
例:p:before{content:"hello";color:red;display: block;}
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 80px;
height: 25px;
border: solid;
}
a:link{
color: blue;
}
/*anchor伪类只针对a标签有效果:通过hover可以控制鼠标悬浮时的状态*/
a:hover{
color: red;
}
/*通过这种方式主要是为了调控:向下隔一行,而并不是为了添加某些文字*/
/*下面这种写法并不是增加了一个标签,只不多是为标签增加了一个样式*/
p:after{
content:"hello p";
color: red;
display: block;
background-color: wheat;
}
</style>
</head>
<body>
<p>zhangmingyang</p>
<div><a href="" >Hello Word</a></div>
</body>
</html>
效果:
示例:需求:当鼠标悬浮在box区域的时候,都让div1标签区域内的颜色变红。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*<!--需求:当鼠标悬浮在box区域的时候,都让div1标签区域内的颜色变红-->*/
/*当我们的鼠标悬浮在盒子上面的时候:将对div1产生影响*/
/*悬浮所在的标签对可能产生影响的标签:标签可能不一样*/
/*后面要操作处理的标签必须是前面悬浮标签的一个子标签,这是非常重要的!!!*/
.box:hover .div1{
background-color: blue;
}
.box{
width: 100px;
border: solid;
}
.div1{
height: 100px;
width: 100px;
background-color: wheat;
}
.div2{
height: 100px;
width: 100px;
background-color: red;
}
</style>
</head>
<body>
<div class="box">
<div class="div1">fdsf</div>
<div class="div2">fsfds</div>
</div>
</body>
</html>
运行结果:
在悬浮区外的时候:
悬浮的时候:
15、选择器的优先级 |
标签选择器:1
class选择器:10
id选择器:100
内嵌的优先级相当于:1000
<p style="color:gainsboro;">new P</p>
优先级就近原则:同权重情况下样式定义最近者为准(下面的style的定义为准),即相同优先级按照
顺序。
注意:有!important声明的规则高于一切。
.new p{
color: brown !important;
}
可继承的标签:font-size font-family color这些与字体相关的属性。
(子类标签会继承父类标签的相关字体属性),即有些属性可以继承,但是有些属性并不能够继承,只能继承与
文本相关的属性。
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*<!--在下面我们用三种不同的选择器对标签进行查找和操作-->*/
#d2{
color: blue;
}
/*权重:20*/
.outer .div2{
color: red;
}
/*权重21:三层查找*/
.outer .div2 p{
color: red;
}
/*权重:20*/
.div2 .p1{
color: yellow;
}
</style>
</head>
<body>
<div class="outer">
<div class="div1" id="d1">DIV1</div>
<div class="div2" id="d2">
<p class="p1" id="p1">PPP</p>
</div>
</div>
</body>
</html>