css选择器

最新推荐文章于 2024-10-20 16:51:54 发布

jiaowxbx

最新推荐文章于 2024-10-20 16:51:54 发布

阅读量165

点赞数

文章标签： css

本文链接：https://blog.csdn.net/weixin_51333845/article/details/114603665

版权

css选择器

id选择器：HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 “#” 来定义。

<style>
#para1
{
	text-align:center;
	color:red;
} 
</style>
<p id="para1">Hello World!</p>

clss选择器：class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示

<style>
.center
{
	text-align:center;
}
</style>
<p class="center">段落居中。</p>

hover选择器：算是交互式的，一般是鼠标移上去回发生效果。
定义和用法：:hover在鼠标移到链接上时添加的特殊样式。
提示: :hover 选择器器可用于所有元素，不仅是链接。
比如说下拉菜单功能，鼠标移上去会显示菜单：

<!DOCTYPE html>
<html>
<head>
<title>下拉菜单实例|菜鸟教程(runoob.com)</title>
<meta charset="utf-8">
<style>
.dropdown {
  /*position: relative;*/
  /*display: inline-block;*/
}
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  padding: 12px 16px;
}
.dropdown:hover .dropdown-content {
  display:block
}
</style>
</head>
<body>

<h2>鼠标移动后出现下拉菜单</h2>
<p>将鼠标移动到指定元素上就能看到下拉菜单。</p>

<div class="dropdown">
  <span>鼠标移动到我这！</span>
  <div class="dropdown-content">
    <p>菜鸟教程</p>
    <p>www.runoob.com</p>
  </div>
</div>

</body>
</html>

在dropdown-content那里设置了display：none，也就是把这两行隐藏了，然后给dropdown添加了hover选择器，效果是display：block，变为块级元素，所以就形成了鼠标移过去显示菜单的效果。
4. visited选择器：
定义和用法
:visited向访问过的链接添加特殊的样式。
其实就是你没点他的时候，他的样子，比如说：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
a:link    {color:green;}
a:visited {color:blue;}
a:hover   {color:red;}
a:active  {color:yellow;}
</style>
</head>
<body>

<p>将鼠标移上并点击此链接: <a href="//www.runoob.com/">runoob.com</a></p>

</body>
</html>

现在我们看到的连接就是蓝色的，因为visited属性是蓝色的。
5. active选择器：
定义和用法
:active向活动的链接添加特殊的样式。
就是点击下去那一瞬间生效，比如说：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
a:link    {color:green;}
a:visited {color:blue;}
a:hover   {color:red;}
a:active  {color:yellow;}
</style>
</head>
<body>

<p>将鼠标移上并点击此链接: <a href="//www.runoob.com/">4399.com</a></p>

</body>
</html>

点击下去那一瞬间，连接会变成黄色，因为active属性是黄色。
6. link选择器（说实话没看懂）
定义和用法
:link向未访问的链接添加特殊的样式。
放个例子吧，或许以后就懂了

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
a:link
{
background-color:blue;
}
</style>
</head>
<body>

<a href="//www.runoob.com/">runoob.com</a>
<a href="//www.google.com">Google</a>
<a href="//www.wikipedia.org">Wikipedia</a>

<p><b>注意:</b>:link选择样式链接到你还没有去过的链接。</p>

</body>
</html>