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

37次阅读

共计 914 个字符,预计需要花费 3 分钟才能阅读完成。

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;
}

正文完
 0