css基础知识复习与学习（3）

css的选则器（1）

  • 什么是css选择器
    什么是css的选择器呢？还是打算用刚开始举的那个例子。html是一个穿着裤衩的人，css则是这个人的衣服，化妆品等一切能使这个人看起来整洁，干净的东西。而选择器，就像穿衣服（戴饰品）的部位。比如你有个簪子，你要戴在头上，那么这个头就是选择器。
    也就是说，选择器就是能指明把漂亮衣服、装饰品戴在什么位置的名次。在css中，选择器就是指明css代码在那些html标签上起作用的名词。
  • css中有哪些选择器
    在列举css中的选择器之前，我想先说一下行内样式。因为我觉得它不像一个选择器，而像天生特异的人，它一出生，哪些特点就和它紧紧绑在一起，一看就知道。

    简单选择器

  1. 标签选择器
    直接用html的标签当作选择器，告诉css它需要在这些标签上起作用。标签选择器可以为一大堆标签添加样式，前提是这些标签是同一个。比如都是p标签，都是div标签。
    例：index.html
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    <html>
       <head>
          <meta charset='utf8'>
          <title>标签选择器示例</title>
          <link rel='stylesheet' href='./demo.css'>
       </head>
       <body>
          <p>小春帅吗？</p>
          <p>不知道帅不帅</p>
          <p>知道了也没用啊</p>
          <div>我认识小春</div>
          <div>他帅的很</div>
       </body>
    </html>

demo.css

1
2
3
4
5
6
7
8
9
10
p{
  text-align: center;
  color: #2F4F4F;
  font-size: 20px;
 }
div{
  text-align: left;
  color: #e74478;
  font-size: 30px;
}

查看效果若打不开，请复制此链接到浏览器打开：http://blog.wuhoushu.com/selector/tagchoice.html

  1. class选择器
    同标签选择器一样，class选择器同样可以为一大堆标签添加css样式。不过同标签选择器相比，它的优点是可以为不同的标签添加相同的样式。它不在乎你时p还是div。不过你得去每一个需要这些样式的标签上添加class。添加方式如下：
    1
    <div class='myclass'>给这个div添加一个class</div>
    然后你就可以在你的css文件里面用“.” + class的名字，像下面这样写css代码了。
    1
    2
    3
    4
    5
    .myclass{
      font-size: 18px;
      color: #f0f0f0;
      text-align: center;
     }

下面用class选择器将标签选择器中的样式重新实现一遍
index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<html>
   <head>
      <meta charset='utf8'>
      <title>标签选择器示例</title>
      <link rel='stylesheet' href='./class.css'>
   </head>
   <body>
      <p class='question'>小春帅吗？</p>
      <p class='question'>不知道帅不帅</p>
      <p class='answer'>知道了也没用啊</p>
      <div class='answer'>我认识小春</div>
      <div class='answer'>他帅的很</div>
   </body>
</html>

class.css

1
2
3
4
5
6
7
8
9
10
.question{
    text-align: left;
    color: #00FFFF；
    font-size: 30px;
 }
 .answer{
   text-align: right;
   color: #CAFF70;
   font-size: 20px;
 }

点击查看实际效果。如不能点击，可以复制链接到浏览器打开查看http://blog.wuhoushu.com/selector/class.html

  1. id选择器。
    如果说标签选择器和class选择器是用来设计群众演员的装饰，那id选择器绝对是给主角的。因为一个html页面中只允许有一个id选择器。当你为某个标签添加了id后，就不能为别的标签设置了。在css中用’#’ + id的名字来写。如下：
    1
    2
    3
    4
    5
    6
    7
    8
    <div id='onlyme'>一个文档里只能有我一个哦</div>

    <style>
      #onlyme{
        font-size: 30px;
        color: #f8982f;
      }
    </style>
    点击查看实际效果。如不能点击，可以复制链接到浏览器打开查看http://blog.wuhoushu.com/selector/class.html
  2. 还有一个牛逼哄哄的选择器 ，叫通配选择器，长这样 *。
    说它牛逼哄哄是因为这哥们就像平头哥一样，一声吼之后，随便你是谁，都能给匹配了。我的建议是在代码中少用或者不用它。真的很难操控。所以呢，例子，我也不举了，就当是课后作业，自己去看吧。