css伪类伪元素域高级选择器的介绍

 给链接定义样式
a:link 表示尚未访问的链接,鼠标未划过和点击
a:visited 表示已经访问的链接
a:hover 表示鼠标划入的链接
a:active 表示激活的链接,也就是鼠标点击链接的一瞬间
注意上面这四个链接的伪类在使用的时候要有一定的顺序,即上面列举的顺序,否则看不到效果。可以简单记为LOVE(包含link和visited首字母)和HATE(包含hover和active的首字母)。

给段落定义样式
:first-letter 为一行中的第一个字符创建样式
:first-line 为一段中第一行创建样式

更多伪类和伪元素
:before 可以在指定元素的前面添加内容。比如有一个段落p,你要在前面添加"Hello",可以用伪类表示为p:before {content: "Hello";}
:after 和:before一样,只不过实在元素的后面添加内容。
但是IE6, IE7不支持content属性。
:first-child 选取其他元素的第一个子元素,这里容易引起混淆。比如有下面的一段代码:

<ul>
<li>第一行</li>
<li>第二行</li>
<li>第三行</li>
</ul>
<p>
<ul>
<li>第一行</li>
<li>第二行</li>
<li>第三行</li>
</ul>
</p>

那么,li:frist-child将会选取所有ul标签下的第一个li标签,也就是上面两个内容为第一行的li标签,而不是选择li标签的第一个子元素
:focus 这个伪元素与链接的:hover相似,只不过:hover为链接专用,而这个可以用于其他的元素,表示当元素获得焦点时应有的样式
高级选择器
子选择器
">"可用来作为子选择器。当要选取一个元素的子元素时,可以使用这个符号。比如有下面一段代码:

<p>
<ul>
<li>第一级</li>
<li>
<ul>
<li>第二级</li>
</ul>
</li>
</ul>
</p>

p>ul 只会选择第一个ul标签,而不会选择第二个ul标签,因为它不是p标签的子元素,而是li标签的子元素。如果要达到选择这两个ul标签,可以是p ul。这样p标签下面所有的ul标签都会被选中。这种形式选取的是p标签下面的所有子孙元素。
同胞选择器
"+"可用来作为同胞选择器。在HTML中,紧挨另一个标签出现的标签被称为邻近同胞标签,如:

<body>
<h1>标题</h1>
<p>段落</p>
</body>

p标签紧邻h1标签,因此p标签为h1的同胞标签,可以通过h1+p来选择。
属性选择器
在属性选择器中,用[]包含要选择的属性,如:
img[title]
那么,所有带有title属性的img标签都会被选中,而那些没带title标签的img则不会被选中。[]括号前面可以使任何有效的选择器。
属性选择器中的属性还可以带有值。比如许多表单元素的形式都一样,如<input type = "text" />和<input type = "checkbox" />,那么input[type = "text"]可以让你只选中文本框。
其他的一些属性选择器还有:
^= 让你匹配属性"以...开始"的标签,如:a[href^= "http://"]则匹配所有以http://开头的链接。
$= 让你匹配属性"以...结束"的标签,如:a[href$=".com"]则匹配所有以".com"结尾的链接。
*= 让你匹配属性包含某一值的标签,如:a[href*= "renren"]则匹配href中包含"renren"的所有链接。

时间: 2024-08-03 19:54:19

css伪类伪元素域高级选择器的介绍的相关文章

谈谈一些有趣的CSS题目(十)-- 结构性伪类选择器

开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉到生僻的 CSS 属性,赶紧去补习一下吧. 不断更新,不断更新,不断更新,重要的事情说三遍. 谈谈一些有趣的CSS题目(一)-- 左边竖条的实现方法 谈谈一些有趣的CSS题目(二)-- 从条纹边框的实现谈盒子模型 谈谈一些有趣的CSS题目(三)-- 层叠顺序与堆栈上下文知多少 谈谈一些有趣

css教程:CSS伪类

CSS pseudo-classes are used to add special effects to some selectors. CSS伪类可用来给一些选择器加上特殊效果. Hyperlink 如何在文档内给超级连接加上不同的颜色 This example demonstrates how to add different colors to a hyperlink in a document. Examples 实例:  代码如下 复制代码 Source Code to Run []

