三种css选择器的单独和联合作战 博客分类： css基础 htmlcss

     css常用的选择器有3种：元素选择器，类选择器和ID选择器，我们现在就领略一下它们的风采吧。

     1.元素选择器

     单独拿出来用法很简单：

html {color: blue;}/*将页面内所有文字的颜色设为蓝色*/
p {color: gray;}/*将段落的所有文字的颜色设为灰色*/
h4 {color: red;}/*将标题为h4元素的所有文字的颜色设为红色*/
h2 {font-family: sans-serif }/*将标题为h2元素的所有文字的字体设为sans-serif字体*/

     除此之外还可以分组使用：

h4，p {color: red;}/*将标题为h4元素，所有段落的所有文字的颜色设为红色*/

     将 h2 和 p 选择器放在规则左边，然后用逗号分隔，逗号告诉浏览器，规则中包含两个不同的选择器。如果没有这个逗号，那么规则的含义将完全不同，而右边是h4和p元素共同的规则。

     2.类选择器

 

.home {
    font-weight: bold;/*将文本设置为粗体*/
    color: #767571;/*设置字体颜色*/
}

     如上，与元素选择器相比使用时在类名前加一个点号，星号表示通配选择器，下面在点号前加星号的代码与上面代码没有什么不同

*.home {
    font-weight: bold;/*将类为home的文本设置为粗体*/
    color: #767571;/*设置类为home的文字的字体颜色*/
}

   3.ID选择器

 

#selected{
    color: white;/*将id为selected的文字的字体颜色设置为白色*/
    background-color: black;/*将id为selected的背景颜色设置为黑色*/
}

    与类选择器相比，一个区别是点号换井号，另外区别是同一个ID选择器在一个html文档中仅可使用一次，而且ID 属性不允许有以空格分隔的词列表。

 

    4.选择器的配合使用

    独木难成林，实际应用中，我们经常把选择器配合起来使用，如：你希望列表中的 a 元素变为斜体字，而不是通常的粗体字，可以这样定义一个派生选择器：

 

li a {
    font-style: italic;
    font-weight: normal;
  }

    再比如ID选择器和元素选择器配合派生：

 

 

#cart p {
	font-style: italic;/*斜体*/
	text-align: center;/*水平居中*/
	}

      id 是cart的元素内段落的文本变为斜体字，位置是水平居中。

 

    和 id 一样，class 也可被用作派生选择器：

.item td {
        color: #f60f60;
	background: #666666;
	}   

    元素也可以基于它们的类而被选择：

td.item {
        color: #f60f60;
	background: #666666;
	}   

    另外，请注意，类选择器和 ID 选择器可能是区分大小写的。这取决于文档的语言。HTML 和 XHTML 将类和 ID 值定义为区分大小写，所以类和 ID 值的大小写必须与文档中的相应值匹配。

#sleeping {font-weight:bold;}
<p id="Sleeping">The baby is sleeping.</p>

 如上 id为sleeping的段落不会变为粗体。