css选择器中url定位的伪类 - 有关:link ， :visited， :hover，:active， 目标:target

链接的伪类有:link ， :visited， :hover ，:active

1. :link - 未访问过的
2. :visited - 已访问过
3. :hover - 鼠标经过
4. :active - 点击

定义链接的伪类样式时，通常会设置多个，这样就会导致优先级的问题，大家都是伪类，级别相同，所以就会导致放在后面的伪类无法生效的问题；
这里推荐的顺序是:link - :visited - :hover - :active;所谓的“lover-hate”，爱恨情仇，好记忆；

:link渐渐的被遗忘；

:link渐渐的被遗忘，其主要的原因是：底下的俩种写法是相同的表现

a { color: skyblue;}
a:link { color: skyblue; }

:link的主要区别可用于区分真链接，如：

<a href>链接</a>
<a name='example'>非链接</a>

在项目中的实用性并不是很大，可用[href] { }替代；所以:link将继续沉寂下去；

:visited的特性

1. 支持的属性有限
   目前仅支持：color，background-color，border-color，border-top/right/bottom/right-color，column-rule-color,outline-color；类似:before与:after的属性是不支持；
2. 不支持半透明色；纯色或全透明
3. 只能重置a{}中所设置过的属性，不能在a:visited{}中添加；
4. js中获取不了呈现的色值；

目标伪类:target

IE9以上的浏览器全部都支持，以URL地址中的锚点定位强关联的伪类；可用于取代一些Javascript才能实现的交互效果；
匹配链接：http://127.0.0.1:5500/target.html#cs_anchor

// target.html
<style>
li:target {
   font-weight: bold;
   color: darkcyan;
}
</style>
<ul>
  <li id="cs_first">id: cs_first</li>
  <li id="cs_anchor">id: cs_anchor</li>
  <li id="cs_last">id: cs_last</li>
</ul>

展示效果如下图所示：

还有一个<a>元素的name属性等同于锚点值，也会触发浏览器的滚动定位

  <a name="cs_anchor">a元素,name为cs_anchor</a>

浏览器会优先且唯一匹配li#cs_anchor，a[name="cs_anchor"]会被忽略；

:targe交互布局的使用，代替原本需要Javascript才能实现的效果；

1.展开与收起的效果

实例代码如下：

<style>
.target_box {
    border: 1px solid;
}
.cs-more-p,
[data-open=false] {
    display: none;
}
:target ~ [data-open=true] {
    display: none;
}
:target ~ .cs-more-p,
:target ~ [data-open=false] {
    display: block;
}
</style>
<div class="target_box">
	文章内容，文章内容，文章内容，文章内容，文章内容，文章内容，文章内容……
	<div id="articleMore" hidden></div>
	<a href="#articleMore" class="cs-button" data-open="true">阅读更多</a>          
	<p class="cs-more-p">更多文章内容，更多文章内容，更多文章内容，更多文章内容。</p>
	<a href="##" class="cs-button" data-open="false">收起</a>
</div>

展示效果如下图：

主要引用的是张鑫旭的《css选择器世界》的实例；点击查看实例

2.选项卡效果

实例代码如下：

<style>
.cs-tab-li {
    display: inline-block;
    background-color: #f0f0f0;
    color: #333;
    padding: 5px 10px;
}
// 使用：not()属性选择非cs-tab-anchor-2与cs-tab-anchor-3的第一项的背景色为deepskyblue，默认状态
.cs-tab-anchor-2:not(:target) + :not(:target) ~ .cs-tab .cs-tab-li:first-child,
.cs-tab-anchor-2:target ~ .cs-tab .cs-tab-li:nth-of-type(2),
.cs-tab-anchor-3:target ~ .cs-tab .cs-tab-li:nth-of-type(3) {
    background-color: deepskyblue;
    color: #fff;
}
.cs-panel-li {
     display: none;
     padding: 20px;
     border: 1px solid #ccc;
 }
 // 默认显示第一项
.cs-tab-anchor-2:not(:target) + :not(:target) ~ .cs-panel .cs-panel-li:first-child,
.cs-tab-anchor-2:target ~ .cs-panel .cs-panel-li:nth-of-type(2),
.cs-tab-anchor-3:target ~ .cs-panel .cs-panel-li:nth-of-type(3) {
    display: block;
}
</style>
<div class="cs-tab-x">
    <i id="tabPanel2" class="cs-tab-anchor-2" hidden></i>
    <i id="tabPanel3" class="cs-tab-anchor-3" hidden></i>
    <div class="cs-tab">
        <a href="#tabPanel1" class="cs-tab-li">选项卡1</a>
        <a href="#tabPanel2" class="cs-tab-li">选项卡2</a>
        <a href="#tabPanel3" class="cs-tab-li">选项卡3</a>
    </div>
    <div class="cs-panel">        
        <div class="cs-panel-li">面板内容1</div>
        <div class="cs-panel-li">面板内容2</div>
        <div class="cs-panel-li">面板内容3</div>
    </div>
</div>

展示效果如下图：

主要引用的是张鑫旭的《css选择器世界》的实例；点击查看实例

上面主要介绍了替换Javascript实现交互的效果，之前的使用都是容器的元素作为锚链元素，因为锚链元素不是display:none；所以锚点匹配的时候会出现跳动的不好体验，导致一直没有普及:target伪类交互技术；而上面的这俩种方法是将display:none;做为锚链元素，利用兄弟选择器(+)/(~)控制元素的状态变化，就避免了锚点匹配的跳动现象；