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 多类选择器
七:CSS ID 选择器
#intro {font-weight:bold;}
#intro {font-weight:bold;}
This is a paragraph of introduction.
。。。
!!!!!!!类选择器和 ID 选择器可能是区分大小写的
八:CSS 属性选择器
[title]
{
color:red;
}
可以应用样式:
Hello world
无法应用样式:
Hello world
2:a[href][title] {color:red;} 这一种的href 和 title都要实现 不然没有效果
属性与属性值必须完全匹配
请注意,这种格式要求必须与属性值完全匹配。
如果属性值包含用空格分隔的值列表,匹配就可能出问题。
a[href][title]
{
color:red;
}
可以应用样式:
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;}
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:改变超链接的各种
a.one:link {color: #ff0000}
a.one:visited {color: #0000ff}
a.one:hover {color: #ffcc00}
a.two:link {color: #ff0000}
a.two:visited {color: #0000ff}
a.two:hover {font-size: 150%}
a.three:link {color: #ff0000}
a.three:visited {color: #0000ff}
a.three:hover {background: #66ff66}
a.four:link {color: #ff0000}
a.four:visited {color: #0000ff}
a.four:hover {font-family: monospace}
a.five:link {color: #ff0000; text-decoration: none}
a.five:visited {color: #0000ff; text-decoration: none}
a.five:hover {text-decoration: underline}
3:超链接 - :focus 的使用
input:focus
{
background-color:yellow;
}
注释:如果已规定 !DOCTYPE,那么 Internet Explorer 8 (以及更高版本)支持 :focus 伪类。
4::first-child(首个子对象)
p:first-child {font-weight: bold;}
li:first-child {text-transform:uppercase;}
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}
q:lang(no)
{
quotes: "~" "~"
}
: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);
}