CSS选择器
基础选择器
1. 标签选择器
标签选择器可以选中所有的标签元素，比如div,ul,li等等，不管标签隐藏的多深，都能选中，选中的都是所有的，而不是某一个，所有是"共性"而不是"特性"
<head>
<style type="text/css">
/*标签选择器*/
body{
background: red;
}
</style>
</head>
2. id选择器
选中id的值
同一个页面中的id不能重复
任何标签都可以设置id
id的命名规范：要以字母，可以有数字，下划线，字母大小写严格区分
<head>
<style type="text/css">
/*id选择器 已 # 号为开头*/
#box{
background-color: red;
}
</style>
</head>
3. 类选择器
类：就是class，class与id非常相似，任何标签都可添加类，类是可以重复的，属于归类的概念
同一个标签中可以携带多个类，用空格分开
<head>
<style type="text/css">
/*类选择器 已 . 号为开头*/
.lv{
color: red;
}
.big{
font-size: 40px;
}
.line{
text-decoration: underline;
}
</style>
</head>
/* 公共类，共有属性 */
<div>
<p class="lv big">段落1</p>
<p class="lv line">段落2</p>
<p class="line big">段落3</p>
</div>
注意：
- 不要用一个类将我们的页面写完，这个标签要携带多个类，共同设置样式
- 每个类要尽可能的小，有公共类的概念，能够让更多的标签使用
- 尽可能的用class，除非一些特殊情况可以用id
4. 通用选择器
使用 * 选择所有元素
*{
color:red;
}
高级选择器
1. 后代选择器
使用空格表示后代选择器。父元素的后代(包括儿子，孙子，重孙子等)
div p{
color: red;
}
/* 从div所有后代中找 p 标签，设置字体颜色为红色 */
2. 子元素选择器
使用 > 表示子代选择器。比如div>p,仅仅表示的是当前div元素选中的子代(不包含孙子....)元素p。
div>p {
color: red;
}
/* 从div的直接子元素中找到p标签，设置字体颜色为红色 */
3. 毗邻选择器
使用 + 号表示毗邻选择
div+p {
color: red;
}
/*找到所有紧挨在div后面的第一个p标签，设置字体颜色为红色。*/
4. 弟弟选择器
div~p {
color: red;
}
/* 到所有div标签后面同级的p标签，设置字体颜色为红色。 */
5. 并集选择器
多个选择器之间使用逗号隔开，表示选中页面中的多个标签，一些共性的元素，可以使用并集选择器
/*并集选择器*/
h3,a{
color: #008000;
text-decoration: none;
}
如百度页面使用并集选择器
/*使用此并集选择器选中页面中所有的标签，页面布局的时候会使用*/
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td {
margin: 0;
padding: 0
}
6. 交集选择器
使用.表示交集选择器。第一个标签必须是标签选择器，第二个标签必须是类选择器。
语法：div.active
如有一个<h4 class='active'></h4>这样的标签
h4{
width: 100px;
font-size: 14px;
}
.active{
color: red;
text-decoration: underline;
}
/* 交集选择器 它表示两者选中之后元素共有的特性。*/
h4.active{
background: #00BFFF;
}
7. 属性选择器
属性选择器通常用在表单控件中
/*根据属性查找，查找所有title属性，用中括号括起来*/
[title]{
color: red;
}
/*找到所有title属性值为 hello 的元素*/
[title="hell"]{
color: red;
}
/*属性值以...开头，title属性值已hello开头的元素*/
[title^="hello"]{
color: red;
}
/*属性值以...结尾*/
[title$="hello"]{
color: red;
}
/*属性值包含某元素*/
[title*="hello"]{
color: red;
}
/*找到所有title属性(有多个值或值以空格分割)中有一个值为hello的元素：*/
[title~="hello"]{
color: red;
}
/*表单常用*/
input[type="text"]{
backgroundcolor: red;
}
伪类选择器
伪类选择器一般用在超链接a标签中，使用a标签的伪类选择器，一定要遵循"爱恨原则" LoVe HAte
| 伪类名称 | 含义 |
|---|---|
| a:link | 未单击访问时超链接样式 |
| a:visited | 单击访问后超链接样式 |
| a:hover | 鼠标悬浮其上的超链接样式 |
| a:active | 鼠标单击未释放的超链接样式 |
| input:focus | input输入框获取焦点时样式 |
/*没有访问的超链接a标签样式：*/
a:link {
color: blue;
}
/*访问过的超链接a标签样式：*/
a:visited {
color: gray;
}
/*鼠标悬浮在元素上应用样式*/
a:hover {
background-color: #eee;
}
/*鼠标点击瞬间的样式：*/
a:active {
color: green;
}
/*input输入框获取焦点时样式*/
input:focus {
outline: none;
background-color: #eee;
}
伪元素选择器
<style type="text/css">
/*设置第一个首字母的样式*/
p:first-letter{
color: red;
font-size: 30px;
}
/* 在....之前 添加内容 这个属性使用不是很频繁 了解 使用此伪元素选择器一定要结合content属性*/
p:before{
content:'alex';
}
/*在....之后 使用非常频繁（清除浮动）*/
p:after{
content:'&';
color: red;
font-size: 40px;
}
</style>
选择器的优先级
CSS选择器优先级时哦通过权重规则来决定的
注意：
还有一种不讲道理的!import方式来强制让样式生效，但是不推荐使用。因为大量使用!import的代码是无法维护的
浙公网安备 33010602011771号