資訊專欄INFORMATION COLUMN
?
?
?
?
首發(fā)日期：2018-05-01
?
層疊性主要遵循的原則是就近原則，在不考慮優(yōu)先級的情況下，在多個樣式中最終生效的樣式是離標簽最近的樣式。【這里要注意只覆蓋同樣的不可重復的樣式屬性，不會覆蓋不重復的屬性，不重復的屬性會合并下來（包括那些允許設置多個值的屬性也會合并，比如text-shadow）?！?/p>
?
?
依據(jù)層疊性的就近原則，第一個div的背景色為藍色，第二個div的背景色為綠色。
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Documenttitle>
<style>
div{
background-color: red;
}
div{
background-color: blue;
}
style>
head>
<body>
<div>123div>
<div style="background-color: green;">123div>
body>
html>
<title>Documenttitle>
<style>
div{
font-size:70px;
background-color: #CCC;
color:skyblue;
}
style>
head>
<body>
<div>
<p>p繼承div的樣式p>
div>
body>
html>
<title>Documenttitle>
<style>
/* 從上到下，依次注釋選擇器來測試優(yōu)先級 */
div{
color:green!important;
}
#id1{
color:red;
}
.class{
color: blue;
}
div{
color:purple;
}
style>
head>
<body>
<div>!import優(yōu)先級div>
<div style="color:red">行內(nèi)樣式優(yōu)先級div>
<div id="id1">id選擇器優(yōu)先級div>
<div class="c1">類選擇器優(yōu)先級div>
<div>標簽選擇器優(yōu)先級div>
body>
html>
? 上面的規(guī)則!important和行內(nèi)樣式毫無疑問，但如果多個選擇器混雜來定義樣式的時候如何判斷他們的優(yōu)先級？答案是依據(jù)權(quán)重來判斷。 ? 權(quán)重不同時，權(quán)重大的生效： ? ? ?權(quán)重計算方法【可以稱為是css的特異性】：
<title>Documenttitle>
<style>
div .p1{
background-color:blue;
}
p.p1{
background-color:green;
}
style>
head>
<body>
<div>
<p class="p1">123p>
div>
body>
html>
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Documenttitle>
<style>
p.p1:first-child{
background-color:green;
}
div .p1{
background-color:blue;
}
style>
head>
<body>
<div>
<p class="p1">123p>
div>
body>
html>
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/2309.html
摘要：給大家補充一點通配符是不參與權(quán)重計算的，因為通配符的權(quán)重是，而權(quán)重只計算，類，標簽，將來還有一種，到后面說。練習直接選中和間接選中的，必然要聽直接選中的。練習直接選中一共有兩個，直接比較這兩個直接選中的權(quán)重大小，聽從權(quán)重大的。給大家補充一點：通配符是不參與權(quán)重計算的，因為通配符的權(quán)重是0，而權(quán)重只計算id，類，標簽，將來還有一種，到后面說。 練習1 直接選中和間接選中的，必然要聽直接選中的...
摘要：一基本選擇器二后代選擇器子元素選擇器三兄弟選擇器四交集選擇器與并集選擇器五序列選擇器六屬性選擇器七偽類選擇器八偽元素選擇器九三大特性一基本選擇器選擇器作用根據(jù)指定的名稱，在當前界面中找到對應的唯一一個的標簽，然后設置屬性格式名稱屬性值注意點 一、 基本選擇器 二、 后代選擇器、子元素選擇器 三、 兄弟選擇器 四、 交集選擇器與并集選擇器 五、 序列選擇器 六、 屬性選擇器 七、 偽類選擇器 ...
摘要：樣式的權(quán)重可以疊加一般來說行內(nèi)標簽選擇器類標簽標簽選擇器通配選擇器沒有權(quán)重背景半透明的設置，，，最后一個參數(shù)是透明度取值范圍在之間注意背景半透明是指盒子背景半透明，盒子里面的內(nèi)容不受影響。關(guān)于行內(nèi)元素（補充一點） 行內(nèi)元素只能容納文本或其他行內(nèi)元素。（a特殊a里面可以放塊級元素） 例子： ? 關(guān)于行高tip: 選擇器的嵌套層級不應大于3級，位置靠后的限定條件應盡可能的精確。 ?屬性定義必須...
摘要：未來一個大的趨勢就是前端開發(fā)的效果，正無限逼近原生效果同時一些大廠也在紛紛提前布局了，之前驚艷四方的天貓造物節(jié)淘寶造物節(jié)風靡朋友圈的怎么做的如果我們要在這波浪潮上取得先機，那么就必須提前學習。我個人想學習的框架是天貓的。 面向2018年，我覺得前端有這么三個方向可以突破 前端邏輯層（包括三大框架，webpack，前端數(shù)據(jù)管理） 前端交互層（包括css3，canvas，svg，vr...
閱讀 4295·2022-09-16 13:49
閱讀 1430·2021-11-22 15:12
閱讀 1556·2021-09-09 09:33
閱讀 1064·2019-08-30 13:15
閱讀 1763·2019-08-29 15:30
閱讀 709·2019-08-27 10:52
閱讀 2674·2019-08-26 17:41
閱讀 1935·2019-08-26 12:11
