html-CSS选择器(每天都要学习噢)

元素选择器、类选择器、ID选择器...

1、元素选择器—标记名称命名

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>元素选择器</title>
<style>
input{
color: blueviolet;
height: 30px;
}

</style>
</head>
<body>
<input type="button" value="按钮">
<br/>
<button>按钮</button>
</body>
</html>

2、类选择器—以.开头、自定义命名

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>类选择器</title>
<style>
.sname{
color: blueviolet;
height: 30px;
}

</style>
</head>
<body>
<input class="sname" type="button" value="按钮">
<br/>
<input type="button" value="按钮">
</body>
</html>

3、ID选择器—以#开头、自定义命名

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ID选择器</title>
<style>
#sname{
color: blueviolet;
height: 30px;
}

</style>
</head>
<body>
<input id="sname" type="button" value="按钮">
<br/>
<input type="button" value="按钮">
</body>
</html>

4、包含选择器

 例如:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>包含选择器</title>
<style>
h2 p span{
color: red;
}

</style>
</head>
<body>
<h2>
h标签
<p>
h标签里的p标签
<span>h标签里的p标签里的span标签</span>
</p>
</h2>
</body>
</html>

看一下页面效果:

attachments-2021-04-8aCE2dDE606ef12097934.png

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>包含选择器</title>
<style>
h2 span{
color: red;
}

</style>
</head>
<body>
<h2>
<span>h2标签里的span标签</span>
</h2>
<span>span标签</span>
</body>
</html>

看一下页面效果:

2172656-20210408162501245-1506074176.png

5、组合选择器—对不同的标记进行相同样式属性的设置

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>组合选择器</title>
<style>
h2,span{
color: red;
}

</style>
</head>
<body>
<h2>h2标签</h2>
<h3>h3标签</h3>
<span>span标签</span>
</body>
</html>

看一下页面效果:

2172656-20210408162731332-1959531379.png

6、父子选择器—用大于号作为选择器分隔符,样式只能作用在子选择器上

例如:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>父子选择器</title>
<style>
h2>span{
color: blue;
}

</style>
</head>
<body>
<h2>h2标签 <span>h2标签中的span标签</span></h2>
<h2>h2标签<p>h2标签中的p标签 <span>h2标签中的 p标签中的 span标签</span></p></h2>
</body>
</html>

看一下页面效果:

attachments-2021-04-ctuNIz4F606ef26383d6f.png

7、相邻选择器—用加号作为选择器的分隔符-样式作用在紧接某一个元素后的元素,并且二者有相同的父元素

例如:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>相邻选择器</title>
<style>
h2+span{
color: blue;
}

</style>
</head>
<body>
<h2>h2标签1</h2>
<h2>h2标签2</h2>
<span>span标签1</span>
<span>span标签2</span>
</body>
</html>

看一下页面效果:

2172656-20210408164013678-981237603.png

8、属性选择器—对带有指定属性的元素进行样式设置

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性选择器</title>
<style>
input[type]{
color: red;
}

</style>
</head>
<body>
<input type="button" value="按钮">
<input placeholder="输入框">
</body>
</html>

看一下页面效果:

2172656-20210408164552088-1229189417.png

9、通用选择器—由*表示,匹配所有可用元素

 例如:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>通用选择器</title>
<style>
*{
color: red;
}
</style>
</head>
<body>
<input type="button" value="按钮">
<h2>h2标签</h2>
<span>span标签</span>
</body>
</html>

看一下页面效果:

2172656-20210408164819928-26745440.png

  • 发表于 2021-04-08 19:44
  • 阅读 ( 725 )
  • 分类:测试开发

你可能感兴趣的文章

相关问题

0 条评论

请先 登录 后评论
anne
anne

7 篇文章

作家榜 »

  1. admin 10 文章
  2. anne 7 文章
  3. joelee 2 文章
  4. chenchen 1 文章
  5. CJ777 1 文章
  6. harry 1 文章
  7. AlLTyjrDKb 0 文章
  8. virmMUTzPANJXY 0 文章