基础选择器
- ID 选择器，用法如下：
#content{
color: #fff;
background: #000;
}
- 类选择器,用法如下：
.list-item{
border-bottom: 1px solid #ccc;
}
- 通配选择器，用法如下：
*{
margin: 0;
padding: 0;
}
上面这个样式就是把所有元素的内外边距都归零。由于通配选择器要把样式覆盖到所有的元素上，可想而知它的效率并不会高，所以在实际开发中一般不建议使用通配选择器。
- 标签选择器
h1{
font-size: 20px;
}
- 属性选择器;属性选择器有如下几种形式：
- [attr]，用来选择带有 attr 属性的元素，如刚提到的 a [href]。
<!-- HTML： --> <a href="/">返回主页</a> // 下面的CSS会使所有带href的a标签字体变红色： a[href]{ color: red; } - [attr=xxx]，用来选择有 attr 属性且属性值等于 xxx 的元素，如选择所有文本类型的输入框，可以用 input [type=text]。注：xxx 和 HTML 中的属性值必须完全相等才会生效
<!-- HTML： --> <input class="input text" type="text" value="大花碗里扣个大花活蛤蟆"/> // CSS： input[type=text]{ color: red; } - [attr~=xxx]，这个选择器中间用了～=，选择属性值中包含 xxx 的元素。
<!-- HTML： --> <input class="input text" type="text" value="大花碗里扣个大花活蛤蟆"/> // CSS： input[class~=input]{ color: red; } - [attr|=xxx]，这个选择器是用来选择属性值为 xxx 或 xxx- 开头的元素，比较常用的场景是选择某一类的属性。
<!-- HTML： --> <div class="article">我是article</div> <div class="article-title">我是article-title</div> <div class="article-content">我是article-content</div> <div class="article_footer">我是article_footer，不是以artical-开头的</div> // CSS： div[class|=article]{ color: red; } - [attr^=xxx]，这个选择器会匹配以 xxx 开头的元素，实际上就是用正则去匹配属性值，只要是以 xxx 开头都可以。跟上例的区别就是最后一个会被选中；
<!-- HTML： --> <div class="article">我是article</div> <div class="article-title">我是article-title</div> <div class="article-content">我是article-content</div> <div class="article_footer">我是article_footer，不是以artical-开头的</div> // CSS： div[class^=article]{ color: red; } - [attr$=xxx]，这个选择器和上一个相似，它是用正则匹配的方式来选择属性值以 xxx 结尾的元素。
<!-- HTML： --> <button class="btn btn-disabled">禁用的按钮</button> <select class="select select-disabled city-select"></select> <input class="input input-disabled" value="禁用的输入框"/> // CSS： [class$=disabled]{ display: none; } - [attr*=xxx]，最后一个，这个是用正则匹配的方式来选择属性值中包含 xxx 字符的所有元素。这个选择器的规则算是最宽泛的，只要 xxx 是元素属性值的子字符串，这个选择器就会生效。
<!-- HTML： --> <button class="btn btn-disabled">禁用的按钮</button> <select class="select select-disabled city-select"></select> <input class="input input-disabled" value="禁用的输入框"/> // CSS： [class*=disabled]{ display: none; }
- tips
- 属性选择器要做文本的匹配，所以效率也不会高。
- 在使用属性选择器时，尽量要给它设置上生效的范围，如果只用了个 [href] 相当于要在所有元素里找带 href 的元素，效率会很低。如果用 a [href] 会好的多，如果用 .link [href] 就更好了。这种组合方式我们在下一节讲解。
- 属性选择器很灵活，如果能使用 CSS 代替 JS 解决一些需求，可以不用太纠结性能的问题，用 JS 实现也一样要耗费资源的。
组合选择器
- 后代选择器
<!-- HTML -->
<div class="page">
<div class="article">
<h1>我是标题部分</h1>
<p>黑化肥发灰，灰化肥发黑</p>
<p>黑化肥发灰会挥发；灰化肥挥发会发黑</p>
<p>黑化肥挥发发灰会花飞；灰化肥挥发发黑会飞花</p>
</div>
<p class="footer">版权 © tuituitech.com</p>
</div>
// CSS:
.page p{
font-size: 18px;
}
- 子元素选择器
<!-- HTML -->
<div class="page">
<div class="article">
<h1>我是标题部分</h1>
<p>黑化肥发灰，灰化肥发黑</p>
<p>黑化肥发灰会挥发；灰化肥挥发会发黑</p>
<p>黑化肥挥发发灰会花飞；灰化肥挥发发黑会飞花</p>
</div>
<p class="footer">版权 © tuituitech.com</p>
</div>
// CSS:
.page > p{
color: grey;
}
- 兄弟选择器
- 相邻兄弟选择器 找相邻的下一个兄弟节点
<!-- HTML -->
<div class="article">
<p>黑化肥与灰化肥</p>
<h1>我是标题部分</h1>
<p>黑化肥发灰，灰化肥发黑</p>
<p>黑化肥发灰会挥发；灰化肥挥发会发黑</p>
<p>黑化肥挥发发灰会花飞；灰化肥挥发发黑会飞花</p>
</div>
h1 + p{
margin-top: 10px;
color: red;
}
- 通用兄弟选择器 节点后的所有匹配兄弟节点
<div class="article">
<p>黑化肥与灰化肥</p>
<h1>我是标题部分</h1>
<p>黑化肥发灰，灰化肥发黑</p>
<p>黑化肥发灰会挥发；灰化肥挥发会发黑</p>
<p>黑化肥挥发发灰会花飞；灰化肥挥发发黑会飞花</p>
</div>
h1 ~ p{
color: red;
}
- 交集选择器
<!-- HTML -->
<div class="menu">
<a class="menu-item">菜单1</a>
<a class="menu-item active">菜单2</a>
<a class="menu-item">菜单3</a>
<a class="menu-item">菜单4</a>
</div>
.menu-item{
background: #ccc;
color: #000;
}
.menu-item.active{
background: #aaa;
color: #fff;
}
- 并集选择器
h1, h2, h3{
margin: 0;
padding: 0;
}
伪类选择器
- 标记状态的伪类
- :link，选取未访问过的超链接元素。如果我们注意过搜索引擎的结果的话，它里面的链接只要点过的就会变色，从而标记哪个链接是访问过的。:link 这个属性就是用来标识没访问过的链接。
- :visited，选取访问过的超链接元素。和第一条相反，:visited 是用来标记哪个链接是已经访问过的，防止重复点击。
- :hover，选取鼠标悬停的元素。，这个伪类经常用在 PC 端，当鼠标放在一个元素上时，可以用 :hover 来控制鼠标悬停的样式。因为在移动端里没有鼠标的概念，所以移动端里很少用这个伪类。
- :active，选取点中的元素。这个伪类的作用在刚才提到过了，当我们希望按钮有操作反馈的时候，可以用它来标记操作反馈的样式。当然这个伪类也是可以通用的，并不是只能用在按钮上。
- :focus，选取获得焦点的元素。这个伪类用来标识获得焦点的元素，比如搜索框在聚焦的时候有个比较明显的边框，方便用户知道当前在可输入的状态。
- 筛选功能的伪类
- :empty，选取没有子元素的元素。比如选择空的 span，就可以用 span:empty 选择器来选择。这里要注意元素内有空格的话也不能算空，不会被这个伪类选中。
- :checked，选取勾选状态的 input 元素， 只对 radio 和 checkbox 生效。
- :disabled，选取禁用的表单元素。
- :first-child，选取当前选择器下第一个元素。
- :last-child，和 first-child 相反，选取当前选择器下最后一个元素。
- :nth-child(an+b)，选取指定位置的元素。这个伪类是有参数的，参数可以支持 an+b 的形式，这里 a 和 b 都是可变的，n 从0起。使用这个伪类可以做到选择第几个，或者选择序号符合 an+b 的所有元素。比如使用 li:nth-child(2n+1)，就可以选中 li 元素中序号是2的整数倍加1的所有元素，也就是第1、3、5、7、9、2n+1个 li 元素。
- :nth-last-child(an+b) ，这个伪类和 nth-child 相似，只不过在计数的时候，这个伪类是从后往前计数。
- :only-child，选取唯一子元素。如果一个元素的父元素只有它一个子元素，这个伪类就会生效。如果一个元素还有兄弟元素，这个伪类就不会对它生效。
- :only-of-type，选取唯一的某个类型的元素。如果一个元素的父元素里只有它一个当前类型的元素，这个伪类就会生效。这个伪类允许父元素里有其他元素，只要不和自己一样就可以。
伪元素选择器
- ::first-line，为某个元素的第一行文字使用样式。
- ::first-letter，为某个元素中的文字的首字母或第一个字使用样式。
- ::before，在某个元素之前插入一些内容。
- ::after，在某个元素之后插入一些内容。
- ::selection，对光标选中的元素添加样式。