HTML代码如下:
<!DOCTYPE html>
<html>
<head>
<title>我的HTML代码</title>
<style type="text/css">
p{
background-color: pink
}
</style>
</head>
<body>
<div class="box">
<div>首行元素</div>
<p class="line1">1. 数学成绩:100分</p>
<p class="line1">2. 语文成绩:200分</p>
<p id="line3">3. 英语成绩:150分</p>
</div>
<p>4. 科学成绩:99分</p>
<form>
<input type="text" name="uesrname">
<input type="text" name="password">
</form>
</body>
</html>
1.根据标签的名字选择,示例代码如下:
<style type="text/css">
p{
background-color: pink
}
</style>
2.根据类名选择,要在类名前面加一个点“.”,实例代码如下:
<style type="text/css">
.line1{
background-color: pink
}
</style>
3.根据id选择,要在id前面加一个“#”号,实例代码如下:
<style type="text/css">
#line3{
background-color: pink
}
</style>
4.查找子孙元素,那么要在子孙元素中间有一个空格,那么实例代码如下:
<style type="text/css">
#box p{
background-color: pink
}
</style>
5.直接查找子元素,那么要在父元素中间有一个>,实例代码如下:
<style type="text/css">
#box > p{
background-color: pink
}
</style>
6.根据属性的名字进行查找,那么应该先写标签名字,然后再中间中括号写属性的值,实例代码如下:
<style type="text/css">
input[name="username"]{
background-color: pink
}
</style>
7.在根据类型或者id进行查找到的时候,如果还要标签名进行过滤,那么可以在类或者id前面加上标签名字,实例代码如下:
<style type="text/css">
div.line1{
background-color: pink
}
</style>