#8.9.16总结# 关系选择符和伪类选择符

时间：2016-08-10 07:38:57 阅读：300 评论：0 收藏：0 [点我收藏+]

标签：

1.关系选择符

技术分享

示例：

E F

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>关系选择符</title>
 6     <style type="text/css">
 7         .item+li{
 8             background-color: #F00;
 9         }
10     </style>
11 </head>
12 <body>
13 <ul class="item">
14     <li>项目一</li>
15         <ol>
16             <li>项目二</li>
17             <li>项目三</li>
18             <li>项目四</li>
19             <li>项目五</li>
20         </ol>
21     <li>项目六</li>
22     <li>项目七</li>
23 </ul>
24 <li>项目八</li>
25 <li>项目九</li>
26 <li>项目十</li>
27 </body>
28 </html>

技术分享

E>F

    <style type="text/css">
        .item>li{
            background-color: #F00;
        }
    </style>

技术分享

E+F

    <style type="text/css">
        .item+li{
            background-color: #F00;
        }
    </style>

技术分享

E~F

    <style type="text/css">
        .item~li{
            background-color: #F00;
        }
    </style>

技术分享

2.伪类选择符

E:link 设置超链接a在未被访问前的样式。
E:visited 设置超链接a在其链接地址已被访问过时的样式。
E:hover 设置元素在其鼠标悬停时的样式。
E:active 设置元素在被用户激活(在鼠标点击与释放之间发生的事件)时的样式。

注意：顺序不能改变

E:focus 设置元素在成为输入焦点(该元素的onfocus事件发生)时的样式。

说明：webkit内核浏览器会默认给:focus状态的元素加上outline的样式。

E:not(s) 匹配不含有s选择符的元素E。

p:not(.abc){color:#f00;}

<p class="abc">否定伪类选择符 E:not()</p>
<p id="abc">否定伪类选择符 E:not()</p>
<p class="abcd">否定伪类选择符 E:not()</p>
<p>否定伪类选择符 E:not()</p>

技术分享

E:lang(fr) 匹配使用特殊语言的E元素。很少用
E:root 匹配E元素在文档的根元素。常指html元素

E:first-child 匹配父元素的第一个子元素E。

li:first-child{color:#f00;}

<ul>
    <li>结构性伪类选择符 E:first-child</li>
    <li>结构性伪类选择符 E:first-child</li>
    <li>结构性伪类选择符 E:first-child</li>
    <li>结构性伪类选择符 E:first-child</li>
</ul>

技术分享

E:last-child 匹配父元素的最后一个子元素E。
E:only-child 匹配父元素仅有的一个子元素E。

li:only-child{color:#f00;}

<h1>只有唯一一个子元素</h1>
<ul>
    <li>结构性伪类选择符 E:only-child</li>
</ul>
<h1>有多个子元素</h1>
<ul>
    <li>结构性伪类选择符 E:only-child</li>
    <li>结构性伪类选择符 E:only-child</li>
    <li>结构性伪类选择符 E:only-child</li>
</ul>

技术分享

E:nth-child(n) 匹配父元素的第n个子元素E。
E:nth-last-child(n) 匹配父元素的倒数第n个子元素E。
E:first-of-type 匹配同类型中的第一个同级兄弟元素E。
E:last-of-type 匹配同类型中的最后一个同级兄弟元素E。
E:only-of-type 匹配同类型中的唯一的一个同级兄弟元素E。
E:nth-of-type(n) 匹配同类型中的第n个同级兄弟元素E。
E:nth-last-of-type(n) 匹配同类型中的倒数第n个同级兄弟元素E。
E:empty 匹配没有任何子元素（包括text节点）的元素E。

p:empty{height:25px;border:1px solid #ddd;background:#eee;}

<div class="test">
    <p>结构性伪类选择符 E:empty</p>
    <p><!--我是一个空节点p，请注意我与其它非空节点p的外观有什么不一样--></p>
    <p>结构性伪类选择符 E:empty</p>
</div>

技术分享

E:checked 匹配用户界面上处于选中状态的元素E。 (用于input type为radio与checkbox时)

input:checked+span{background:#f00;}
input:checked+span:after{content:" 我被选中了";}

 1 <form method="post" action="#">
 2 <fieldset>
 3     <legend>选中下面的项试试</legend>
 4     <ul>
 5         <li><label><input type="radio" name="colour-group" value="0" /><span>蓝色</span></label></li>
 6         <li><label><input type="radio" name="colour-group" value="1" /><span>红色</span></label></li>
 7         <li><label><input type="radio" name="colour-group" value="2" /><span>黑色</span></label></li>
 8     </ul>
 9 </fieldset>
10 <fieldset>
11     <legend>选中下面的项试试</legend>
12     <ul>
13         <li><label><input type="checkbox" name="colour-group2" value="0" /><span>蓝色</span></label></li>
14         <li><label><input type="checkbox" name="colour-group2" value="1" /><span>红色</span></label></li>
15         <li><label><input type="checkbox" name="colour-group2" value="2" /><span>黑色</span></label></li>
16     </ul>
17 </fieldset>
18 </form>

技术分享

E:enabled 匹配用户界面上处于可用状态的元素E。
E:disabled 匹配用户界面上处于禁用状态的元素E。

input[type="text"]:enabled{border:1px solid #090;background:#fff;color:#000;}
input[type="text"]:disabled{border:1px solid #ccc;background:#eee;color:#ccc;}

<form method="post" action="#">
<fieldset>
    <legend>E:enabled与E:disabled</legend>
    <ul>
        <li><input type="text" value="可用状态" /></li>
        <li><input type="text" value="可用状态" /></li>
        <li><input type="text" value="禁用状态" disabled="disabled" /></li>
        <li><input type="text" value="禁用状态" disabled="disabled" /></li>
    </ul>
</fieldset>
</form>

技术分享

E:disabled 匹配用户界面上处于禁用状态的元素E。
E:target 匹配相关URL指向的E元素。

#8.9.16总结# 关系选择符和伪类选择符

标签：

原文地址：http://www.cnblogs.com/churjan/p/5754698.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行