css3 定义选择器

　　引言：CSS样式规则有两个主要部分。选择器决定将格式化应用到哪些元素。声明则定义要应用的格式化。

构造选择器

选择器可以定义五个不同的标准来选择要进行格式化的元素。

元素的类型或者名称。如下所示。
```
h1{
     color:red;
}
```
元素所在的上下文。如下所示。
```
h1 em{
   color:red;
}
```

元素的类或ID。如下所示。

/*类选择器*/
.error{
    color:red;  
}
/*ID 选择器*/
#gaudi{
   color:red;
}

元素的伪类或伪元素。如下所示。
```
a:link{
   color:red;
}
```
元素是否有某些属性和值。如下所示。
```
a[title]{
   color:red  
}
```

按名称选择元素

选择要格式化的元素，最常见的标准可能是元素的名称。如下所示：

h2{
  color:red;  
}

按照类型选择要格式化的元素 　　

输入selector,其中selector是目标元素的类型名称。
输入{。
输入希望应用到选中元素的样式，用属性：值得形式表示。
输入}结束样式规则。

按类或ID选择元素

元素中标识了class或id，可以在选择器中使用这个标准，从而支队已标识的元素进行格式化。推荐使用类选择器。如下所示：

/*类选择器*/
.error{
    color:red;  
}
/*ID 选择器*/
#gaudi{
   color:red;
}

　　　　按类选择要格式化的元素

输入.（点号）。
不加空格，直接输入classname.
输入{。
输入希望应用到选中元素的样式，用属性：值得形式表示。
输入}结束样式规则。

按id选择要格式化的元素

输入#（井号）。
不加空格，直接输入id。
输入{。
输入希望应用到选中元素的样式，用属性：值得形式表示。
输入}结束样式规则。

按上下文选择元素

根据元素的祖先、父元素或同胞元素来定位需要格式化的元素。

祖先（ancestor）是包含目标（后代，descendant）元素的任何元素，不管它们之间隔了多少代。

按祖先元素选择要格式化的元素

输入希望格式化的元素的祖先元素的选择器。
输入一个空格。
如果需要，对后续的每个祖先元素重复以上两步。
输入希望格式化的元素的选择器。
```
.architect p{
  color:red;
}
```

按父元素选择要格式化的元素

输入希望格式化的元素的父元素的选择器。
输入>（大于号）。
如果需要，对后续每代父元素重复以上两步。
输入希望格式化的元素的选择器。
```
.architect>p{
   color:red;
}
```

按相邻同胞元素选择要格式化的元素

输入包含在同一父元素中的、直接出现在目标元素前面的元素选择器。
输入+（加号）。
如果需要，对每个后续的同胞元素重复以上两步。
输入要格式化的元素的选择器。
```
.architect p+p{
  color:red;  
}
```

选择第一个或者最后一个子元素

有时需要选择仅作为某元素第一个或最后一个子元素的元素。需要使用伪类:firsh-child和:last-child。如下：

li:frist-child{
  color:red;  
}

li:last-child{
  color:red;  
}

选择某元素的第一个或者最后一个子元素进行格式化

输入代表我们想应用样式的第一个或者最后一个子元素。
选择第一个子元素输入:first-child。最后一个子元素输入:last-child。

选择元素的第一个字母或者第一行

分别使用:first-letter和:first-line伪元素只选择元素的第一个字母或第一行。如下：

P:first-letter{
  color:red;
  font-size:1.4em;
  font-weight:bold;      
}

p:first-line{
  color:red;  
}

选择元素的第一个字母

输入要对其格式化的元素选择器。
输入:first-letter。

选择元素的第一行

输入要对其第一行进行格式化的元素的选择器。
输入:first-line。

按状态选择链接元素

CSS允许根据链接的当前状态对他们进行格式化。

按状态选择要格式化的链接元素的步骤

输入a（a是链接元素的名称）。
输入：（冒号），前后都没有空格。
完成第2步后，执行下列操作影响链接状态。
输入link以设置从未被激活或指向，当前页没有被激活或指向的链接的外观。
输入visited以设置访问者已激活过链接的外观。
输入focus，前提是链接是通过键盘选择并已准备好激活的。
输入hover以设置光标指向链接时链接的外观。

输入active以设置激活过的链接的外观。

/*未访问过*/
a:link{
  color:red;  
}
/*访问过的链接*/
a:visited{
  color:orange;  
}
/*链接获取焦点*/
a:focus{
  color:purple;  
}
/*光标停留在连接上*/
a:hover{
  color:green;  
}
/*激活链接时*/
a:active{
  color:blue;  
}

一定要按照以下的顺序定义规则：link、visited、focus、hover、active（缩写为LVFHA）。

按属性选择元素

对给定属性或属性值的元素进行格式化。例如：

p[class]{
  color:red;  
}

按属性选择要格式化的元素

输入要考察其属性的元素的选择器。
输入[。
输入选择元素需要考察的属性的名称。
根据需要输入属性的匹配符号和匹配值。
输入。如果想要为元素指定其他属性或者属性值。重复2-4步骤。

**属性选择器参考表**
选择器	属性值
[attribute]	匹配指定属性，不论具体指是什么。
[attribute="value"]	完全匹配指定属性值。
[attribute~="value"]	属性值是以空格分隔的多个单词，其中有一个完全匹配指定值。
[attribute\|="value"]	属性值以value-打头。
[attribute^="value"]	属性值以value开头，value为完成的单词或单词的一部分。
[attribute$="value"]	属性值以value结尾，value为完整的单词或单词的一部分。
[attribute*="value"]	属性值为指定值的子字符串。

/*选择rel属性值等于external的a元素*/
a[rel="external"]{
  color:red;          
}

/*配置以空格相隔的多个单词中的一个*/
article[class~="barcelona"]{
  color:red;  
}

/*这个选择器也能匹配，因为这个选择器匹配部分字符串*/
article[class*="barcelona"]{
  color:red;  
}

/*选择任何带有lang属性且属性值以es开头的h2*/
h2[lang|="es"]{
  color:red;  
}

/*选择任何带有lang属性且属性值以es开头的元素*/
*[lang|="es"]{
  color:red;  
}

/*选择既有href属性，又有任意是属性值包含单词howdy的title属性的a元素*/
a[href][title~="howdy"]{
  color:red;  
}

/*选择既有href属性，又有任意属性值包含how的title属性的a元素*/
a[href][title*="how"]{
  color:red;  
}

/*匹配href属性值以http://开头的a元素*/
a[href^="http://"]{
  color:red;  
}

/*匹配任何src属性值完全等于logo.png的img元素*/
img[src="logo.png"]{
  border:1px solid green;  
}

/*匹配任何src属性值以.png结尾的img元素*/
img[src$=".png"]{
  border:1px solid green;  
}

指定元素组

对于使用相同样式规则的多个元素，可以使用元素组设置样式规则。

将样式应用于元素组的步骤

输入第一个元素名称。
输入，（逗号）。
输入第二个元素名称。
对其他元素重复第二和第三步。
```
h1,
h2{
  color:red;  
}
```

组合使用选择器

现实中常常需要组合使用以上技术，才能找到要格式化的元素。如：

/*选择em元素，包含在p元素中，这样的p元素是lang属性值以es开头的h2元素的直接相邻同胞元素，且class等于project的任何元素的子元素*/
.project h2[lang|="es"]+p em{
  color:red;  
}

posted on 2016-03-01 11:42 AlexGeng 阅读(852) 评论(0) 编辑收藏举报

刷新页面返回顶部

css3 定义选择器

导航

公告