荐 超详细讲解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