CSS选择符

CSS选择符分为:

  1. 类型选择符
  2. 通配选择符
  3. 类选择符
  4. ID选择符
  5. 组合选择符
  6. 属性选择符
  7. 选择符分组
  8. 伪类选择符

一、类型选择符

匹配文档中相同名称的元素

CSS如下:

body {}
div {}
p {}
span {}

二、通配选择符

选定文档目录树(DOM)中的所有类型的单一对象。
假如通配选择符不是单一选择符中的唯一组成,”*”可以省略。

CSS如下:

*{
	color: pink;
	font-size: 12px;
	border: 1px solid blue;
}

三、类选择符

匹配文档中元素的class属性的属性值为classname的元素

XHTML如下:

CSS如下:

.he
{
    margin:10px;
    background-color:red;
}

四、ID选择符

匹配文档中元素的id属性的属性值为idname的元素

XHTML如下:

CSS如下:

#content
{
    font-size:14px;
    line-height:120%;
}

五、组合选择符

组合选择符包括各种简单选择符的组合方式,目前的组合方式包括:包含关系(以空格whitespace分隔)、子对象关系(以大于号,greater-than sign分隔)、直接相邻关系(以加号,plus sign分隔)、普通相邻关系(以破折号,tilde分隔)

浏览器兼容性:

IE6只支持包含选择符

5.1 包含选择符

匹配文档中符合选择符规定的包含关系的元素

XHTML如下:

设计蜂巢

CSS如下:

div p
{
	color: red;
}

5.2 子对象选择符

匹配文档中符合选择符规定的直接包含关系的元素。

XHTML如下:

设计蜂巢CSS子对象选择符可用,蓝色

CSS如下:

p > code
{
	color:blue;
	font-size:120%;
}

5.3 直接相邻选择符

匹配文档中符合选择符规定的直接相邻关系的元素

XHTML如下:

直接相邻选择符

设计蜂巢

CSS如下:

h1 + p
{
	color:red;
}

5.4 普通相邻选择符

匹配文档中符合选择符规定的普通相邻关系的元素

XHTML如下:

普通相邻选择符

设计蜂巢

匹配样式,红色

CSS如下:

h1 ~ p
{
	color:red;
}

六、属性选择符

属性选择符可以匹配HTML(XHTML、XML)文档中元素定义的属性、属性值或属性值的一部分:

属性名选择符

[att] — 匹配文档中具有att属性的元素
属性值选择符

[att=val] — 匹配文档中具有att属性且其值为val的元素

[att~=val] — 匹配文档中具有att属性且其中一个值(多个值使用空格分隔)为val(val不能包含空格)的元素

[att|=val] — 匹配文档中具有att属性且其中一个值为val,或者以val开头紧随其后的是连字符-的元素(主要用来允许语言编码的匹配,例如HTML中的hreflang属性。关于lang(或 xml:lang)语言码的比配,可查看:lang伪类)
属性值子串选择符

[att^=val] — 匹配文档中具有att属性且其值的前缀为val的元素

[att$=val] — 匹配文档中具有att属性且其值的后缀为val的元素

[att*=val] — 匹配文档中具有att属性且其包含val的元素

浏览器兼容性:

IE6不支持

6.1 属性名选择符

匹配文档中具有att属性的元素

CSS如下:

a[title]
{
	color:red;
	border: 1px solid blue;
}

input[type]
{
	border: 1px solid blue;
	background: green;
}

所有具有title属性的a标签将显示红色的文字,并显示蓝色边框

6.2 属性值选择符

6.2.1 [att=val] 属性值选择符,匹配文档中具有att属性且其值为val的元素

CSS如下:

a[title="hujuntao"]
{
	color:red;
}

所有title值为hujuntao的a标签的文字颜色将显示红色

6.2.2 [att~=val] 属性值选择符,匹配文档中具有att属性且其中一个值(多个值使用空格分隔)为val(val不能包含空格)的元素

XHTML如下:

红色

CSS如下:

a[title~="hujuntao"]
{
	color:red;
}

title属性包含三个值(多个值使用空格分隔),其中一个为hujuntao,因此可匹配样式

6.2.3 [att|=val] 属性值选择符,匹配文档中具有att属性且其中一个值为val,或者以val开头紧随其后的是连字符-的元素(主要用来允许语言编码的匹配,例如HTML中的hreflang属性。关于lang(或 xml:lang)语言码的匹配,可查看:lang伪类)

XHTML如下:

设计蜂巢红色

设计蜂巢红色

设计蜂巢蓝色

CSS如下:

P[lang|="en"]
{
	color: red;
}

P[lang|="zh"]
{
	color: blue;
}

6.3 属性值子串选择符

6.3.1 [att^=val]属性值子串选择符,匹配文档中具有att属性且其值的前缀为val的元素

CSS如下:

a[href^="mailto"] 
{
	color: green;
	background: url(/images/css/icon-mail.png) center right no-repeat;
}

a[href^="https://"]
{
	color:red;
	background: url(/images/css/icon-ssl.png) center right no-repeat;
}

a[href^="ftp://"]
{
	color:gold;
	background: url(/images/css/icon-file.png) center right no-repeat;
}

上面示例根据不同的链接协议匹配不同的样式图标

6.3.2 [att$=val] 属性值子串选择符,匹配文档中具有att属性且其值的后缀为val的元素

CSS如下:

a[href$=".pdf"]
{
background: url(/images/css/icon-pdf.png) center right no-repeat;
}

a[href$=".ppt"]
{
background: url(/images/css/icon-ppt.png) center right no-repeat;
}

