css选择器

• 元素选择器
• id选择器
• 类选择器
• 后代选择器

---

元素选择器

文档中的元素是最基本的选择器
其选择器通常是某个 HTML 元素，比如 p、h1、em、a，甚至可以是 html 本身

body{padding:20px;}
h1{ color:blue;}
p{color:blue;}

第二个实现文中所有h1标签包含的文字颜色都为蓝色
第三个实现文中所有p标签包含的文字颜色都为蓝色
注：
选择器也可分组使用

h1,p{color:blue;}

将h1标签、p标签包含的文字同时设置为蓝色

id选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
id 选择器以 "#" 来定义。

#grey{background-color:grey;}
#blue{color:blue;}

设置id为grey的元素背景颜色为灰色,设置id为blue的元素颜色为蓝色
注：id选择器往往被用来建立派生选择器

#topic p{font-size:18px;
font-color:black;
text-align:center;}

设置id为topic的元素内包含的p元素字体为18px，颜色为黑色，字体具中

类选择器

类 选择器可以为标有特定 class 的 HTML 元素指定特定的样式。
css中，类选择器用一个点号显示。

.center{text-align:center;}

设置所有拥有center类的元素均为具中显示

.topic{
padding:20px;
height:50px;
background-color:blue;}

设置所有拥有topic类的元素内边距为20px，高度为50px，背景色为蓝色
<i>注：类选择器和id选择器一样也用来建立派生选择器。</i>

后代选择器

后代选择器又称包含选择器。
后代选择器可以选择某元素包含下的元素。

h1 em{color:red;}

设置h1元素包含下的em元素的文本颜色为红色，其他地方不会应用。
有关后代选择器有一个易被忽视的方面，即两个元素之间的层次间隔可以是无限的。
例如，如果写作 ul em，这个语法就会选择从 ul 元素继承的所有 em 元素，而不论 em 的嵌套层次多深。

<ul>
  <li>List item 1
    <ol>
      <li>List item 1-1</li>
      <li>List item 1-2</li>
      <li>List item 1-3
        <ol>
          <li>List item 1-3-1</li>
          <li>List item <em>1-3-2</em></li>
        </ol>
      </li>
      <li>List item 1-4</li>
    </ol>
  </li>
</ul>

效果图如下：

Paste_Image.png