CSS的基本选择器和CSS扩展选择器

最新推荐文章于 2023-03-31 18:20:03 发布

super晓权

最新推荐文章于 2023-03-31 18:20:03 发布

阅读量203

点赞数

分类专栏： Web技术文章标签： css HTML 选择器

本文链接：https://blog.csdn.net/qq_38230811/article/details/83188285

版权

Web技术专栏收录该内容

33 篇文章 4 订阅

订阅专栏

CSS的基本选择器

1标签选择器

使用标签名作为选择器名称

选择并设置所有 <p> 元素的样式：

<html>
<head>
<style>
p
{
background-color:yellow;
}
</style>
</head>
<body>
<h1>欢迎来到我到的主页</h1>
<div class="intro">
<p>我是唐老鸭。</p>
<p>我住在 Duckburg。</p>
</div>
<p>我最好的朋友是米老鼠。</p>
</body>
</html>

2 class选择器

选择并设置 class="intro" 的元素的样式：

<html>
<head>
<style>
.intro
{
background-color:yellow;
}
</style>
</head>
<body>
<h1>欢迎来到我到的主页</h1>
<div class="intro">
<p>我是唐老鸭。</p>
<p>我住在 Duckburg。</p>
</div>
<p>我最好的朋友是米老鼠。</p>
</body>
</html>

3 id选择器

为 id="firstname" 的元素设置样式：

<html>
<head>
<style>
#firstname
{
background-color:yellow;
}
</style>
</head>
<body>
<h1>欢迎来到我到的主页</h1>
<div class="intro">
<p id="firstname">我是唐老鸭。</p>
<p>我住在 Duckburg。</p>
</div>
<p>我最好的朋友是米老鼠。</p>
</body>
</html>

优先级

style>id>class>标签

CSS扩展选择器

1关联选择器

设置嵌套标签的样式

选择并设置位于 <div> 元素内部的每个 <p> 元素的样式：

<html>

<head>

<style>

div p

{
background-color:yellow;
}
</style>
</head>
<body>
<h1>欢迎来到我到的主页</h1>
<div class="intro">
<p>我是唐老鸭。</p>
<p>我住在 Duckburg。</p>
</div>
<p>我最好的朋友是米老鼠。</p>
</body>

</html>

2组合选择器

不同的标签具有相同的样式选择并设置所有 <h1> 样式和所有 <p> 元素的样式：

<html>
<head>
<style>
h1,p
{
background-color:yellow;
}
</style>
</head>
<body>
<h1>欢迎来到我到的主页</h1>
<div class="intro">
<p>我是唐老鸭。</p>
<p>我住在 Duckburg。</p>
</div>
<p>我最好的朋友是米老鼠。</p>
</body>
</html>

3伪元素选择器

:link

选择未被访问的链接，并设置其样式：

实例

<head>
<style>
a:link
{
background-color:yellow;
}
</style>
</head>
<body>
<a href="http://www.w3school.com.cn">W3Sschool</a>
<a href="http://www.google.com">Google</a>
<a href="http://www.wikipedia.org">Wikipedia</a>
<p><b>注释：</b>:link 选择器为未被访问过的链接设置样式。</p>
</body>
</html>

:visited	a:visited	选择所有已被访问的链接。
:active	a:active	选择活动链接。
:hover	a:hover	选择鼠标指针位于其上的链接

更多选择器：

http://www.w3school.com.cn/cssref/css_selectors.asp

super晓权

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS的基本选择器和CSS扩展选择器

CSS的基本选择器1标签选择器使用标签名作为选择器名称选择并设置所有 &lt;p&gt; 元素的样式： &lt;html&gt;&lt;head&gt;&lt;style&gt;p{background-color:yellow;}&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;h1&gt;欢迎来到我到的
复制链接

扫一扫