11-06 CSS 元素选择器

1: 选择器通常将是某个 HTML 元素,比如 p、h1、em、a,甚至可以是 html 本身

2:元素选择器又称为类型选择器(type selector)。

3:CSS 元素选择器(类型选择器)可以设置 XML 文档中元素的样式。


二:选择器分组

1:以下的两组规则能得到同样的结果,不过可以很清楚地看出哪一个写起来更容易:

/* no grouping */h1 {color:blue;}h2 {color:blue;}h3 {color:blue;}h4 {color:blue;}h5 {color:blue;}h6 {color:blue;}

/* grouping */h1, h2, h3, h4, h5, h6 {color:blue;}-----选择器分组

三:通配符选择器

CSS2 引入了一种新的简单选择器 - 通配选择器(universal selector),显示为一个星号(*)。该选择器可以与任何元素匹配,就像是一个通配符。

* {color:red;}

四:声明分组

对声明分组,一定要在各个声明的最后使用分号,这很重要。浏览器会忽略样式表中的空白符。只要加了分号,就可以毫无顾忌地采用以下格式建立样式:

h1 {

  font: 28px Verdana;

  color: blue;

  background: red;

  }

h1 {font: 28px Verdana; color: white; background: black;}

与选择器分组一样,声明分组也是一种便利的方法,可以缩短样式表,使之更清晰,也更易维护。

五:CSS 类选择器详解

.important {color:red;}

结合元素选择器

类选择器可以结合元素选择器来使用。

例如,您可能希望只有段落显示为红色文本:

p.important {color:red;}

六:CSS 多类选择器

11-06 CSS 元素选择器_第1张图片

七:CSS ID 选择器

#intro {font-weight:bold;}

This is a paragraph of introduction.

。。。

!!!!!!!类选择器和 ID 选择器可能是区分大小写的

八:CSS 属性选择器

可以应用样式:

Hello world

W3School


无法应用样式:

Hello world

W3School

2:a[href][title] {color:red;}    这一种的href 和 title都要实现 不然没有效果

属性与属性值必须完全匹配

请注意,这种格式要求必须与属性值完全匹配。

如果属性值包含用空格分隔的值列表,匹配就可能出问题。

可以应用样式:

W3School

3:可以对所有带有 alt 属性的图像应用样式,从而突出显示这些有效的图像:

img[alt] {border: 5px solid red;}

4:除了选择拥有某些属性的元素,还可以进一步缩小选择范围,只选择有特定属性值的元素。假设希望将指向 Web 服务器上某个指定文档的超链接变成红色,可以这样写:

a[href="http://www.w3school.com.cn/about_us.asp"] {color: red;}

5:部分属性值选择

p[class~="important"] {color: red;}

这种写法 只要包含important都可以实现红色,如果忽略了波浪号,则说明需要完成完全值匹配。

六:子串匹配属性选择器

类型描述

[abc^="def"]选择 abc 属性值以 "def" 开头的所有元素

[abc$="def"]选择 abc 属性值以 "def" 结尾的所有元素

[abc*="def"]选择 abc 属性值中包含子串 "def" 的所有元素

七:特定属性选择类型

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

上面这个规则会选择 lang 属性等于 en 或以 en- 开头的所有元素

总结:选择器描述

[attribute]用于选取带有指定属性的元素。

[attribute=value]用于选取带有指定属性和值的元素。

[attribute~=value]用于选取属性值中包含指定词汇的元素。

[attribute|=value]用于选取带有以指定值开头的属性值的元素,该值必须是整个单词。

[attribute^=value]匹配属性值以指定值开头的每个元素。

[attribute$=value]匹配属性值以指定值结尾的每个元素。

[attribute*=value]匹配属性值中包含指定值的每个元素。

八:CSS 后代选择器

后代选择器(descendant selector)又称为包含选择器。

后代选择器可以选择作为某元素后代的元素。

h1 em {color:red;}

This is a important heading

This is a important paragraph.

上面这个规则会把作为 h1 元素后代的 em 元素的文本变为 红色。其他 em 文本(如段落或块引用中的 em)则不会被这个规则选中

九:CSS 子元素选择器

与后代选择器相比,子元素选择器(Child selectors)只能选择作为某元素子元素的元素。

