当前位置： 移动技术网 > IT编程>网页制作>HTML > 荐 超详细讲解CSS各类选择器

荐 超详细讲解CSS各类选择器

2020年07月11日  | 移动技术网IT编程  | 我要评论

在这里插入图片描述
作者：浪子花梦，一个有趣的程序员 ~
此文将详细的讲解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

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网