欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2024-03-21 16:07:16
...

     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的段落不会变为粗体。

 

 

 

相关标签: html css