CSS中一些利用伪类、伪元素和相邻元素选择器的技巧

前几天遇到一个页面需求是这样的: 一个评论框,后面的按钮有点赞或者发送评论两种状态,其中发送按钮有根据输入框中是否有字分为可点击和不可点击两种状态. 需求: 没有文字,没有聚焦--点赞 没有文字,聚焦--灰色发送 有文字--红色发送 如果用JS实现,需要监听输入框的change和focus事件,比较麻烦.但是用CSS中的伪类就可以实现相近效果. <input type="text" class="input" required>    <div c

CSS伪类选择器nth

网页制作Webjx文章简介::nth-child()工作原理. 这是一个css选择器,一个真正的伪类选择器,它就是nth-child(),下面是使用它的范例.ul li:nth-child(3n+3) {color: #ccc;} 上面的css是干什么用的,它就是在无序列表里面选择是3倍数的列.也就是第3个,第6个,第9个等等.但是它工作原理是怎样的那?如果遇到其它情况你又如何使用nth-child那? 总的来说nth-child()圆括号里面支持两个关键词:even与odd.他们应该很明显的,

《HTML 5与CSS 3权威指南(第3版·下册)》——19.3结构性伪类选择器

19.3 结构性伪类选择器 本节介绍CSS 3中的结构性伪类选择器,在介绍结构性伪类选择器之前,先来介绍一下CSS中的伪类选择器及伪元素. 19.3.1 CSS中的伪类选择器及伪元素 1.伪类选择器概述 我们知道,在CSS中,可以使用类选择器把相同的元素定义成不同的样式,如针对一个p元素,我们可以做如下所示定义.p.right{text-align:right}p.center{text-align:right} 然后在页面上对p元素使用class属性,把定义好的样式指定给具体的p元素,代码如下

《HTML 5与CSS 3权威指南(第3版·下册)》——19.4.5 E::selection伪类选择器

19.4.5 E::selection伪类选择器 E::selection伪类选择器用来指定当元素处于选中状态时的样式.代码清单19-24为一个E::selection伪类选择器的使用示例,在该示例中分别给出了一个p元素,一个文本框控件以及一个表格.当p元素处于选中状态时,被选中文字变为红色:当文本框控件处于选中状态时,被选中文字变为灰色:当表格处于选中状态时,被选中文字变为绿色. 这段代码的运行结果如图19-36所示: 19.4.6 E:invalid伪类选择器与E:valid伪类选择器 q

CSS中Selection 伪类选择器示例

::selection 伪类选择器用于突出显示的页面用户选择的任何部分,包括可编辑文本字段中的文本. 此伪元素可应用于 color , background-color ,background(background-color 部分) 和text-shadow(注:到目前位置IE下该属性无效)属性.设置其他属性是没有任何效果的. 火狐下需要加-moz-属性前缀: 支持浏览器:Chrome,Firefox (Gecko),Internet Explorer 9+,Opera,Safari 例如:

《HTML 5与CSS 3权威指南(第3版·下册)》——19.4.3 E:read-only伪类选择器与E:read-write伪类选择器

19.4.3 E:read-only伪类选择器与E:read-write伪类选择器 q E: read-only伪类选择器用来指定当元素处于只读状态时的样式. q E: read-write伪类选择器用来指定当元素处于非只读状态时的样式. 在Firefox浏览器中,需要写成"-moz-read-only"或"-moz-read-write"的形式. 代码清单19-20为E: read-only选择器与E: read-write选择器结合使用的一个示例,在该示例中有一

《HTML 5与CSS 3权威指南(第3版·下册)》——19.4.2 E:enabled伪类选择器与E:disabled伪类选择器

19.4.2 E:enabled伪类选择器与E:disabled伪类选择器 q E:enabled伪类选择器用来指定当元素处于可用状态时的样式. q E:disabled伪类选择器用来指定当元素处于不可用状态时的样式. 当一个表单中的元素经常在可用状态与不可用状态之间进行切换时,通常会将E: disabled伪类选择器与E:enabled伪类选择器结合使用,用E:disabled伪类选择器来设置该元素处于不可用状态时的样式,用E: enabled伪类选择器来设置该元素处于可用状态时的样式. 代码