实例 3.21
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<meta charset="UTF-8">
<title>3月21作业</title>
<style>
p{
background-color: yellow;
}
#p1{
background-color: red;
}
.div1{
color: red;
}
div p{
background-color:goldenrod;
color: yellow;
}
/* div * {
background-color:red;
}
div > p{
background-color:goldenrod;
}*/
</style>
</head>
<body>
<p id="p1">3月21作业</p>
<p>3月21作业</p>
<div>
<p>3月21作业</p><br>
<p>3月21作业</p>
</div>
<div class="div1">3月21作业</div>
<div>3月21作业</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例 3.21_2
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<meta charset="UTF-8">
<title>属性选择器</title>
<style>
*[id]{
background-color: red;
}
/*根据属性名和值选择的类样式的元素*/
div[id="div3"]{
background-color: green;
}
/*选择属性中包含指定单词的类样式的元素*/
div[id ~="df1"]{
background-color: yellow;
}
/*选择以特定字母开头的类样式的元素*/
div[id ^="divdg"]{
background-color: red;
}
/*选择以特定字母结尾的类样式的元素*/
div[id $="f"]{
background-color: black;
}
/*选择属性值中包括指定字母的类样式的元素*/
div[id *="d1"]{
background-color: black;
}
</style>
</head>
<body>
<div id="div2">属性选择器</div>
<div id="div3">属性选择器</div>
<div id="div2">属性选择器</div>
<div id="div3">属性选择器</div>
<div id="divd df1">属性选择器</div>
<div id="df1">属性选择器</div>
<div id="divdg df2">属性选择器</div>
<div id="divdg d1f">属性选择器</div>
<div id="divdg d1fg">属性选择器</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
