（2）选择器：class选择器、id选择器、关联选择器、组合选择器、伪元素选择器

最新推荐文章于 2023-08-07 17:18:06 发布

FixedStarHaHa

最新推荐文章于 2023-08-07 17:18:06 发布

阅读量983

点赞数

分类专栏： CSS 文章标签： css color

本文链接：https://blog.csdn.net/jiangshangchunjiezi/article/details/76512535

版权

CSS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

就是制定css要作用的标签，那个标签的名称就是选择器，意为选择哪个容器
（1）class选择器，使用的是标签中的属性。在一个网页中可以定义多个style
指定哪个类用”.”

<style>

   div{
       background-color:#F00;
       color:#FF9;
   }
   //制定哪个选择器，哪个类用这种格式
  div.haha{
       background-color:#3C9;
       color:#FF9;   
   }
   span.haha{
       background-color:#3C9;
       color:#FF9;   
   }
   </style>
    <!--若希望所有的选择器中带hehe的都是相同效果，可以用.hehe{},这样就能有效提高代码复用性-->
    <style>
    .hehe{
       background-color:#36F;
       color:#F69;
   }
   <!--.enen:是预定义样式，可以作用在任何选择器的类名为enen中，可以实现动态加载
   <!-- 比如开始的网页是一种显示，当点某个按钮或其他操作时，该网页会出现新的效果
   -->
</style>

<p class="hehe">这是一个段落2</p>

（2）id选择器就是标签中的id属性

<style type="text/css">

 div#qq{
     background-color:#F39;
     color: #FF3;
 }
 span#qq{
     background-color:#F39;
     color: #FF3;
 }
 </style>
 <style type="text/css">
 #pp{

     background-color:#0FC;
     color: #F00;
 }

 </style>

每个标签都定义了class属性和id属性，用于对标签进行标识，方便对标签进行操作。
通常id的取值在页面上是唯一的，因为该属性除了css使用，还可以被jsp使用。id通常都是为了标识页面中的一些特定区域使用的
优先级：标签选择器<类选择器

<!--若只写b则将页面的所有b标签全都改成了这种样式-->

<!--若只是对span中的b标签进行格式修改，用span+空格+b -->
span b{
       background-color:#F00;
       color:#FF9  
   }

<span >span<b>区域</b>1</span>

四、组合选择器
对多个选择器进行相同样式设定，选择器间用“，”隔开

//对.haha选择器和div中的b选择器进行样式修改
<style>
 .haha,div b{
     background-color:#0C0;
     color:#F00;
 }
</style>

五、伪元素选择器
格式：标签名：伪元素
（1）超链接
a:link 超链接未点击状态
a:hover 光标移动到超链接上的状态
a:active 点击超链接时的状态
a:visted 被访问后的状态
顺序：L-V-H-A
（超链接一般默认都有样式，例如下划线、点击后文字颜色改变，这些都可以自定义）

<style>
/*
未访问
*/
a:link{
    color:#906;
    text-decoration:none;
    font-size:18px;
}
 /*
 鼠标悬停
 */
 a:hover{
    color:#F00;
     font-size:24px;
     }
/*
点击效果
*/

 a:active{
     color:#0F0;
     font-size:36px;
 }
 /*
 访问后的效果
 */
 a:visted{
     color:#30F;
     text-decoration:line-through;
 }

</style>

</head>

<body>

<a href="http://www.sina.com.cn" target="_blank">伪元素选择器演示</a>

</body>

（2）
p:first-line 段落的第一行文本
p:first-letter段落中的第一个字母
:focus具有焦点的元素

<style>
p:first-letter{
    font-size:36px;
    color:#F00;

}
p:first-line{
    font-size:18px;
    color:#0F0;
}
input:focus{
    background-color:#F00;
}
</style>