乐趣区

关于前端:CSS-基础选择器

jiezi

CSS 规定由两个次要的局部组成，选择器以及一条或多条申明。

 h1 {color: red; font-size: 20px;}

选择器用于指定 CSS 款式的 HTML 标签，大括号内的局部是对该标签设置的具体款式。

下面 h1 就是选择器，意思是该页面中所有的 h1 标签文字都为红色，字体大小为 20 像素。

要点：

  • 属性和属性值以“键值对”的模式呈现
  • 属性和属性值之间用英文“:”离开
  • 多个“键值对”之间用英文“;”离开

一、标签选择器

标签选择器 是指用 HTML 标签名称 作为选择器，按标签名称分类，为页面中某一类标签指定对立的 CSS 款式。

p {
  color: red;
  font-size: 10px;
}

毛病：不能差异化，只能抉择全副的 p 标签。

二、类选择器

如果想要差异化抉择不同的标签，独自选一个或某几个标签，能够用 类选择器.

<!--CSS 款式定义，后面要有 '.'-->
.red {color: red;}

<!--html 局部，用 class 来调用 -->
<ul>
 <li class='red'> 我是红色 </li>
 <li> 我是彩色 </li>
 <li> 我是彩色 </li>
 <li class='red'> 我也是红色 </li>
</ul>
<p class='red'> 我也是红色哎 </p>

咱们也能够应用多个类名，更不便的设置款式。在应用多个类名时，类名之间必须用空格离开。

  <div class="类名 1 类名 2 ..."> 我有很多款式 </div>

在开发中，能够把一些标签雷同的款式局部放到一个类外面，这些标签能够都调用这个公共的类，而后再调用本人独有的类，这样能够节俭 CSS 代码，对立批改也很不便。

三、id 选择器

id 选择器 的应用和类选择器很像，但 id 选择器是用 # 来定义的。

<!--CSS 款式定义，后面要有 '#'-->
#only {color: blue;}

<!--html 局部，用 id 来调用 -->
<div id='only'> 我是惟一的 </div>

id 选择器在页面上只能应用一次，不罕用

四、通配符选择器

通配符选择器 用 * 来定义，它示意选取页面中的所有标签。通配符选择器不须要被调用，会主动给所有的标签应用款式。

通配符选择器在非凡状况下才会应用，比方革除所有标签的内外边距。

* {
  margin: 0;
  padding: 0;
}
退出移动版