測驗CSS中所有選擇器
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
<!--屬性選擇器-->
h1{
color: black;
}
<!--class選擇器-->
.wwwwwww{
color: blue;
}
<!--id選擇器-->
#rrrrrr{
color: green;
}
<!-- 后代選擇器，所有子類選擇器-->
body p{
background: red;
}
<!--子類選擇器，后一代選擇器-->
li>p{
background: green;
}
<!--兄弟選擇器，向下選擇一個-->
.active + p{
background: green;
}
<!--兄弟選擇器，向下選擇所有的兄弟-->
.active~p{
background: blue;
}
<!--偽類選擇器-->
ul li:first-child{
background: yellow;
}
a{
background: blue;
}
<!--屬性選擇器-->
<!--選擇所有有id的a標簽-->
a[id]{
background: yellow;
}
<!--選擇id為tttt的a標簽-->
a[id=tttt]{
background: green;
}
<!--選擇class內有itemes的a標簽-->
a[class*=itemes]{
background: red;
}
<!--選擇class以ttt開頭的a標簽-->
a[class^=ttt]{
background: #64ffff;
}
<!--選擇class以rrr結尾的a標簽-->
a[class$=rrr]{
background: #23f133;
}
</style>
</head>
<body>
<a id="tttt">asdfafasd</a>
<a id="tttt55">asdfafasd666</a>
<a id="tttt5555">asdfafasd8888</a>
<a >asdfafasd7676767</a>
<a >asdfafasd76767678787</a>
<a >aaaaaaaaaass</a>
<a >asdfafasd76767678787</a>
<a>ddddddddddddd</a>
<h1 >asdfffffffff</h1>
<h1 id="rrrrrr">222222</h1>
<h1>333333</h1>
<h1>444444</h1>
<h1>555555</h1>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li><p >p4</p></li>
<li><p>p5</p></li>
<li><p>p6</p></li>
</ul>
<p >p7</p>
<p>p8</p>
<p>p9</p>
<p>p71</p>
<p>p811</p>
<p>p91</p>
</body>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/549904.html
標籤：Html/Css