CSS之选择器使用

2018-03-28 本文已影响12人水月沐風

我们都知道，CSS 指层叠样式表 (Cascading Style Sheets)，主要用来为html 元素定义显示样式。本文主要来看一下css的选择器，选择器用来定义css的样式，一般有以下几种：

ID选择器

ID选择器，通过#标识符来为selector设置id，然后html元素通过该ID可以获得指定的样式，如：
```
<style>
#name{
  color:red;
}
</style>

<p id="name">red text</p>
```
类选择器

类选择器即class选择器，通过.来修饰selector，然后html元素通过class="xxx"来指定该样式。它与id选择器的区别在于：id选择器只能由一组元素使用，而类选择器可以由多个元素使用。
```
<style>
.value{
  text-align:center;
}
</style>

<p class="value">center text</p>
```
元素选择器

元素选择器即标签选择器，使用html标签名作为selector的名字，后面使用该标签都会默认渲染该样式。
```
<style>
p{
  font-style:italic;
}
</style>

<p >italic text</p>
```
包含选择器

包含选择器即后代选择器，指定了目标选择器必须处在某个选择器的元素内部才能生效，主要形式有：A B{…} 和.A B{…} 。如：
```
p{
  color:red;
}
div p{
  color:yellow;
}
</style>
<p>red text</p>
<div>
  <p>yellow text</p>
</div>
```

子选择器

指定目标选择器处于某个选择器内部，并且只作用于第一代，主要形式有：A >B{…}和.A >B{…}。而包含选择器可以作用于某标签内的所有后代。

<style>
div>p{
  color:red;
}
</style>
<div>
  <p>red text</p><!--文字是红色的-->
  <table>
    <tr>
      <td>
        <p>no red text;</p><!--文字是非红色的-->
      </td>
    </tr>
  </table>
</div>

兄弟选择器

兄弟选择器表示A标签匹配selector的A，B标签匹配selector的B时，B标签匹配样式，格式为：A~B{…},如：
```
<style>
div~p{
  color:red;
}
</style>
<div>
  <p>no red text</p>
  <div>no red text</div>
  <p>red text</p>
</div>
```
即当div标签匹配成功，p标签匹配成功后，样式才会成功生效在另一个p标签上。

通用选择器

通用选择器用来为html中所有元素标签设置样式，语法形式为：*{…},如：

<!--使用html中任意标签元素字体颜色全部设置为红色：-->
<style>
*{color:red;}
</style>

<body>
<h1>标题为红色</h1>
<p>段落也为红色</p>
</body>

使用css样式有三种方式，分别为外链式、内嵌式和行内式，下面我们分别来看看具体如何引用。

外链式

当样式需要应用于很多页面时，外链式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表。 <link>标签在（文档的）头部，如：
```
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
```
内嵌式

当单个文档需要特殊的样式时，就应该使用内嵌式表。你可以使用 <style> 标签在文档头部定义内嵌式表，就像这样:
```
<head>
  <style>
     p {
        margin-left:20px;
     }
     body {
        background-image:url("images/back40.gif");
     }
  </style>
</head>
```
行内式

当样式仅需要在一个元素上应用一次时，可以使用内联样式：
```
<p style="color:sienna;margin-left:20px">这是一个段落。</p>
```
多重样式

优先级是浏览器是通过判断哪些属性值与元素最相关以决定并应用到该元素上的。优先级仅由选择器组成的匹配规则决定的。优先级就是分配给指定的CSS声明的一个权重，它由匹配的选择器中的每一种选择器类型的数值决定。下列是一份优先级逐级增加的选择器列表：
- 通用选择器（*）
- 元素(类型)选择器
- 类选择器
- 属性选择器
- 伪类
- ID 选择器
- 内联样式
注意：当 !important 规则被应用在一个样式声明中时,该样式声明会覆盖CSS中任何其他的声明, 无论它处在声明列表中的哪里. 尽管如此, !important规则还是与优先级毫无关系.使用 !important 不是一个好习惯，因为它改变了你样式表本来的级联规则，从而使其难以调试。

CSS之选择器使用

猜你喜欢

热点阅读