css&伪类选择器
1.first-line
伪元素选择器用于元素的第一行的文字使用的而样式。
如：div:first-line{color:},该样式定义了div标签内的第一行文字的颜色。
2.first-letter
伪元素选择器用于为元素的首字母或第一个字使用的样式。
如：div:frist-letter{font-size:20},该样式定义了div标签内的首字母或文字使用20px的字体大小。
3.before伪元素选择器用于在元素之前插入内容。
用法：div:before{content:插入文字/图片/音频等}，该元素定义了在div标签内容前面添加content包含的内容。里面可以定义插入内容的样式。
注意：该选择器在IE6\7\8中无效。
4.after伪元素选择器用于在元素之后插入内容。
用法：div:before{content:插入文字/图片/音频等}，该元素定义了在div标签内容后面添加content包含的内容。里面可以定义插入内容的样式。
注意：该选择器在IE6\7\8中无效。
5.root选择器root选择器应用于页面文档的根目录。该样式只用于页面中存在元素的地方。
使用方法：:root{background-color:red},假如页面中只有一段文字，那么这段文字的背景为红色。它只包含网页中的信息部分，和body所包含的区域不同。
6.not选择器过滤、排除作用，如果想排除某个元素下面的子元素不使用此样式，可以选择not选择器。
使用方法：div:not(span){},排除div元素下面的span标签使用此样式。
7.empty选择器当页面元素内容为空白时使用的样式。
如：:empty{background-color:red},在页面中元素内容为空的背景色设为红色。
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。CSS选择器详解（伪类） - CSDN博客
CSS选择器详解（伪类）
CSS选择器详解 之 伪类
伪类对大小写不敏感
结构伪类选择器
结构伪类是CSS3新增的类型选择器，利用DOM树实现元素过滤，通过文档结构的相互关系来匹配元素，可以减少class和id属性的定义，使文档变得更加简洁。
选择元素所在文档的根元素。在(X)HTML文档中，根元素始终是html元素。
否定选择器，和jQuery中的:not选择器一模一样，可以选择除某个元素之外的所有元素。
&div id="header"&页头&/div&
&div id="page"&页体&/div&
&div id="footer"&页脚&/div&
padding: 10px 20px;
min-height: 50px;
:not([id="footer"]){
background: pink;
用来选择没有任何内容的元素，这里没有内容指的是一点内容都没有，哪怕是一个空格都不行。
&我这里有内容&
min-height: 30px;
background-color: green;
F :first-child
选择F的第一个子元素(所有第一个子元素都会被选择)
e.g. 这里作为F(selector1)的第一个子元素的有 span、div里的p、ul的第一个li
id="selector1"&
&我是第一个span&
&我是第一个p，在span后面&
&&第二个p&&
#selector1 :first-child{
color: pink;
：first-child的冒号要与前面的元素有一个空格的距离，否则它会把父元素里所有的子元素都选上
F E:first-child
针对F的第一个子元素们里的第一个E元素进行选择
HTML代码如上例
#selector1 :first-child{
color: pink;
E:first-child
选择作为第一个子元素的E元素，对这个没有空格
重要：之所以会有这么多的变化，个人认为冒号前面的空格其实是个派生选择器
:last-child
选择最后一个子元素
各种变化和:first-child一样，不再举例。
:nth-child(n)
用来定位某父元素的一个或多个特定的子元素。其中“n”是参数，可以是整数值(1,2,3,4)，也可以是表达式(2n+1、-n+5)和关键词(odd、even)，参数n的起始值始终是1。也就是说，参数n的值为0时，选择器将选择不到任何匹配的元素。
tr:nth-child(2n+1):匹配奇数行的tr
tr:nth-child(2n):匹配偶数行的tr
tr:nth-child(odd):匹配奇数行的tr
tr:nth-child(even):匹配偶数行的tr
tr:nth-child(4):匹配第四行的tr
& :nth-child(2n-1){
background: pink;
:nth-last-child(n)
选择在其父元素中倒数第n个位置的元素或特定某元素。
计算顺序与:nth-child不同，其余用法相同，不再举例。
:first-of-type
选择器类似于“:first-child”选择器，不同之处就是指定了元素的类型,其主要用来定位一个父元素下的某个类型的第一个子元素。
在E:first-of-type功能类似于E:nth-of-type(1)
class="wrapper"&
&我是第一个段落&
&我是第二个段落&
&我是第一个Div元素&
&我是第二个Div元素&
&我是第三个段落&
&我是第四个段落&
&我是第三个Div元素&
&我是第四个Div元素&
.wrapper & ,
.wrapper &
margin: 10px 0;
background:#89c3eb;
color: #fff;
padding: 5px;
.wrapper & :first-of-type {
background: #928178;
:last-of-type
选择器和“:first-of-type”选择器功能是一样的，不同的是他选择是父元素下的某个类型的最后一个子元素。不再举例
:nth-of-type(n)
选择器和“:nth-child(n)”选择器非常类似，不同的是它只计算父元素中指定的某种类型的子元素[即E:nth-of-type(n)]。当某个元素中的子元素不单是同一种类型的子元素时，使用“:nth-of-type(n)”选择器来定位于父元素中某种类型的子元素是非常方便和有用的。在“:nth-of-type(n)”选择器中的“n”和“:nth-child(n)”选择器中的“n”参数也一样，可以是具体的整数，也可以是表达式，还可以是关键词。
【所有匹配E的子元素被分离出来单独排序，不匹配的不参与排序】
class="wrapper"&
&我是一个Div元素&
&我是一个段落元素&
&我是一个Div元素&
&我是一个段落&
&我是一个Div元素&
&我是一个段落&
&我是一个Div元素&
&我是一个段落&
&我是一个Div元素&
&我是一个段落&
&我是一个Div元素&
&我是一个段落&
&我是一个Div元素&
&我是一个段落&
&我是一个Div元素&
&我是一个段落&
.wrapper & :nth-of-type(odd),
.wrapper & :nth-of-type(even){
background: #59b9c6;
:nth-last-of-type(n)
选择器和“:nth-of-type(n)”选择器是一样的，选择父元素中指定的某种子元素类型，但它的起始方向是从最后一个子元素开始，而且它的使用方法与“:nth-last-child(n)”选择器一样，不再举例。
:only-child
匹配的元素的父元素中有且仅有一个子元素。【E:only-child】
选择的是这个E元素，也就是子元素。说不清楚就看例子：
background: #84b9cb;
padding: 10px;
margin-bottom: 5px;
:only-child {
background: #a99e93;
only-of-type
选择其父元素只包含一个同类型的子元素
【表示一个元素有很多个子元素，而其中只有一种类型的子元素是唯一的，使用“:only-of-type”选择器就可以选中这个元素中的唯一一个类型子元素。】
还是不好表述，看例子
class="wrapper"&
&我是一个段落&
&我是一个段落&
&我是一个段落&
class="wrapper"&
&我是一个段落&
class="wrapper"&
&我是一个Div元素&
&我是一个段落&
&我是一个Div元素&
.wrapper {
border: 1px solid #ccc;
padding: 10px;
width: 500px;
margin: 10px auto;
.wrapper :only-of-type{
background: #84b9cb;
其他的常见伪类选择器
:link和:visited
:link表示未访问的超链接，visite表示已访问的。
href="#"&我未访问&
href="##"&我已访问&
color: pink;
font-size: 20px;
color: #7b8d42;
font-size: 20px;
鼠标移动到容器，不仅限于链接，可用于页面中的任何元素（IE6中仅可用于链接）
type="text" /&
height: 100px;
background-color: #c099a0;
鼠标未放上：
鼠标放上去：
被激活时的状态，不仅限于链接，可用于任何具有tabindex属性的元素，
对a标签来说就是鼠标按下去的时候
在CSS中，a:hover必须置于a:link和a:visited后才生效，a:active必须置于a:hover后才生效
href="#"&我是链接&
{color:yellow;}
用于设置获取焦点时的样式，不仅限于链接
type="text" /&
background-color: #93ca76;
未获取焦点时：
获取焦点后：
:enabled和:disabled
在Web的表单中，有些表单元素有可用（“:enabled”）和不可用（“:disabled”）状态，比如输入框，密码框，复选框等。在默认情况之下，这些表单元素都处在可用状态。那么我们可以通过伪选择器“:enabled”对这些表单元素设置样式。
action="#"&
for="enabled"&可用输入框:&
type="text" id="enabled" /&
for="disabled"&禁用输入框:&
type="text" id="disabled" disabled="disabled" /&
margin: 30px;
[type="text"]:enabled{
border:3px solid #8491c3;
box-shadow: 0 0 5px #8491c3;
[type="text"]:disabled{
box-shadow: none;
在表单元素中，单选按钮和复选按钮都具有选中和未选中状态。在CSS3中可以通过状态选择器“:checked”配合其他标签实现自定义样式。而“:checked”表示的是选中状态。
action="#"&
class="wrapper"&
class="box"&
type="radio" checked="checked"
id="boy" name="1" /&&&
for="boy"&男&
class="wrapper"&
class="box"&
type="radio"
id="girl" name="1"
for="girl"&女&
border: 1px solid #ccc;
padding: 20px;
width: 300px;
margin: 30px auto;
.wrapper {
margin-bottom: 10px;
display: inline-block;
width: 30px;
height: 30px;
margin-right: 10px;
position: relative;
background: orange;
vertical-align: middle;
border-radius: 100%;
opacity: 0;
position: absolute;
width: 100%;
height:100%;
z-index:100;
display: block;
width: 10px;
height: 10px;
border-radius: 100%;
position: absolute;
background: #fff;
margin: -5px 0
z-index:1;
[type="radio"] +
opacity: 0;
[type="radio"]:checked +
opacity: 1;
:read-only
用来指定处于只读状态元素的样式。
action="#"&
for="name"&姓名:&
type="text" name="name" id="name" placeholder="大漠" /&
for="address"&地址:&
type="text" name="address" id="address" placeholder="中国上海" readonly="readonly" /&
for="comment"&评论：&
name="comment" id="" cols="30" rows="10" readonly="readonly"&&
width: 300px;
padding: 10px;
border: 1px solid #ccc;
margin: 50px auto;
margin-bottom: 10px;
[type="text"]{
border: 1px solid orange;
padding: 5px;
background: #fff;
border-radius: 5px;
[type="text"]:-moz-read-only{
border-color: #ccc;
[type="text"]:read-only{
border-color: #ccc;
:-moz-read-only{
border: 1px solid #ccc;
height: 50px;
resize: none;
background: #eee;
:read-only {
border: 1px solid #ccc;
height: 50px;
resize: none;
background: #eee;
:read-write
用来指定当元素处于非只读状态时的样式。
action="#"&
for="name"&姓名:&
type="text" name="name" id="name" placeholder="大漠" /&
for="address"&地址:&
type="text" name="address" id="address" placeholder="中国上海" readonly="readonly" /&
width: 300px;
padding: 10px;
border: 1px solid #ccc;
margin: 50px auto;
margin-bottom: 10px;
[type="text"]{
border: 1px solid orange;
padding: 5px;
background: #fff;
border-radius: 5px;
[type="text"]:-moz-read-only{
border-color: #ccc;
[type="text"]:read-only{
border-color: #ccc;
[type="text"]:-moz-read-write{
border:2px solid red;
本文已收录于以下专栏：
相关文章推荐
Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。 flex 就是一种布局方式，类似于 block，inline-blo...
chrom and Safari浏览器：
webkit核心的浏览器，使用CSS3渐变方法（css-gradient）
-webkit-gradient(type, start_point,...
伪类选择器：大的分类可以分为结构伪类选择器、动态伪类选择器和UI元素状态伪类选择器结构伪类选择器1、nth系列选择器：nth-child和nth-of-type:first-child选择某个元素的第...
动态伪类选择器为伪类选择器的一种，其语法如下：
E: pseudo-class {property:value} 其中E为HTML中的元素，pseudo-class是CSS的伪类选择器名称，pr...
article h2：后代选择器：选择指定祖先元素内的后代元素article > h2：子元素选择器：选择指定父元素内的直接子元素h2~p 选择器是一个普通兄弟选择器，查询h2元素后面的拥有共同父元素...
CSS3的强大，让人惊叹，人们在惊喜之余，又不得不为其艰难的道路感到可惜：好的标准只有得到行业浏览器的良好支持才算得上“标准”。CSS3标 准已提出数年，但是目前能实现她的浏览器并不多，虽然部分浏览器...
伪类选择器分为结构性、子元素、 UI、动态和其它伪类选择器
大部分伪类选择器如下图所示
在下面的示例中：
div > p:only-child{
color:re...
CSS3学习笔记
伪类选择器
CSS3之前的伪类共有：:hover,:active, :visited, :link, :first-child, :lang这六种。
CSS3新增了许多选择...
他的最新文章
讲师：董岩
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)扫二维码下载作业帮
3亿+用户的选择
下载作业帮安装包
扫二维码下载作业帮
3亿+用户的选择
在CSS中单词“property“跟“attribute”都表示属性有什么区别?伪类选择器的概念?还有伪类选择器到底是什么?跟其他三个选择器有什么区别?
ziaigege312
扫二维码下载作业帮
3亿+用户的选择
这个语法只是一种普适性的格式,property:value替换成color:red或者top:0都是一样的,所以property和attribute也没什么区别.至于伪类选择器则代表元素的一种状态,例如超链接就有a:hover等状态.
为您推荐：
其他类似问题
扫描下载二维码}