目录CSS选择器ID选择器类选择器标签选择器伪类选择器基于关系的选择器属性选择器伪对象选择器CSS层叠 定义样式的三种方式这三种方式的优先级开发者定义的样式详解CSS继承样式优先级机制 一、CSS选择器？最基础的选择器选择器例子描述#id#firstnameID选择器，选 ...
目录
- ID选择器
- 类选择器
- 标签选择器
- 伪类选择器
- 基于关系的选择器
- 属性选择器
- 伪对象选择器
- 定义样式的三种方式
- 这三种方式的优先级
- 开发者定义的样式详解
一、CSS选择器？
最基础的选择器| 选择器 | 例子 | 描述 |
| #id | #firstname | ID选择器，选取Id=firstname的元素 |
| .class | .myclass | 类选择器，选取class=myclass的所有元素 |
| element | p | 标签选择器，选取所有<p>元素 |
伪类选择器| 选择器 | 例子 | 描述 |
| :link | a:link | 匹配所有未被点击的链接，通常用于<a>元素。 |
| :visited | a:visited | 匹配所有已被访问的链接。 |
| :hover | a:hover | 选择鼠标指针位于其上的链接。 提示: :hover 选择器器可用于所有元素，不仅是链接。 |
| :active | a:active | 匹配被用户激活的链接--用户按下按键未松开时的状态。 为了产生预期的效果，以上四个选择器必须得按照先后顺序排列 :link — :visited — :hover — :active。 |
| :first-child | p:first-child | 选择每个p元素是其父级的第一个子级 |
| :last-child | p:last-child | 选择每个p元素是其父级的最后一个子级 |
| :empty | p:empty | 选择每个没有任何子级的p元素（包括文本节点） |
| :enabled | input:enabled | 选择每一个已启用的输入元素 |
| :disabled | input:disabled | 选择每一个禁用的输入元素 |
| :checked | input:checked | 选择每个选中的输入元素 |
基于关系的选择器| 选择器 | 例子 | 描述 |
| element,element | div,p | 选择所有<div>元素和<p>元素 |
| element element | div p | 选择<div>元素内的所有<p>元素 (所有子孙元素) |
| element>element | div>p | 选择所有父级是 <div> 元素的 <p> 元素 |
| element+element | div+p | 选择所有紧接着<div>元素之后的<p>元素 |
属性选择器| 选择器 | 例子 | 描述 |
| [attribute] | [target] | 选择所有带有target属性元素 |
| [attribute=value] | [target=_blank] | 选择所有使用target="_blank"的元素 |
| [attribute~=value] | [title~=flower] | 选择标题属性包含单词"flower"的所有元素 |
| [attribute*=value] | [title*=flower] | 选择标题属性包含字符串"flower"的所有元素 |
| [attribute^=value] | [title^=flower] | 选择标题属性以“flower”开头的所有元素 |
| [attribute$=value] | [title$=flower] | 选择标题属性以“flower”结尾的所有元素 |
伪对象选择器| 选择器 | 例子 | 属性 |
| :after | p:after{content:"hello";} | 在每个<p>标签内的最后插入内容“hello” ，通常搭配content来使用 |
| :before | p:before{content:"hello";} | 在每个<p>标签内的最前插入内容“hello” |
| :first-letter | p:first-letter | 选择每一个<p>元素的第一个字母 |
| :first-line | p:first-line | 选择每一个<P>元素的第一行 |
二、CSS层叠
1、一个元素的样式，可以通过多种方式定义：1）浏览器默认样式 2）用户自定义的样式 3）开发者定义的样式
2、上述上中方式之间的优先级：开发者定义样式 > 用户自定义样式 > 浏览器默认样式
3、而开发者定义的样式又分为三种情况：
1）定义为单独的CSS文件 ：开发中多为这种形式，易维护、扩展
2)定义在html页面中的<style></style>标签内 ： 这种适用于当前页面独立，样式较少的情况
3）直接写在元素上的style属性内 ：建议仅测试适用，可维护行较差。
Q：如果涉及到相同权重值（见下方第四点）的CSS样式时，到底用哪个呢？
A：一句话总结：“就近原则”，先离的近，用谁。所以三者优先级顺序： 3> 2 >1
三、CSS继承
CSS继承是一种规则，它允许某些样式不仅应用于元素本身，还可以应用于其后代。
比如：color就可以被继承 。下面这段代码，<p>标签连同子级<span>标签的文字都会变为红色。
p{color:red;}<p>三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>
海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理：https://www.xlkjsw.com
原标题：【鬼脸原创】后端程序员前端之路02
关键词：前端
*特别声明：以上内容来自于网络收集，著作权属原作者所有，如有侵权，请联系我们：
admin#shaoqun.com
（#换成@）。
