标签：css3 css2 伪类 元素 child sel type 选择器 中伪类

伪元素和伪类

css2中的伪类和伪元素

css2规范中 伪元素和伪类都是在前面加单冒号 例如： :before,:hover等....

锚伪类：a标签的伪类

1. a:link 向a标签添加样式
2. a:visited 改变已访问标签的颜色（默认蓝色）注意此伪类只能定于颜色
3. a:hover 向鼠标停留时添加样式
4. a:active 向选定的链接添加样式（鼠标点下但是没放开）
5. 锚伪类的定义顺序 link>visited>hover>active LoVe HAte(爱恨)原则

其他伪类

1. :active 元素激活时（点击时）的样式
2. :focus 输入标签被选中时的样式
3. :hover 鼠标停留于元素上时的样式 可以改变子元素的样式
4. :lang(属性值) 带有lang属性的元素样式
5. div:first-child div的父元素下的第一个子元素是div时才被选中

伪元素 不在html文档中存在 但是能看见效果

1. :before 元素的前面添加一个伪元素 display为 inline;
2. :after 元素的后面添加一个伪元素 display为inline;
3. :first-letter 元素的第一个文字
4. :first-line 元素的第一行文字

css3中的伪类和伪元素

css3的规范中 伪类是在前面单冒号 例如： :hover :active 伪元素时加双冒号 ::before ::after (ie8及以下是不支持css的，所有注意兼容)

伪类选择器

名称中带type的伪类选择器

选择其父元素下指定类型的某个元素

1. sel:first-of-type 选择其父元素下指定为sel类型的第一个元素
2. sel:nth-of-type 从前往后数第几个
3. sel:nth-last-of-type 从后往前数第几个
4. sel:last-of-type 选择其父元素下指定类型的最后一个元素
5. sel:only-of-type 其父元素中只有唯一一个指定为sel类型的元素

名称中带child的伪类选择器

1. sel:first-child 其父元素下第一个元素是sel才被选中
2. sel:nth-child 从前往后数第几个是sel才被选中
3. sel:nth-last-child 从后往前数第几个是sel才被选中
4. sel:last-child 其父元素下最后一个元素是sel才被选中
5. sel:only-child 其父元素中只有唯一一个元素并且为sel的元素才被选中

type的选择器只会计算指定类型的选择器 而child 类型的选择器无论是否指定类型，都会计算

<!-- type类伪元素选择器 -->
 <div class="box">  
        <div>2</div>
        <p>2</p>
        <p>2</p>
</div>
<style>
    /*nth-of-type(2)会从.box 的所有的p（指定类型）元素中找到第二个p（指定类型）  */
      p:nth-of-type(2) {
            background-color: red;
        }
</style>

<!-- child类伪元素选择器 -->
 <div class="box">  
        <div>2</div>
        <p>2</p>
        <p>2</p>
</div>
<style>
    /*nth-child(2)会从.box 的所有子元素中找到第2个子元素是p时  才会被选中  */
      p:nth-child(2) {
            background-color: red;
        }
</style>

其他伪类选择器

1. :empty 选择的标签内容为空时
2. :target

 <div class="box">  
        <a href="#p1">p1</a>
        <a href="#p1">p2</a>
        <p id="p1">1</p>
        <p id="p2">2</p>
</div>
<style>
    /* 当前锚点指向的 */
   p:target{}
</style>

3. :root 选择网页的根元素 html标签

表单类的

4. :enabled 选取启用的表单元素
5. :disabled 选取禁用的表单元素
6. :checked 选取已选中的表单元素
7. :not(sel) 非sel的元素

伪元素选择器

1. ::selection 选择标记中用户选择的一部分内容

标签：css3,css2,伪类,元素,child,sel,type,选择器,中伪类
来源： https://www.cnblogs.com/dengyanning/p/16255834.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。