发表于： 2019-06-23 23:51:19
1 806
今天完成的事件
了解到sass
@extend的用法 就是告诉类选择器继承别的类名下的属性值等代码如下：
.error {
border: 1px #f00;
background-color: #fdd;
}
.seriousError {
@extend .error;
border-width: 3px;
}
可以看到seriousError类就继承上面的error的属性值 而它展开就是这样的。
.seriousError{
border:1px #f00
background-color:#fdd;
}
seriousError{
border-width:3px;
}
也就是说可以直接使用它的属性而不用重新在写一边比如用到大量的flex布局居中，垂直居中 或者2边距相等可以使用@extend用法不用重复的写这些属性值节省代码量。
了解昨天的 > + ~符号代表这什么
>子元素选择器：
就是父类下面的子元素的属性值代码如下
div>p{ background-color:yellow;}
就是说在div父类下p元素的背景颜色是黄颜色，也就是说它的子元素的属性值
+ 相邻兄弟选择器
就是说可选择接在另一个元素后面且二者有相同父类元素。
代码如下：
div+p
{
background-color:yellow;
}
</style>
</head>
<body>
<h1>Welcome to My Homepage</h1>
<div>
<h2>My name is Donald</h2>
<p>I live in Duckburg.</p>
</div>
<p>My best friend is Mickey.</p>
<p>I will not be styled.</p>
div和p的父类是BODY 他们是同等级的。
~后续兄弟选择器
指定元素之后相邻的元素
代码如下
div~p{ background-color:yellow;}<div>
<p>段落 1。 在 div 中。</p>
<p>段落 2。 在 div 中。</p>
</div>
<p>段落 3。不在 div 中。</p>
<p>段落 4。不在 div 中。</p>
就说 DIV后面所有的p元素的背景颜色都是黄颜色。而div和p也都是同等级的、
返回列表
评论