选择器与权重

样式是做用在元素标签上的，通过本章将可以随意查找元素来应用样式。

基本选择器

选择器	示例	描述
.class	.info	选择 class="info" 的所有元素
#id	#wslh	选择 id="wslh" 的所有元素
*	*	选择所有元素
element	p	选择所有 p 元素
element,element	div,p	选择所有 div 元素和所有 p 元素
element element	div p	选择 div 元素内部的所有 p 元素
element>element	div>p	选择父元素为 div 元素的所有 p 元素
element+element	div+p	选择紧接在 div 元素之后的所有 p 元素

标签选择

使用 * 可为所有元素设置样式。

* {
  padding: 0;
  margin: 0;
}

根据标签为元素设置样式

p {
  color: green;
  border: solid 1px #ccc;
}
h1 {
  color: salmon;
}

同时设置多个元素组合

h1,
h2,
h3 {
  color: salmon;
}

元素在多个组件中存在,相同的样式后面的样式会覆盖前面的

h1,
h2 {
  color: red;
}
h1,
h3 {
  background: #dcdcdc;
}

类选择器

类选择器是为一类状态声明样式规则，下面是把文本居中定义为类样式。

<style>
  .test {
    font-size: 36px;
    font-weight: bold;
  }
</style>
<div class="test">pythl.com</div>

将类选择器指定为具体标签

<style>
  div.lh {
    font-size: 36px;
    font-weight: bold;
  }
</style>
<div class="ws">晚生</div>
<div class="lh">隆海</div>

ID 选择器

为有 id 属性的元素设置样式

<style>
  #wslh {
    font-size: 36px;
    font-weight: bold;
  }
</style>
<div id="wslh">晚生隆海</div>

文档中 ID 应该是唯一的，虽然为多个元素设置同一个 ID 也可以产生样式效果，但这是不符合规范的。

建议优先使用类选择器

结构选择器

选择器	示例	描述
element element	div p	后代选择器:选择 div 元素内部的所有 p 元素
element>element	div>p	子代选择器:选择父元素为 div 元素的所有 p 元素
element+element	div+p	选择紧接在 div 元素之后的 p 元素
element~element2	p~ul	选择 p 元素同级并在 p 元素后面的所有 ul 元素

后代选择器

HTML 中元素是以父子级、兄弟关系存在的。后代选择器指元素以内的元素（不只是子元素，是后代元素）

<style>
  main ul h2 {
    color: red;
  }
</style>
<main>
  <h2>main下的h2</h2>
  <ul>
    <li>
      <span><h2>li下的第1个h2</h2></span>
    </li>
    <li>
      <span><h2>li下的第2个h2</h2></span>
    </li>
    <li>
      <span><h2>li下的第3个h2</h2></span>
    </li>
  </ul>
  <div>
    <h2>div下的h2</h2>
    <ul>
      <li>li1</li>
      <li>li2</li>
      <li>li3</li>
    </ul>
  </div>
</main>

子代选择器

元素中当前选择器中第一级子元素元素，不包括孙级及以下元素

紧邻兄弟选择器

用于选择紧挨着的同级兄弟元素

后面兄弟元素

用于选择后面的所有兄弟元素

属性选择器

根据属性来为元素设置样式也是常用的场景

选择器	示例	描述
[attribute]	[target]	带有 target 属性所有元素
[attribute=value]	[target=_blank]	targe 属性 等于"_blank" 的所有元素
[attribute~=value]	[title~=houdunren]	title 属性包含单词 "houdunren" 的所有元素
[attribute|=value]	[title|=hd]	title 属性值为 "hd"的单词，或hd-cms 以-连接的的独立单词
[attribute*=value]	a[src*="hdcms"]	src 属性中包含 "hdcms" 字符的每个 a 元素
[attribute^=value]	a[src^="https"]	src 属性值以 "https" 开头的每个 a 元素
[attribute$=value]	a[src$=".jpeg"]	src 属性以 ".jpeg" 结尾的所有 a 元素