荐 超详细讲解CSS各类选择器
程序员文章站
2022-07-02 15:27:20
作者:浪子花梦,一个有趣的程序员 ~此文将详细的讲解CSS / CSS3 中各类选择器的使用,希望您能够喜欢,记得点赞哟 ^ _ ^各类选择器如下所示:标签选择器分组选择器id 选择器类选择器结合元素选择器多类选择器属性选择器后代选择器子元素选择器相邻兄弟选择器各种选择器的使用并不难,大家不用担心记不住这类问题哈 O(∩_∩)O . . .标签选择器1)html 代码如下:
标题1
2)css 代码如下:/* 标签选择.....
作者:浪子花梦
,一个有趣的程序员
~
此文将详细的讲解CSS / CSS3 中各类选择器的使用,希望您能够喜欢,记得点赞哟 ^ _ ^
各类选择器如下所示:
- 标签选择器
- 分组选择器
- id 选择器
- 类选择器
- 结合元素选择器
- 多类选择器
- 属性选择器
- 后代选择器
- 子元素选择器
- 相邻兄弟选择器
各种选择器的使用并不难,大家不用担心记不住这类问题哈 O(∩_∩)O . . .
标签选择器
1)html 代码如下:
<h1>标题1</h1>
2)css 代码如下:
/* 标签选择器 */
h1{
color: red;
}
3)效果如下:
分组选择器
1)html 代码如下:
<h2>标题2</h2>
<h3>标题3</h3>
2)css 代码如下:
h2, h3{
color: blue;
}
3)效果如下:
注意:我们可以使用通配符 * 来指定默认的效果,如下所示:
*{
font-size: 50px;
}
效果如下:
类选择器
1)html 代码如下:
<p class="divid">Hello, World!</p>
2)css 代码如下:
.divid{
color: coral;
}
3)效果如下:
类选择器是以 . 开头,下面我们会介绍 id选择器,是以 # 开头的,不要混淆了. . .
结合元素选择器
1)html 代码如下:
<div class="divid">Hello, World!</div>
<p class="divid">Hello, World!</p>
2)css 代码如下:
p.divid{ /* 指定元素 */
color: cyan;
}
3)效果如下:
多类选择器
1)html 代码如下:
<div class="c1">Hello, World!</div>
<div class="c2">Hello, World!</div>
<div class="c1 c2">Hello, World!</div>
2)css 代码如下:
.c1{
color: darkorchid;
}
.c2{
font-size: 30px;
font-weight: bold;
}
.c1.c2{
font-family: monospace;
font-style: italic;
}
3)效果如下:
多类选择器保留其它的类的特性 . . .
id 选择器
1)html 代码如下:
<div id="divid"></div>
2)css 代码如下:
#divid{
width: 300px;
height: 300px;
position: relative;
top: 300px;
left: 300px;
background-color: cyan;
border-radius: 40%;
}
3)效果如下:
属性选择器
1)html 代码如下:
<!-- 属性选择器 -->
<!-- 1) -->
<p title="">Hello, World!</p>
<!-- 2) -->
<a href="https://me.csdn.net/weixin_42100963">个人博客</a>
<!-- 3) -->
<p title="huameng">Hello, World!</p>
<!-- 4) -->
<p title="t">Hello, World!</p>
<p title="tit">Hello, World!</p>
<p title="title">Hello, World!</p>
<p title="title huameng">Hello, World!</p>
<p title="tttle">Hello, World!</p>
2)css 代码如下:
/* 属性选择器 */
[title]{
color: darkseagreen;
font-size: 30px;
}
[href="https://me.csdn.net/weixin_42100963"]{
font-family: serif;
color: darkseagreen;
font-size: 30px;
}
[title="huameng"]{
color: deeppink;
font-size: 50px;
}
[title~="title"]{
color: red;
font-size: 30px;
}
3)效果如下:
注意一下第4点的情况
后代选择器
1)html 代码如下:
<p>huameng <strong>is a <i>hagagag</i> ge</strong>shuaige</p>
2)css 代码如下:
p i{
color: slateblue;
}
3)效果如下:
后代选择器直接可以找出它的儿子类
子元素选择器
1)html 代码如下:
huameng is a hagagag geshuaige
2)css 代码如下:/* 一层一层的找,比较废物 */
p>strong>i{
color: springgreen;
}
3)效果如下:
需要一层一层的找
相邻兄弟选择器
1)html 代码如下:
<!-- 相邻兄弟选择器 -->
<br/>
<div>
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
<ol>
<li>item11</li>
<li>item22</li>
<li>item33</li>
</ol>
</div>
2)css 代码如下:
li + li {
color: violet;
font-size: 50px;
}
3)效果如下:
点赞,收藏,关注
^ _ ^
本文地址:https://blog.csdn.net/weixin_42100963/article/details/107241949