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

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元素。
时间: 2024-10-25 21:50:07

#8.9.16总结# 关系选择符和伪类选择符的相关文章

子选择符 、相邻选择符 、 兄弟选择符 、 伪类选择符

子选择符: E>F 选择所有作为E元素的子元素F <style> div>p{ color: red; } </style> <div> <h3>我是标题1</h3> <p>我第1个是p标签</p> <p>我第2个是p标签</p> <p>我第3个是p标签</p> <small>我是小标题</small> </div> 显示效果:

CSS伪类选择符归纳

伪类选择符归纳 伪类选择符比较多,不加以归类很难记清楚记全:我们可以先把他分为两类 和元素本身转态有关,类似于链接点击前,点击后 和元素在DOM结构中所处的结构有关,类似于第n个元素,或者奇数行. 一.和元素本身转态有关 :link,:visited,:hover,:active :link指的是超链接在访问前的状态 :visited指的是超链接在访问后的转态 :hover指的是鼠标悬停在元素上的状态 :active指的是鼠标点击元素不放时的转态 这几个伪类的书写有一定的顺序,:link和:vi

伪类选择符

更有趣的是伪类选择符,为什么叫做伪类选择符,它允许给html不存在的标签(标签的某种状态)设置样式,比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色: a:hover{color:red;} 上面一行代码就是为 a 标签鼠标滑过的状态设置字体颜色变红.这样就会使第一段文字内容中的“胆小如鼠”文字加入鼠标滑过字体颜色变为红色特效. 关于伪选择符: 关于伪类选择符,到目前为止,可以兼容所有浏鉴器的“伪类选择符”就是 a 标签上使用 :hover 了(其实伪类选择符还有很多,尤其是 c

【00】伪类选择符-魔芋的理解

[00]魔芋的理解 nth-child(n)这样的带n的,n从1开始. n可以是表达式:n*3,n+3 可以是特殊字符串"odd","even" [02]empty 匹配没有任何子元素(包括text节点)的元素E. 注意:如果开始标签和结束标签间有空格或是换行,都是属于有元素的.(魔芋:所以不实用) [04]not(s) 匹配不含有s选择符的元素E. [05]first-child E:first-child E:first-child { sRules } 用法比

CSS选择符-----伪类选择符

Element:hover E:hover { sRules }  设置元素在其鼠标悬停时的样式 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> h1 { font-size: 16px; } a, div { display: block; ma

使用基于关系的选择器和伪类选择器创建纯CSS无JavaScript的鼠标移动到上面即可显示的下拉菜单

html代码: <div class="menu-bar"> <ul> <li> <h3 class="text-warning"><a class="drop-decoration text-warning">CSS</a></h3> <ul> <li> html/css从入门到精通 </li> <li> html

CSS Pseudo-Element Selectors伪对象选择符

一: CSS3将伪对象选择符(Pseudo-Element Selectors)前面的单个冒号(:)修改为双冒号(::)用以区别伪类选择符(Pseudo-Classes Selectors),但以前的写法仍然有效. 为了支持IE8,许多目前许多情况还是使用单个冒号,显示效果一样 Selectors选择符 CSS Version版本 Description简介 E:first-letter/E::first-letter CSS1/CSS3 设置对象内的第一个字符的样式. E:first-line

Java中的类修饰符

资料主要来源于网络(http://60.28.60.3/zy/java-new/zhishidian/chap3/3.htm) 之前每次写小测试程序的时候,总是把一个类放在一个Java文件中,按理说这样比较规范,可主要原因是我是在不知道怎么在一个文件里放多个类,可见java基础有多差了...只要把类的属性改成默认的就可以了,也就是前面什么控制符都不加,采用默认的方式. Java语言程序设计中,定义类时除了要使用class 关键字说明所定义的数据类型是类,还可以在 class 之前增加若干类的修饰

#8.10.16总结# 属性选择符 伪对象选择符 CSS的常用样式

属性选择符 E[att] E[att="val"] E[att~="val"] E[att^="val"] E[att$="val"] E[att*="val"] E[att|="val"] 伪对象选择符  E:first-letter/E::first-letter 设置对象内的第一个字符的样式. <p>今天,阳光明媚,晴空万里,非常适合户外活动,如踏青.远足之类的.长期坐