Web前端之CSS常用选择器

YAN7 3月 16, 2016

写在前面：Web前端之CSS常用选择器，自己的第一篇技术博客，感觉自己萌萌哒~

折腾了这么久，我的博客终于也是搞定啦。开心开心开心，重要的事要说三遍，不过还有很多不完善的地方，以后我会继续完善这个博客的，主要还是内容至上哈～

以下为正文

给html书写CSS样式的四种方式:

外嵌式：嵌入某一个文件的CSS样式，一般在存放html文件的文件上会放一个专门存放CSS样式的文件，以便嵌入

<!-- 外嵌的CSS样式 -->
<!-- rel是relation的意思，指关联到某一个网址的样式，href是文件的意思，指关联到某个文件的css样式 -->
<link rel="stylesheet" href="CSS/main.css">

内嵌式：直接在head标签内写CSS样式，以style标签包裹(推荐使用)
```

<style>
a{
 color: red;
}
</style>
```

行内的CSS样式：直接在要某一行内写入CSS样式以只修改该行的样式（不推荐使用）

<!-- 行内的css样式 -->
<li><a href="http://baidu.com/"  style="color:silver">北京</a></li>
<li><a href="http://baidu.com/">上海</a></li>
<li><a href="http://baidu.com/">广州</a></li>
<li><a href="http://baidu.com/">深圳</a></li>
<li><a href="http://baidu.com/">杭州</a></li>

导入式：和外嵌式一样都是导入某一个文件夹的CSS样式，不过写法不同,并且@import必须写在多有CSS样式的前面（不推荐使用）

 <!-- 导入的CSS样式 -->
 <!-- @import必须写在所有CSS样式的前面，和iOS的@import有点像，不过这种样式不推荐使用  -->
 @import url(CSS/main.css)

正文

1.标签选择器：直接给某一类标签书写CSS样式：

<style>
    p { color: red; }
</style>

<body>
    <p>我是段落1</p>
    <p>我是段落2</p>
    <p>我是段落3</p>
</body>

2.通识选择器：给该页面的所有的标签书写CSS样式，用* 表示：

<head>
<style>
  /* *通配符选择器 *用来设置所有的标签 */
  * { color: blue; }
</style>
</head>
<body>
  <h1>CSS 语法案例</h1>
  <p id="p1">你好，我是p1标签</p>
  <p id="p2">你好，我是p2标签</p>
  <div>哈哈哈<span>哈哈哈</span></div>
</body>

3.id选择器：用来设置该id所在的标签，用＃表示：

<style>
  /* #id选择器 #用来设置该id所在的标签 */
  #p1 { font-size: 20px; }
  #p2 { font-size: 10px; }  
</style>
</head>
<body>
  <p id="p1">你好，我是p1标签</p>
  <p id="p2">你好，我是p2标签</p>
</body>

4.类选择器：用来设置某一个class类所在的所有标签，一个class内可以有多个属性，用.表示

<style>
/* 类选择器 .选择器可用于class属性 */
.head { color: yellow; }
.p1 { color: red; }
.p2 { color: blue; }
.p3 { color: orange; }
.l1 { color: purple ; }
.f1 { color: purple; }
</style>

<body>
<!-- 一个class属性可以有多个类 -->
<h1 class="head haha">中国世纪水泥</h1>
<p class="p3">出厂水泥合格证</p>
<p class="p3">金羊牌注册商标</p>
<form action="" class="f1">
<fieldset>
<legend class="l1">出厂水泥装车(船)卡</legend>
    <p class="p1">购货单位: <input type="text"></p>
    <p class="p1">使用单位: <input type="text"></p>
    <p class="p1">产品名称: <input type="text"></p>
    <p class="p1">强度等级: <input type="text"></p>
    <p class="p2">数        量: <input type="text"></p>
    <p class="p2">出厂编号: <input type="text"></p>
    <p class="p2">车        号: <input type="text"></p>
    <p class="p2">发  证  人 : <input type="text"></p>
</fieldset>
</form>
</body>

***Effect Shows***

类选择器和id选择器的区别：

类选择器可以同时控制多个标签，只要赋予这些标签相同的类属性就可以实现。

一个class类属性内可以有多个值

<h1 class="head haha">中国世纪水泥</h1> 
<!--这个class类有两个值:head和haha-->
<!--.head {} 和 .haha{}都可以用来设置h1标签-->

id选择器能且仅能控制一个标签。因为每一个id值在一个页面中都是唯一的，就像人的身份证号码一样，绝对不会出现第二个相同的id。
id选择器是很“宝贵”的资源，不要滥用，要慎用。

以下是复合选择器

复合选择器：顾名思义，就是两个或两个以上选择器组合在一起，以便更精确的设置某一个或某一类标签，中间不用分割符号：

<!-- 顾名思义 即两个或两个以上选择器组合在一起，以更精确的定位控制某一个标签  -->
<style>
    h1.msg { color: blue; }
    h1#msg { color: red; }
</style>

<body>
    <h1 class="msg">招财进宝</h1>
    <h1 id="msg">财源广进</h1>
    <p>阖家幸福</p>
</body>

2.后代选择器：不管嵌套几层，只要在父代选择器所在的标签包裹内，都可以被设置，父代选择器和后代选择器中间用空格分割

<style>
    /* 后代和父代选择器之间一定要有空格 */
    .list ul { color: red; }
    .list ol { color: blue; }
</style>
</head>
<body>
<div class="list">
<strong>
<ul>
    <li>北京</li>
    <li>上海</li>
    <li>广州</li>
    <li>深圳</li>
</ul>
</strong>
<ol>
    <li>永和</li>
    <li>洋里</li>
    <li>龙田</li>
    <li>罗浮</li>
</ol>
</div>
</body>

***Effect Shows***

2.并集选择器：并集选择器可以同时使几个标签享受相同的样式，标签之间用逗号分割

<style>
    h1, h2, h3, p {  color: red;}
</style>

<body>
    <h1>我是标题1</h1>
    <h2>我是标题2</h2>
    <h3>我是标题3</h3>
    <p>我是段落1</p>
</body>

3.子代选择器：子代选择器只能控制离父代标签最近的那一代标签，不能控制更深层次嵌套的标签,用>表示

<style>
    div > p { color: red; }
    li > p { color: blue; }
</style>

<body>
<div>
    <p>我是子代标签1</p>
    <p>我是子代标签2</p>
    <p>我是子代标签3</p>
    <p>我是子代标签4</p>
    <ul>
        <li class="Gchild">
            <p>我是重孙代标签1</p>
        </li>
        <li>
            <p>我是重孙代标签2</p>
        </li>
        <li>
            <p>我是重孙代标签3</p>
        </li>
    </ul>
</div>
</body>

4.给某一类标签中带有特定属性(id、class、name等)的某一个标签设置样式，用［］表示

<!-- 属性选择器用中括号表示 -->
<style>
h1[id] { color: red; }
input[type="text"] { background-color: #501; }
</style>

<body>
    <h1 id="fir_head">联盟承认快船和雷霆的比赛出现误判</h1>
    <h1>杜兰特：有时候必须依靠单打解决问题</h1>
    <input type="text">
    <input type="password">
</body>