两者的效果是一样的

老兄，麻烦下次说一下出现的问题是什么？不然我还得自己推理。

首先第一个问题：css代码注释要用/*注释*/，<!--注释-->是html注释。有两处。

第二，有好几处语法错误，比如英文的冒号写成中文的冒号，多了一个花括号太粗心了。有两处。

更正完以上两个错误，就没问题了。

祝你前端学习愉快！

a标签在input标签的下面 我们是选中input让a发生变化 不是选中a让a发生变化

根据屏幕像素做PC端，用PX是必须可行的。你也可以用%，毕竟PC分辨率也不一样

少设定了定位元素left

+的意思是紧邻着的一个，没有+就是cheched：hover内部包含的所有a

还有就是你的transparent前面不应该加#

你可以将div的宽高设置为0，它的border的4个方向设置不同的颜色，border的宽度设置20px，然后就可以看到一个宽高为40px的正方形，正方形内部的形成四个三角形。这个就是形成三角形的基本原理，然后需要做的就是去掉其他3个三角形，得到你想要方向的三角形。

你如果是给a标签添加背景图片，你试试加个display:block；让它具有块元素属性，再添加背景图片。

+是紧紧跟在那个元素 #st-control-2后面的a。

+叫做紧邻同胞选择符。

>是子选择符，题目中的#st-control-2没有子节点。

~是一般同胞选择符。题目中的#st-control-2同级的所有a都会被选上。

空格是上下文选择符。

不是left:0;top:0;么。。

同学你该去看下css3选择器的介绍了

<div>

<a id="a1"></a>

<span> <a id="a2"></a></span>

</div>

<a id="a3"></a>

举例：

div a 选取的是div里面所有的a（#a1和#a2会被一起选中）

div>a 选取的是div第一层子元素（只选儿子，孙子选不到）里面的a（#a1被选中，#a2没被选中）

div+a 选取的是div的下一个元素a（注意div和a是同级别,所以只有#a3被选中了）

.st-container要相对定位

那个是要根据你那个三角的宽度是设的什么？px还是em?

http://www.w3school.com.cn/tiy/t.asp?f=csse_border

这是W3C的一个border的一个测试，我改造了一下，你把一下代码替代原来的p:

p 

{

    width: 100;

    height: 100;

    border-left: 50px solid green;

    border-right: 50px solid green;

    border-top: 50px solid yellow;

    border-bottom: 100px solid red;

}

我觉得这里的难点还是在border的形状上，原来我以为border都是矩形的，其实是等腰梯形

还有一点是在将width和height改为0后，你也会发现border会自动拼合在一起，挤掉原来width和height占据的位置，你在试着将其他三条边改为透明

 border-left: 50px solid transparent;

    border-right: 50px solid transparent;

    border-top: 50px solid transparent;

就会得到一个三角形！

希望能够帮你理解！

.st-container input:checked+a{

background: #821134;

}

.st-container input:checked + a:after{

content:"";

width:0;

height:0;

overflow: hidden;

border:20px solid transparent;

border-bottom-color:#821134;

position:absolute;

bottom:100%;

left:50%;

margin-left: -20px;

}

必须要确保input和checked以及a:after之间的距离如上代码！主要就是input和checked之间不能有空隙，看看是不是这里的问题

复制到html文件下用浏览器打开无法加载出来

我一开始也和你一样hover的属性没显示出来，后来我仔细查了下代码才发现是一个标点符号的问题，建议再检查下代码~

时间这么久了，相信你已经是大牛了吧

恩，是的，是参考的p元素，意思就是底部与p元素底部的距离就是p元素的高度

我的还是可以的，请看下面

<div id="nav2">
   <input type="radio" name="radio-set" id="r1" checked="checked">
   <a href="#html5">HTML5</a>
   <input type="radio" name="radio-set" id="r2">
   <a href="#css3">CSS3</a>
   <input type="radio" name="radio-set" id="r3">
   <a href="#js">JavaScript</a>
   <input type="radio" name="radio-set" id="r4">
   <a href="#jquery">Jquery</a>
   <input type="radio" name="radio-set" id="r5">
   <a href="#ajax">Ajax</a>
</div>

#nav2 input:checked+a,#nav2 input:checked:hover+a{
   background: burlywood;    /*被选中的单选按钮后面的a颜色加深*/
}
#nav2 input:checked + a:after{    /*为导航添加三角*/
   content: "";
   width: 0px;
   height: 0px;
   overflow: hidden;
   border-top:20px solid burlywood;
   border-left:20px solid transparent;
   border-right:20px solid transparent;
   position: absolute;
   top: 90%;
   left: 40%;
}
#nav2 input:hover + a{
   background-color: navajowhite;     /*鼠标滑过变色*/
}

相对于父元素，在这个例子中，它本身是没有高和宽的