前端CSS3--各类选择器

最新推荐文章于 2023-01-06 15:46:25 发布

爆肝拳专业户

最新推荐文章于 2023-01-06 15:46:25 发布

阅读量176

点赞数

文章标签： css3

本文链接：https://blog.csdn.net/weixin_45981384/article/details/108208671

版权

一、标签选择器
标签选择器其实就是html代码中的标签。如右侧代码编辑器中的<html>、<body>、<h1>、<p>、<img>等。例如下面代码：

<style type="text/css">
h1{
  font-weight:normal;
  color:red;
}
</style>

二、类选择器
必须给标签添加上class属性，为标签设置class=“class名称”，class与"."匹配。

<html>
<style type="text/css">
.stress{
color:red;		/*类前面要加入一个英文圆点*/
}
</style>

<body>
<span class="stress">胆小如鼠</span>
</body>
</html>

三、ID选择器
使用ID选择器，必须给标签添加上id属性，为标签设置id=“ID名称”，、ID选择符的前面是井号（#）号，

<html>
<style type="text/css">
#AA{
color:red;		/*类前面要加入一个#*/
}
</style>

<body>
<span id="AA">胆小如鼠</span>
</body>
</html>

区别：
1、ID选择器只能在文档中使用一次。与类选择器不同，在一个HTML文档中，ID选择器只能使用一次，而且仅一次。而类选择器可以使用多次。
2、可以使用类选择器词列表方法为一个元素同时设置多个样式，ID选择器是不可以的。 如：

.stress{
    color:red;
}
.bigsize{
    font-size:25px;
}
<p>到了
<span class="stress bigsize">三年级</span>
下学期时，我们班上了一节公开课...
</p>

四、子选择器
子选择器，即大于符号(>),用于选择指定标签元素的第一代子元素。如右侧代码编辑器中的代码：

<style type="text/css">
.first>span
{
    border:1px solid red;
   /*添加边框样式（粗细为1px， 颜色为红色的实线）*/
}
</style>

<body>
<p class="first">三年级时，
<span>我还是一个<span>胆小如鼠</span>的小女孩</span>
</p>
</body>

在这里插入图片描述

五、后代选择器
包含选择器，即加入空格,用于选择指定标签元素下的后辈元素。如右侧代码编辑器中的代码：

<style type="text/css">
.first span{color:red;}
}
</style>
</head>
<body>
 <p class="first">
 <span>三年级时</span>，
 我还是一个<span>胆小如鼠</span>的小女孩，
 </p>
 </body>

在这里插入图片描述

总结：
子选择器(>)作用于元素的第一代后代，后代选择器(空格)作用于元素的所有后代。

六、通用选择器
使用一个（*）号指定，它的作用是匹配html中所有标签元素，如下使用下面代码使用html中任意标签元素字体颜色全部设置为红色：

<head>
    <style type="text/css">
    * {
        color: red;
        font-size:20px;
    }
    </style>
</head>

<body>
    <h1>勇气</h1>
    <p>三年级时，我还是一个胆小如鼠的小女孩</p>
</body>

在这里插入图片描述

七、伪类选择器
它允许给html不存在的标签（标签的某种状态）设置样式,现在比较常用的还是 a:hover 的组合: :hover{ }，比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色：

<style type="text/css">
a:hover{
    color:red;
    font-size:20px;
}
</style>
 
 <p class="first">三年级时，我还是一个
  <a>胆小如鼠</a>的小女孩
  </p>

八、分组选择器
为html中多个标签元素设置同一个样式时，可以使用分组选择符（，），如下代码为右侧代码编辑器中的h1、span标签同时设置字体颜色为红色：

<style type="text/css">
h1,span{color:red;
}

.first ,#second span{ 
    color:green;
}
</style>

<body>
    <h1>勇气</h1>
   <span>胆小如鼠</span>
</body>

总结：
选择器的优先级依次是:内联样式 > id选择器 > 类选择器 > 标签选择器 > 通配符选择器

我们在做网页代码的时，有些特殊的情况需要为某些样式设置具有最高权值，怎么办？这时候我们可以使用 !important来解决。
例如：

<style type="text/css">
p{color:red!important;}
p.first{color:green;}
</style>
</head>
<body>
    <h1>勇气</h1>
    <p class="first">三年级时</p>
</body>

在这里插入图片描述

样式的继承
CSS的某些样式是具有继承性的，那么什么是继承呢？继承是一种规则，它允许样式不仅应用于某个特定html标签元素，而且应用于其后代。比如下面代码：如某种颜色应用于p标签，这个颜色设置不仅应用p标签，还应用于p标签中的所有子元素文本，这里子元素为span标签。
例如：

 <style type="text/css">
p{color:red;}
p{border:1px solid red;}
</style>
</head>
<body>
    <h1>勇气</h1>
    <p class="first">三年级时</p>

在这里插入图片描述

爆肝拳专业户

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