這個例子比較明顯
<style>
:target
{
background-color: #e5eecc;
}
</style>
</head>
<body>
<p><a href="#news1">跳轉至內容 1</a></p>
<p><a href="#news2">跳轉至內容 2</a></p>
<p>請點擊上面的鏈接,:target 選擇器會突出顯示當前活動的 HTML 錨。</p>
<p id="news1"><b>內容 1...</b></p>
<p id="news2"><b>內容 2...</b></p>
<style>
:target
{
background-color: #e5eecc;
}
</style>
</head>
<body>
<p><a href="#news1">跳轉至內容 1</a></p>
<p><a href="#news2">跳轉至內容 2</a></p>
<p>請點擊上面的鏈接,:target 選擇器會突出顯示當前活動的 HTML 錨。</p>
<p id="news1"><b>內容 1...</b></p>
<p id="news2"><b>內容 2...</b></p>
2018-05-03
:root優先級高
:root{
background:green;
}
html{
background:red;
}
:root{
background:green;
}
html{
background:red;
}
2018-05-03
div {
width: 300px;
height: 200px;
background: red;
color:#fff;
margin: 20px auto;
animation: changecolor 5s linear infinite .2s ;
}
width: 300px;
height: 200px;
background: red;
color:#fff;
margin: 20px auto;
animation: changecolor 5s linear infinite .2s ;
}
2018-05-02
這樣的效果會好一點
.boxshadow-outset{
margin:18% auto;
width:100px;
height:100px;
box-shadow:4px 4px 6px 1px #666,
10px 10px 50px 10px #888 inset;
border-radius:50px;
transition:transform 0.5s;
}
.boxshadow-outset:hover {
transform: scale(1.4);
}
.boxshadow-outset{
margin:18% auto;
width:100px;
height:100px;
box-shadow:4px 4px 6px 1px #666,
10px 10px 50px 10px #888 inset;
border-radius:50px;
transition:transform 0.5s;
}
.boxshadow-outset:hover {
transform: scale(1.4);
}
2018-05-01
偽元素的優先級 大于非偽元素的優先級, :root > *>body 的優先級 :root(結構偽類選擇器)=HTML
???:root是偽類選擇器優先級大于body元素選擇器沒問題,但通配符選擇器*的優先級應該是低于元素選擇器body的吧,那么多的贊,難道我學了假的CSS?
???:root是偽類選擇器優先級大于body元素選擇器沒問題,但通配符選擇器*的優先級應該是低于元素選擇器body的吧,那么多的贊,難道我學了假的CSS?
2018-05-01