css 标签选择器、id选择器、类选择器实例

php中文网
发布: 2016-06-01 09:53:03
原创
3654人浏览过

1:标签选择器

标签选择器,是所有带有某种标签的都生效。这里以p为例,也就是所有的带有p标记的都会这样的样式

实例:选择所有

元素 :

<!DOCTYPE html>
<html>
<head>
<style>
p
{
background-color:yellow;
}
</style>
</head>
<body>

<h1>Welcome to My Homepage</h1>

<div>
<p id="firstname">My name is Donald.</p>
<p id="hometown">I live in Duckburg.</p>
</div>

<p>My best friend is Mickey.</p>

</body>
</html>
登录后复制

在线运行

多功能的日期时间选择器实例
多功能的日期时间选择器实例

日期时间选取,日历表格,日期选择器,日期选择

多功能的日期时间选择器实例 70
查看详情 多功能的日期时间选择器实例

立即学习前端免费学习笔记(深入)”;

 

2:id选择器

注意id选择器是唯一的,因为只有id="yy"的才有这种样式,而一个页面里元素的Id必须是唯一的,所以。。。你懂得id选择器以#开头用法是:id=""

实例:为 id="firstname" 元素添加指定样式:

<!DOCTYPE html>
<html>
<head>
<style>
#firstname
{
background-color:yellow;
}
</style>
</head>
<body>

<h1>Welcome to My Homepage</h1>

<div class="intro">
<p id="firstname">My name is Donald.</p>
<p id="hometown">I live in Duckburg.</p>
</div>

<p>My best friend is Mickey.</p>

</body>
</html>
登录后复制

在线运行

立即学习前端免费学习笔记(深入)”;

 

3:类选择器.

类选择器以.开头,只要把元素的class="" 就能表现为这种样式了用法是:class=""

实例:

<!DOCTYPE html>
<html>
<head>
<style>
.intro
{
background-color:yellow;
}
</style>
</head>

<body>
<h1>Welcome to My Homepage</h1>

<div class="intro">
<p>My name is Donald.</p>
<p>I live in Duckburg.</p>
</div>

<p>My best friend is Mickey.</p>

</body>
</html>
登录后复制

在线运行

立即学习前端免费学习笔记(深入)”;

相关标签:
css
最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移,垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是,许多工具可以让 Windows 保持平稳运行。

下载
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号