CSS三大基础选择器 2.类选择器
在页面当中，可能有一些元素的元素名并不相同，但是依然需要它们拥有相同的样式。如果使用之前的元素选择器来操作的话，就会显得非常繁琐，所以不妨换种思路来考虑这个事情。假如需要对页面中的<p>、<a>和<div>标签使用同一种文字样式，那么可以把这三个元素看成是同一种类型样式的元素，然后对它们进行归类操作。
在CSS中，使用类操作需要在元素内部使用class属性，而class的属性值就是为元素定义的“类名'
【例题】使用类选择器
01.为需要的元素添加class类名，代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.myTxt{
color:red;
font-size: 30px;
text-align: center;
}
.myA{text-decoration: none;}
</style>
</head>
<body>
<p>我是一行p标签文字</p>
<p><a class="myTxt myA" href="#">我是a标签内部的文字</a></p>
<div>div文字也和它们的样式相同</div>
</body>
</html>
02.
为当前类添加样式，代码如下:
<style type="text/css">
.myTxt{
color:red;
font-size: 30px;
text-align: center;
}
</style>
以上两段代码分别为需要改变样式的元素添加class类名，为需要改变的类添加CSS样式。这样，就可以同时为多个不同元素添加相同的CSS样式。这里需要注意的是，因为<a>标签天生自带下划线，所以在页面中<a>标签的内容还是会有下划线存在。如果对此很介意的话，可以单独为<a>标签多添加一个类名（一个标签可以存在多个类名，它们之间使用空格分隔），代码如下：
<p class="myTxt"><a class="myTxt myA" href="#"〉我是a标签内部的文字</a></p>
.myA{text-decoration: none;}
通过以上代码可以实现取消<a>标签下划线的目的，无下划线的效果如图所示。
湘公网安备:43011102000856号 
点击加载更多评论>>