<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性选择器</title>
<style>
*{
margin: 0;
padding: 0;
}
.big{
background-color: blue;
}
.outer{
width: 100px;
height: 100px;
border: 1px solid red;
}
/*选择div,并且有title属性的*/
[title]{
/*background-color: green;*/
}
[title=one]{
/*background-color: green;*/
}
[title^=t]{
/*background-color: green;*/
}
[title$=e]{
/*background-color: green;*/
}
[title*=o]{
/*background-color: green;*/
}
[title~=o]{
/*background-color: green;*/
}
[class~=big]{
margin: 10px;
}
</style>
</head>
<body>
<div class="outer" title="one o"></div>
<div class="outer big" title="two"></div>
<div class="outer" title="three"></div>
<div class="outer" title=""></div>
<div class="outer"></div>
<p title="pone">hello</p>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性选择器</title>
<style>
*{
margin: 0;
padding: 0;
}
.big{
background-color: blue;
}
.outer{
width: 100px;
height: 100px;
border: 1px solid red;
}
/*选择div,并且有title属性的*/
[title]{
/*background-color: green;*/
}
[title=one]{
/*background-color: green;*/
}
[title^=t]{
/*background-color: green;*/
}
[title$=e]{
/*background-color: green;*/
}
[title*=o]{
/*background-color: green;*/
}
[title~=o]{
/*background-color: green;*/
}
[class~=big]{
margin: 10px;
}
</style>
</head>
<body>
<div class="outer" title="one o"></div>
<div class="outer big" title="two"></div>
<div class="outer" title="three"></div>
<div class="outer" title=""></div>
<div class="outer"></div>
<p title="pone">hello</p>
</body>
</html>