CSS基础-伪类

• 伪类和伪元素
  伪类选择器和伪元素选择器才真正有意思。利用这些选择器，可以为文档中不一定具体存在的结构指定样式，或者为某些元素(甚至是文档本身)的状态所指示的幻想类指定样式。换句话说，会根据另外某种条件而非文档结构向文档中的某些部分应用样式，而且无法通过研究文档的标记准确的推断出采用何种方式应用样式。
  
  听上去好像是在随机地应用样式，不过并非如此。实际上，这里是根据某种无法提前预测的暂时条件来应用样式，不过，什么情况下将出现样式实际上是明确定义的。可以这样想：在一个赛事中，只要主场球队得分，观众应会欢呼。在比赛中你并不知道球队什么时候得分，但是一旦得分，不出所料，观众就会大声欢呼。尽管无法预测哪 个时刻出现前因，但并不影响对后果的预测。
  
  
• 伪类选择器
  我们来考虑锚元素(a)，在HTML和XHTML中，锚元素会建立从一个文档到另一个文档的链接。这样描述锚固然不错，不过有些锚指示的是已经访问过的页面，而另外一引起则指示尚未访问的而面。只是看HTML标记是无法区别二者的差别的，因为在标记中所有锚看上去都一样。要想区别哪些链接已经访问过，唯一的办法就是将文档中的链接与用户浏览历史相比较。所以，实际上有两种基本的锚类型：已访问的和未访问的。这些类型称为伪类(pseudo-class)，使用这些伪类的选择器则称为伪类选择器(pseudo-class selector)。
  
  伪类链接
  伪类名描述:link指示作为超链接(即有一个href属性)并指向一个未访问的地址的所有锚。注意，有些浏览器可能会不正确地将:link解释为指向任何超链接，包括已访问和未访问的超链接:visited指示作为已访问地址超链接的所有锚
  动态伪类
  CSS2.1定义了3个动态伪类，它们可以根据用户行为改变文档的外观。这些动态伪类以前总用来设置超链接的样式，不过它们还有很多其他用途。
  
  伪类名描述:focus指示当前拥有输入焦点的元素，也就是说，可以接受键盘输入或都能以某种方式激活的元素:hover指示鼠标指针停留在哪个元素上，例如，鼠标指针可能停留在一个超链接上，:hover就会指示这个超链接:active指示被用户输入激活的元素，例如，鼠标指针停留在一个超链接上时，如果用户点击鼠标，就会激活这个超链接，:active将指示这个超链接
  注意：伪类的顺序很重要，通常建议是link-visited-hover-active，不过现在已改为link-visited-focus-hover-active。
  
  
• 伪元素选择器
  就像伪类为锚指定幻像类一样，伪元素能够在文档中插入假想的元素，从而得到某种效果。CSS2.1中定义了4个伪元素：设置道字母样式、设置第一行样式、设置之前和之后元素的样式。
  
  设置首字母样式
  第一个伪元素用于设置一个块级元素首字母的样式，而且仅对该首字母设置样式：
          p:first-letter { color:red; }
          h2:first-letter{ font-size:200%; }
  
  设置第一行的样式
  类似地，:first-line可以用来影响元素中第一个文本行。例如，可以让一个文档中第一段的第一行变色：
          p:first-line { color:purple; }
  
  设置之前和之后元素的样式
          p:after { content:"内容";.... }/*在元素之前插入内容*/
          body:before { content:"  Then End." } /*在元素之后插入内容*/
  
  
  
• 小结
  通过根据文档的语言来使用选择器，创建人员可以创建丰富的CSS规则。我们可以构建只应用于少数元素的简单规则。对大量类似元素应用样式也同样简单。由于可以对选择器和规则分组，这使得样式表相当简洁，而且非常灵活，相应地可以缩小文件大小，缩短下载时间。
  
  用户代理通常必须慎用选择器，因为如果不能正确的解释选择器，会导致用户代理根本无法使用CSS。另一方面，创作人员要正确地编写选择器，这很关键，因为一旦有错误用户代理将不能按预想那样应用样式。要想正确地理解选择器以及如何组合选择器，需要深入地掌握选择器与文档结构的关系，并了解继承和层叠机制在确定如何为元素设置样式时有怎样的作用。
  
  

div四个border

div:after{content: "";display: block;/*这句很重要*/width: 0;height: 0;border-right: 100px solid red;border-left: 100px solid yellow;border-top: 100px solid blue;border-bottom: 100px solid green;}

如果把其它条边框的样式设为：

/*border-left-color: transparent;border-top-color: transparent;border-bottom-color: transparent;*/

border-left: 100px solid transparent;border-top: 100px solid transparent;border-bottom: 100px solid transparent;

样式1

代码：

html:

<div class="div-body">    <div class="div-left1">样式1</div></div>

CSS:

.div-body {width: 300px;height: 300px;margin: 10px auto;border-radius: 5px;position: relative;border: 1px solid #CCC;}.div-left1 {width: 80px;height: 25px;background: rgb(105,168,58);color: #FFF;text-align: center;line-height: 25px;position: absolute;left:-5px;top: 10%;}.div-left1:before {content: "";width: 0;height: 0;display: block;/*如要只显示border这句必不可少*/border:5px solid;border-color:transparent rgb(105,168,58) transparent transparent;position: absolute;left: -5px;bottom: -5px;}.div-left1:after {content: "";width: 0;height: 0;display: block;/*如要只显示border这句必不可少*/border:12px solid;border-color:transparent #fff transparent transparent;position: absolute;right: 0px;top: 0px;}

思路就是利用两个before和after伪类来生成两个三角形，再用定位放在相应的位置