a[href$=".doc"]
{
background: url(/images/css/icon-doc.png) center right no-repeat;
}

为不同的链接文件匹配不同的样式图标

6.3.3 [att*=val] 属性值子串选择符,匹配文档中具有att属性且其包含val的元素

XHTML如下:

设计蜂巢红色字体
设计蜂巢绿色字体
设计蜂巢蓝色字体

CSS如下:

a[href*=".html"]
{
	color:red;
}

a[href*=".php"]
{
	color:green;
}

a[href*=".jsp"]
{
	color:blue;
}

由于多数动态网页的网址后都有参数,因此可以使用[att*=val]匹配动态网页的样式

七、选择符分组

将同样的定义应用于多个选择符,可以将选择符以逗号分隔的方式并为组。

CSS如下:

.td1,div a,body { font-size:14px; } 

八、伪类选择符

8.1 结构性伪类选择符

浏览器兼容性:

IE不支持

8.1.1 :root 匹配文档的根元素。在HTML中,根元素永远是HTML

CSS如下:

html:root {background-color:#DCDCDC;}

8.1.2 : nth-child(n) 匹配父元素中的第n个子元素

CSS如下:

p:nth-child(2) {color:#FF0000;}

8.1.3 : nth-last-child(n) 匹配父元素中的倒数第n个结构子元素

CSS如下:

p:nth-last-child(1) {color:#FF0000;}

8.1.4 : nth-of-type(n) 匹配同类型中的第n个同级兄弟元素

CSS如下:

p:nth-of-type(3) {color:#FF0000;}

8.1.5 : nth-last-of-type(n) 匹配同类型中的倒数第n个同级兄弟元素

CSS如下:

p:nth-last-of-type(2) {color:#FF0000;}

8.1.6 :last-child 匹配父元素中最后一个元素

CSS如下:

p:last-child {color:#FF0000;}

8.1.7 :first-of-type 匹配同级兄弟元素中的第一个元素

CSS如下:

p:first-of-type {color:#FF0000;}

8.1.8 :only-child 匹配属于父元素中唯一子元素的E

CSS如下:

p:only-child {color:#FF0000;}

8.1.9 :only-of-type 匹配属于同类型中唯一兄弟元素的E

CSS如下:

p:only-of-type {color:#FF0000;}

8.1.10 :empty

CSS如下:

strong:empty {display:block;width:200px;height:20px;background-color:#EEEEEE;}

8.2 UI元素状态伪类选择符

浏览器兼容性:

IE不支持

8.2.1 :checked 匹配所有用户界面(form表单)中处于选中状态的元素

CSS如下:

input:checked {margin:0 50px;}

8.2.2 :enabled 匹配所有用户界面(form表单)中处于可用状态的元素

CSS如下:

input:enabled {background-color:#FF0000;}

8.2.3 :disabled 匹配所有用户界面(form表单)中处于不可用状态的元素

CSS如下:

input:disabled {border:1px solid #FF0000;background-color:#EEEEEE;}

8.2.4 ::selection 匹配元素中被用户选中或处于高亮状态的部分

CSS如下:

p::selection {background-color:#00FF00;}

8.3 否定伪类选择符

浏览器兼容性:

IE不支持

:not(s) 匹配所有不匹配简单选择符s的元素

CSS如下:

p:not(.bg) {background-color:#00FF00;}

8.4 目标伪类选择符

浏览器兼容性:

IE不支持

:target 匹配相关URL指向的元素

CSS如下:

div#content-primary:target {background-color:#FF0;} 

8.5 伪元素选择符

8.5.1 :first-letter 向文本的第一个字母添加特殊样式。

CSS如下:

div:first-letter { color:red;font-size:16px;float:left; } 

8.5.2 :first-line 向文本的首行添加特殊样式。

CSS如下:

div:first-line { color:red;font-size:16px; }

8.5.3 :before 在元素之前添加内容。

CSS如下:

h1:before
  {
  content:url(beep.wav);
  }

浏览器兼容性:

IE6不支持

8.5.4 :after 在元素之后添加内容。

CSS如下:

h1:after
  {
  content:url(beep.wav);
  }

浏览器兼容性:

IE6不支持

8.6 锚伪类选择符

在支持 CSS 的浏览器中,链接的不同状态都可以不同的方式显示,这些状态包括:活动状态,已被访问状态,未被访问状态,和鼠标悬停状态。
在CSS1中此伪类仅可用于a对象。且对于无href属性(特性)的a对象,此伪类不发生作用。在CSS2中此伪类可以应用于任何对象。

锚伪类分为::link :visited :hover :active

CSS如下:

a:link {color: #FF0000}		/* 未访问的链接 */
a:visited {color: #00FF00}	/* 已访问的链接 */
a:hover {color: #FF00FF}	/* 鼠标移动到链接上 */
a:active {color: #0000FF}	/* 选定的链接 */

8.7 其它伪类

8.7.1 :first-child 向元素的第一个子元素添加样式。

XHTML如下:

These are the necessary steps://红色

  • Intert Key //蓝色
  • Turn key clockwise
  • Push accelerator

Do not push the brake at the same time as the accelerator.

CSS如下:

p:first-child {color:red}
li:first-child {color:blue}

浏览器兼容性:

IE6不支持

8.7.2 :lang 向带有指定 lang 属性的元素添加样式。

XHTML如下:

Some text A quote in a paragraph Some text.

CSS如下:

q:lang(zh)
  {
  quotes: "~" "~"
  }

浏览器兼容性:

IE6不支持

“CSS选择符”的2个回复

发表评论

电子邮件地址不会被公开。 必填项已用*标注