CSS选择器

基本规则

每CSS规则由两部分组成:选择器和声明块,声明由一个或多个声明组成,每个声明是一个属性-值对.
这里写图片描述

1.元素选择器

元素是最基本的选择器, h1,p,a都可以直接做为选择器,甚至是html本身.

 h1{color:#66CCFF;}
 h2{color:silver;}
 p{font-size:20px;color:#cccccc;}

一个选择器可以有多个声明,声明之间用分号隔开;一个属性也可以有多个值,中间用空格隔开.给h1加上边框,边框颜色会灰色,边框样式为实线,可以这样写:

border:1px solid #cccccc;

选择器分组:如果想同时把不同元素设置相同对样式,可以使用分组同时使用, 选择器之间用逗号隔开。比如需要把h1 和p都设置为字体颜色为红色:

h1,p{color:red;}

2. 通配选择器

通配选择器用一个星号(*)表示,这个选择器可以和任何元素匹配。例如,要把一个文档中所有的元素颜色都设置成银色,可以这样写:

*{color:silver;}

3. ID选择器

使用元素选择器会把一个文档中所有都元素都设置为同一样式,以h1{color:red;} 为例,会把所有的h1标签设置为红色,如果只想对一个特定的h1设置样式,可以通过设置id的方式定义规则.

<p id="p1">test1</p>
<p id="p2">test2</p>

只对第二个p标签设置样式:

#p2{color:silver;}

4.类选择器

通过给元素设置标记,同一类的元素可以有相同多样式.
下面的h1和p元素属于同一类,类名为cal.

   <h1 class="cla">Hello World</h1>
   <h2>safe information</h2>
   <p class="cla">Where there is a will,there is a way</p>

设置CSS样式:

.cal{color:color:#FF8000;}/*h1和p具有相同的颜色*/

也可以单独设置:

p.cal{ color:yellow;}/*对h1没有作用*/
  • 多类选择器
    下面对html代码中有2个p标签,第一个p标签有两个类标记,第二个p标签有一个类标记.
<p class="urgent warning"> When handling plutoium,care must be taken to ...</p>
<p> With plutoium,<span class="warning">The possibility...</span></p>

我们将类名为waring的标签字体颜色设为红色,类名为urgent的标签字体颜色设为绿色,那么类名为warning和urgent的标签应该是什么?

.warning{color:red;}
.urgent{color:green;}

这种情况只保留写在后面的类的属性,写在前面的会被覆盖掉. 对于多类名的也可以通过下面的方式设置:

.urgent.warning{background-color:blue;}
文章导航