css中的选择器问题

1.标签选择器 

<h1>标题1</h1>

/* 标签选择器 */
h1{
    color: red;
}

<h2>标题2</h2>
<h3>标题3</h3>

2.分组选择器

h2, h3{
    color: blue;
}

3.类选择器

<p class="divid">Hello, World!</p>

.divid{
    color: coral;
}

4.结合元素选择器

<div class="divid">Hello, World!</div>
<p class="divid">Hello, World!</p>

p.divid{		/* 指定元素 */
    color: cyan;
}

5.多类选择器

<div class="c1">Hello, World!</div>
<div class="c2">Hello, World!</div>
<div class="c1 c2">Hello, World!</div>

.c1{
    color: darkorchid;
}
.c2{
    font-size: 30px;
    font-weight: bold;
}
.c1.c2{
    font-family: monospace;
    font-style: italic;
}

6.id选择器

<div id="divid"></div>
#divid{
    width: 300px;
    height: 300px;
    position: relative;
    top: 300px;
    left: 300px;
    background-color: cyan;
    border-radius: 40%;
}

7.属性选择器

<!-- 属性选择器 -->
<!-- 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>

/* 属性选择器 */
[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;
}

8.后代选择器

<p>huameng <strong>is a <i>hagagag</i> ge</strong>shuaige</p>

p  i{
    color: slateblue;
}

9.子选择器

/* 一层一层的找，比较废物 */
p>strong>i{
    color: springgreen;
}

10.相邻兄弟选择器

<!-- 相邻兄弟选择器 -->
<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>

li + li {
    color: violet;
    font-size: 50px;
}