如果您希望选择只作为 h1 元素子元素的 strong 元素,可以这样写:

h1>strong {color:red;}

这个规则会把第一个 h1 下面的两个 strong 元素变为红色,但是第二个 h1 中的 strong 不受影响:

This is very very important.

This is really very important.

!!!!子结合符两边可以有空白符,这是可选的。因此,以下写法都没有问题:

h1 > strong

h1> strong

h1 >strong

h1>strong

如果从右向左读,选择器 h1 > strong 可以解释为“选择作为 h1 元素子元素的所有 strong 元素”。

十:CSS 相邻兄弟选择器-----不懂 

十一:CSS 伪类---CSS 伪类用于向某些选择器添加特殊的效果。

1:超链接

a:link {color: #FF0000}

a:visited {color: #00FF00}

a:hover {color: #FF00FF}

a:active {color: #0000FF}

2:改变超链接的各种

3:超链接 - :focus 的使用

First name:

Last name:

注释:如果已规定 !DOCTYPE,那么 Internet Explorer 8 (以及更高版本)支持 :focus 伪类。

4::first-child(首个子对象)

These are the necessary steps:

  • Intert Key
  • Turn key clockwise
  • Push accelerator

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

注释:必须声明 DOCTYPE,这样 :first-child 才能在 IE 中生效。

5::lang(语言)

-伪类的语法:

selector : pseudo-class {property: value}

:lang 伪类允许您为不同的语言定义特殊的规则。在下面的例子中,在下面的例子中,:lang 类为带有值为 "no" 的 lang 属性的 q 元素定义引号的类型:

一些文本 段落中的引用 一些文本。

运行结果---》     一些文本 段落中的引用 一些文本。

6:注意区分下面几种形式!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

p:first-child{ color: red; }----》选择器匹配作为任何元素的第一个子元素的 p 元素

p > i:first-child{ font-weight:bold; }---》选择器匹配所有

元素中的第一个 元素

p:first-child i{ color:blue; }---》选择器匹配所有作为元素的第一个子元素的

元素中的所有 元素:

十二:CSS 伪元素-CSS 伪元素用于向某些选择器设置特殊效果。

1:first-line 伪元素

"first-line" 伪元素用于向文本的首行设置特殊样式。

p:first-line

  {

  color:#ff0000;

  font-variant:small-caps;

  }

浏览器会根据 "first-line" 伪元素中的样式对 p 元素的第一行文本进行格式化

"first-line" 伪元素只能用于块级元素。

下面的属性可应用于 "first-line" 伪元素:

font

color

background

word-spacing

letter-spacing

text-decoration

vertical-align

text-transform

line-height

clear

2::first-letter 伪元素

"first-letter" 伪元素用于向文本的首字母设置特殊样式:

p:first-letter

  {

  color:#ff0000;

  font-size:xx-large;

  }

注释:"first-letter" 伪元素只能用于块级元素。

注释:下面的属性可应用于 "first-letter" 伪元素:

font

color

background

margin

padding

border

text-decoration

vertical-align (仅当 float 为 none 时)

text-transform

line-height

float

clear

3:伪元素可以与 CSS 类配合使用:

p.article:first-letter{  color: #FF0000;  }

上面的例子会使所有 class 为 article 的段落的首字母变为红色。

4:多重伪元素

可以结合多个伪元素来使用。

在下面的例子中,段落的第一个字母将显示为红色,其字体大小为 xx-large。第一行中的其余文本将为蓝色,并以小型大写字母显示。段落中的其余文本将以默认字体大小和颜色来显示:

p:first-letter

  {

  color:#ff0000;

  font-size:xx-large;

  }

p:first-line

  {

  color:#0000ff;

  font-variant:small-caps;

  }

5:CSS2 - :before 伪元素

":before" 伪元素可以在元素的内容前面插入新内容。

下面的例子在每个

元素前面插入一幅图片:

h1:before

  {

  content:url(logo.gif);

  }

6:CSS2 - :after 伪元素

":after" 伪元素可以在元素的内容之后插入新内容。

下面的例子在每个

元素后面插入一幅图片:

h1:after

  {

  content:url(logo.gif);

  }

你可能感兴趣的:(11-06 CSS 元素选择器)