前端css常用的选择小汇

要使用css对HTML页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到CSS选择器。选择器就是选择器用来指定样式的作用范围。

类选择器：

类选择器在css中比较常见，首先要在普通标签中设置一个类，类名不可为中文，然后在 style 标签中添加该类名的样式。类选择器在选择器前要加一个点”.”

例子：

<head>

<style type="text/css">

.shasha{

    color:red;

    font-size:20px;

}

<style>

</head>

<body>

    <h1 class="shasha">标题</h1>

    <p class="shasha">第一段</p>

    <p> 第二段</p>

</body>

样式会作用于class类型为shasha的标签内容上，类名可以随便取，别用中文。

ID选择器

ID选择器与类选择器大致相同，不同的是：

ID选择起标签内部指定ID；
ID选择器前面不用点”.”，而用井号”#”
ID选择器只能起一个ID名；类选择器可以起多个类名。

例子：

<head>

<style type="text/css">

#shasha2{

    color:red;

    font-size:20px;

}

<style>

</head>

<body>

    <h1 id="shasha2">标题</h1>

    <p id="shasha2">第一段</p>

    <p> 第二段</p>

</body>

子选择器：

小于这个类的子标签

例子：

.shasha>li{

    border:1px solid red;

}

所有后代标签选择器

小于号代表第一个后代，空格可以指定其所有后代标签

例子：

.shasha li{

    border:1px solid red;

}

通用选择器

通用选择器，选择html文档中的所有标签。

*{

    border:1px solid red;

    font-size:20px;

}

伪类选择符

给标签的某一个状态设定一个类，例如超链接标签可以设置为鼠标停留后显示别的颜色。
最常用的也就是a:hover

a:hover{

    color:red;

    font-size:20px;

}

分组选择符

选择符中间以逗号隔开，等于同时给多个选择符添加样式

.shasha,#shasha2 span{

    color:red;

}

标签选择器：

直接以html中的标签作为选择器：如果设置 HTML 的样式，选择器通常将是某个 HTML 元素，比如 p、h1、em、a，甚至可以是 html 本身，也称元素选择器

<style tye="text/css">

p{

    font-size:12px;

    line-height:1.6em;

}

html {color:black;}

h1 {color:blue;}

h2 {color:silver;}

</style>

总结：

普通标签选择：以html中的标签选择
类选择器：给标签添加一个类属性，根据类属性添加样式，可以使用多个类名，多次使用
ID选择器：给标签添加一个ID属性，ID必须是要唯一的，一个文档只能使用一次ID选择器。
子选择器：用小于号分隔，指其选择器中的子标签
包含选择器：用空格分隔，指其选择器中的所有后代标签
通用选择器：对html中所有的标签有效
伪类选择器：给标签的一个动作添加一个选择器
分组选择器：逗号分隔，同时作用给多个标签

CSS 选择器参考手册：http://www.w3school.com.cn/cssref/css_selectors.asp

原文作者：祈澈姑娘
原文链接：https://www.jianshu.com/u/05f416aefbe1
创作不易，转载请告知

90后前端妹子，爱编程，爱运营，爱折腾。
坚持总结工作中遇到的技术问题，坚持记录工作中所所思所见，欢迎大家一起探讨交流。

自荐前端干货：

进阶攻略|前端最全的框架总结：https://www.jianshu.com/p/2a8ce7075d79
web开发快速提高工作效率的一些资源：https://www.jianshu.com/p/3cede64e87e5
前端学习的几个网站：https://www.jianshu.com/p/c36463dd56db
老司机程序员用到的各种网站整理：https://www.jianshu.com/p/c806eabe5bec
进阶攻略|前端完整的学习路线：https://www.jianshu.com/p/ed50ee3889d4
八款前端开发人员更轻松的实用在线工具：https://www.jianshu.com/p/267a01fb8bdb
前端几个常用简单的开发手册拿走不谢：https://www.jianshu.com/p/fd9689046a9b
程序员常用的六大技术博客类：https://www.jianshu.com/p/d1614f890282
九款优秀的企业项目协作工具推荐：https://www.jianshu.com/p/7df25e438610
移动端手势的七个事件库：https://www.jianshu.com/p/0754d5daa27e
Bootstrap相关优质项目学习清单：https://www.jianshu.com/p/80d229e7fedc
2018前端越来越流行的的技术：https://www.jianshu.com/p/d4af2aa96cee

原文作者：祈澈姑娘
技术博客：https://www.jianshu.com/u/05f416aefbe1

90后前端妹子，爱编程，爱运营，爱折腾。
坚持总结工作中遇到的技术问题，坚持记录工作中所所思所见，欢迎大家一起探讨交流。

文末福利：关注「编程微刊」公众号，在微信后台回复「领取资源」，获取IT资源200G干货大全。公众号回复“1”，拉你进程序员技术讨论群