基本选择器是使用最频繁,最基础,最早定义的选择器

 zhushican   2022-11-02 11:32   350 人阅读  0 条评论

基本选择器是使用最频繁,最基础,最早定义的选择器

基本选择器是使用最频繁,最基础,最早定义选择器。IE,火狐,Chrome,Safari,Opera均兼容。主要包括如表3-1所示几种类型基本选择器。

表3-1  基本选择器                       

 

选择符

 
 

  

 
 

功能描述

 
 

*

 
 

通配选择器

 
 

选择所有HTML元素

 
 

E

 
 

元素选择器

 
 

选择指定的类型的HTML元素

 
 

#id

 
 

ID选择器

 
 

选择制定ID属性值为“id”的任意类型元素

 
 

.class

 
 

类选择器

 
 

选择指定class属性值为“class”的任意类型的任意多个元素

 
 

Selector,SelectorN

 
 

分组选择器

 
 

将每一个选择器匹配的元素集合并

 

备注"CSS"列指示该属性是在哪个 CSS 版本中定义的。(CSS1CSS2 还是 CSS3。)

1.CSS 元素选择器

最常见的 CSS 选择器是元素选择器。换句话说,文档的元素就是最基本的选择器。如果设置 HTML的样式,选择器通常将是某个 HTML 元素,比如 p、h1、em、a,甚至可以是 html 本身。

 

html {color:black;}

 

h1 {color:blue;}

 

h2 {color:silver;}

 

2. CSS的id 选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。id 选择器以 "#" 来定义。下面的两个 id 选择器,第一个可以定义元素的颜色为红色,第二个定义元素的颜色为绿色:

 

#red {color:red;}

 

#green {color:green;}

 

下面的 HTML 代码中,id 属性为 red的 p 元素显示为红色,而 id 属性为 green 的 p 元素显示为绿色。 

 

<p id="red">这个段落是红色。</p>

 

<p id="green">这个段落是绿色。</p>

 

3. CSS 类选择器

类选择器允许以一种独立于文档元素的方式来指定样式。该选择器可以单独使用,也可以与其他元素结合使用。在使用类选择器之前,需要修改具体的文档标记,以便类选择器正常工作。为了将类选择器的样式与元素关联,必须将 class 指定为一个适当的值。请看下面的 HTML 代码:

 

<h1>

 

This heading is very important.

 

</h1>

 

<p>

 

This paragraph is very important.

 

</p>

 

在上面的代码中,两个元素的 class 都指定为 important:第一个标题( h1 元素),第二个段落(p 元素)。然后我们使用以下语法向这些归类的元素应用样式,即类名前有一个点号(.)。

 

 

.important {color:red;}

 

4. 分组选择器

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

 

h2, p {color:gray;}

 

将 h2 和 p 选择器放在规则左边,然后用逗号分隔,就定义了一个规则。其右边的样式(color:gray;)将应用到这两个选择器所引用的元素。逗号告诉浏览器,规则中包含两个不同的选择器。可以将任意多个选择器分组在一起,对此没有任何限制。例如,如果您想把很多元素显示为灰色,可以使用类似如下的规则:

 

body, h2, p, table, th, td, pre,  strong, em {color:gray;}

 

 5. CSS *选择器

选择所有元素,并设置它们的背景色:

 

*{ background-color:yellow;}

 


本文地址:http://www.sclingchen.com/post/150.html
版权声明:本文为原创文章,版权归 zhushican 所有,欢迎分享本文,转载请保留出处!

评论已关闭!