css选择器第一次课

本节大纲

• CSS选择器，分组选择器、派生选择器、id选择器、class选择器、属性选择器

课程内容

样式的三种引用方式

• 内联样式
  不推荐，但在某些情况下很有用。
  <p style="background: orange; font-size: 24px;">CSS 很 👍<p>
• 内部样式
  将 CSS 放在页面的 <style>元素中。
• 外链样式
  <link rel="stylesheet" href="index.css">

css选择器

image

1. id选择器
   选择设置id的元素

<style>
    #div1{
        color: red;
    }
</style>
<div>div</div>
<div id="div1">div1</div>
<div id="div2">div2</div>

2.class选择器
选择有相同class的元素

<style>
    .c1{
        color: red;
    }
    .c2{
        background-color: yellow;
    }
</style>
<div class="c1 c2">c1, c2</div>
<div class="c2">c2</div>
<div class="c1">c1</div>

3.属性选择器
以某个属性做为选择依据

input[type="text"]
{
  width:150px;
  display:block;
  margin-bottom:10px;
  background-color:yellow;
  font-family: Verdana, Arial;
}

input[type="button"]
{
  width:120px;
  margin-left:35px;
  display:block;
  font-family: Verdana, Arial;
}

4、派生选择器
选择某个元素下的子元素，通常用于作用域隔离，如

<style>
    .mod-box h1{
        color: red;
    }
</style>
<h1>这是大标题</h1>
<div class="mod-box">
    <h1>这是mod-box里的标题</h1>
    <div class="content">这是mod-box的内容</div>
</div>

让.mod-box里的h1变为红色，外面的h1不变色。

组合选择器

• A, B
  A, B 选中匹配 A 或/和 B 的元素

.author,.famous {
  font-weight: bold;
}
<h1>登鹳雀楼</h1>
<p class="author">王之涣<p>
<p class="normal">百日依山尽，黄河入海流。</p>
<p class="famous">欲穷千里目，更上一层楼。</p>

• A B
  A B 选中匹配 B 且为匹配 A 的元素的后代元素。

.article a {
  color: #384ebf;
}

• A > B
  A > B 选中匹配 B 且为匹配 A 的元素的直接子元素。

.warriors > li {
  background-image: url(../images/warrior.svg);
}
<ul class="warriors">
  <li>
    斯蒂芬·库里
    <ul>
      <li>微博：<a href="http://weibo.com/u/3432945104">@StephenCurry</a></li>
      <li>Twitter: <a href="https://twitter.com/stephencurry30">@StephenCurry30</a></li>
    </ul>
  </li>
  <li>凯文·杜兰特</li>
  <li>克莱·汤普森</li>
  <li>德雷蒙德·格林</li>
</ul>