CSS的五種選擇器
阿新 • • 發佈:2018-12-25
元素選擇器
格式:標籤名{
屬性1:屬性值1;
屬性2:屬性值2;
屬性3:屬性值3;
}
例項:h1{
color: #F00;
font-size; 50px;
}
<h1>元素選擇器</h1>
ID選擇器
格式:#ID{
屬性1:屬性值1;
屬性2:屬性值2;
屬性3:屬性值3;
}
例項:#demo1{
color: #0F0;
}
<h1>ID選擇器</h1>
類選擇器
格式:類名{
屬性1:屬性值1;
屬性2:屬性值2;
屬性3:屬性值3;
}
標籤.類名{
屬性1:屬性值1;
屬性2:屬性值2;
屬性3:屬性值3;
}
例項:.myClass{
font-size: 25px;
}
<h1 class="myClass">類選擇器</h1>
屬性選擇器
格式:例項:標籤名[標籤屬性='標籤屬性值']{ 屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }
<style>
input[type="text"]{
background-color: yellow;
}
input[type="password"]{
background-color: green;
}
</style>
包含選擇器
格式:父標籤 後代標籤{
屬性1:屬性值1;
屬性2:屬性值2;
屬性3:屬性值3;
}
例項:<style> #d1 div{ color: red; } </style>