伪元素选择器
①使第一个字改变样式
<p>
CSS伪元素选择器是.....
</p>
::first-letter{color:red;} CSS伪元素选择器是.... 中 C 变红
②
<p>使第一行改变样式
这是第一行
这是第二行
</p>
::first-line {color:red;} 这是第一行 变红色
③
<p>
在某个元素之前插入一些内容；
在某个元素之后插入一些内容；
</p>
::before{content:"before";} before 在某个元素之前插入一些内容；
::after{content:"after";} 在某个元素之后插入一些内容；after
④在页面中被选中有个特殊的样式
<p>
::selection伪元素选择器应用于被用户选中的内容。
</p>
:: selection{
color:red;
background-color:#ccc; 当选择内容之后 这段内容的字体颜色会变红色背景颜色为灰色
}
组合选择器
组合选择器分为： 后代选择器 、 子选择器、兄弟选择器
后代选择器和子选择器：
<div class="main">
<h2>标题一</h2> 标题一
<div> 标题二
<h2标题二</h2> 段落三
<p>段落一</p>
</div>
</div>
解析: 我想使这里面的h2标题是红色的话，我如果直接用h2这种标签选择器的话
会有一个问题，就是页面中其他h2的标题也会用到这个样式，如果我只想用到div
这个样式的选择器是红色的话，那我可以用后代选择器。
. main h2{color:red;} 标题一和标题二会变红
如果你想使得例子中的main直接的子元素也就是第一h2是红色的但他后面这个子元素是原来的元素的话
那你可以使用子选择器
. main > h2{color:red;} 标签一 变红
相邻兄弟选择器：
<div>
<h2>标题</h2> 标题
<p>段落一</p> 段落一
<p>段落二</p> 段落二
</div>
假设我们想让h2后面第一个p标签变成红色的
我们可以在p标签中加上一个类名，通过类选择器来选中
另外 我们还可以用到相邻兄弟选择器 +
h2 + p {color:red;} 段落一变红色
通用兄弟选择器
<div>
<p>段落一</p> 段落一
<h2>标题</h2> 标题
<p>段落二</p> 段落二
<p>段落三</p> 段落三
</div>
假设我们想让h2后面所有的p标签都变红的话 那我们就可以使用通用工具选择器 ~
h2 ~ p {color:red;} 选择h2后面所有的p标签，使得段落二段落三运用到这个样式
选择器分组
h1{color:gray;font-family:sans-serif;}
h2{color:gray;font-family:sans-serif;}
h3{color:gray;font-family:sans-serif;}
解析： 假设我想给h1 h2 h3 这些标题我都想给她统一的样式
一种方法是我们每一个标签都分别给她一个样式
还有一种办法就是我们可以简化一下
h1,h2,h3{color:gray;font-family:sans-serif;}