1.元素选择器

“类型选择器匹配文档树中该元素类型的每一个实例”,如下定义的类型选择器将匹配文档中的所有p元素。

p{
  background-color:green;
}

2.CSS分组

选择器分组

假设希望 h2 元素和段落都有灰色。为达到这个目的,最容易的做法是使用以下声明:

p,h2{
  color:gray;
}

将 h2 和 p 选择器放在规则左边,然后用逗号分隔,就定义了一个规则。其右边的样式(color:gray;)将应用到这两个选择器所引用的元素。逗号告诉浏览器,规则中包含两个不同的选择器。如果没有这个逗号,那么规则的含义将完全不同。参见后代选择器。

通配符选择器

CSS2 引入了一种新的简单选择器 - 通配选择器(universal selector),显示为一个星号(*)。该选择器可以与任何元素匹配,就像是一个通配符。例如,下面的规则可以使文档中的每个元素都为红色:

*{
  color : red;
}

3.类选择器

CSS类选择器

要应用样式而不考虑具体设计的元素,最常用的方法就是使用类选择器。

.important {color:red;}

结合元素选择器

p.important{
  color : red;
}

选择器现在会匹配 class 属性包含 important 的所有 p 元素,但是其他任何类型的元素都不匹配,不论是否有此 class 属性。选择器 p.important 解释为:“其 class 属性值为 important 的所有段落”。

多类选择器

在上一节中,我们处理了 class 值中包含一个词的情况。在 HTML 中,一个 class 值中可能包含一个词列表,各个词之间用空格分隔。例如,如果希望将一个特定的元素同时标记为重要(important)和警告(warning),就可以写作:

<p class="important warning">
This paragraph is a very important warning.
</p>

接下来我们定义CSS样式

.important {font-weight:bold;} //class包含important类的元素应用此样式 。
.warning {font-style:italic;}  //class包含warning类的元素应用此样式 。
.important.warning {background:silver;} //class同时包含important、warning类的元素应用此样式。

4.ID选择器

 如下定义了一个ID选择器,用于匹配文档中ID属性等于div1的唯一元素。

#div1{
  color : red;
}

5.属性选择器

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

//把包含标题的所有元素变为红色
*[title]
{ color : red; }

[attribute=value] :选取等于特定属性值的元素,这种格式要求必须与属性值完全匹配。

a[title='w3school']
{
    color : red;
}

[attribute~=value] :根据部分属性值选择,如果需要根据属性值中的词列表的某个词进行选择(词与词之间用空格分开),则需要使用波浪号(~)

//会匹配class='important'的元素,也会匹配class='important error'的元素。
*[class~='important']
{ color : red; }
<body>

<span class="important">important</span>

<span class="important error">important error</span>

</body>

[attribue|=value]:选择属性值等于value或以value-开头的所有元素。

*[title|='en']
{
    color : red;
}

因此,以下示例标记中的前三个元素将被选中,而不会选择后两个元素。

<body>
<p title="en">Hello!</p>
<p title="en-us">Hello!</p>
<p title="en-cn">Hello!</p>
<p title="fr">Hello!</p>
<p title="cy-en">Hello!</p>
</body>

[attribute^=value]:选择属性值以value开头的所有元素。

[attribute$=value]:选择属性值以value结尾的所有元素。

[attribute*=value]:选择属性值中包含子串value的所有元素。

6.后代选择器

h1 em { color : red; }

7.子元素选择器

h1 > strong {color:red;}

8.兄弟选择器

h1 + h2
{
    color:red;
}
h1 ~ h2
{
    color:red;
}

9.伪类

锚伪类(注意:必须以Love ,Ha的顺序来定义锚伪类)

a:link{ color:red; text-decoration:none; }

a:visited{ color : gray; }

a:hover{ text-decoration:underline; }

a:active{ color : blue; }

first-child伪类

p:first-child
{
    color : red;
}

这个规则是把作为某元素第一个子元素的所有p元素设置为红色字体,最常用的错误是认为p:first-child选择器会选择p元素的第一个子元素。

focus伪类

input:focus
{
    border : 1px red solid;
}

 10.伪元素

:first-line 用于向文本的首行设置特殊样式,只能用于块级元素。

p:first-line
{
    color : red;
}

:first-letter 用于向文本的首字段设置特殊样式,只能用于块级元素。

:before 用于在元素的内容前面插入新内容

p:before
{
    content:'新内容'
}

:after 用于在元素的内容末尾插入新内容

 

posted on 2015-12-05 21:14  JustYong  阅读(697)  评论(0编辑  收藏  举报