1.基础选择器
注意：相同的选择器不同的属性声明，不会被覆盖而是共同应用。
（1）通用选择器
- `*`号，选择 html 文件内所有的元素 `* {样式声明}`
- 最常用的用法是`*{margin:0;padding:0}` 清除浏览器的内外边距。但它的缺陷是性能太低，所有的元素不论是否有内外边距都会渲染，但可以做练习时使用。
（2）元素选择器（标签选择器）
- 通过标签的名字来选择 html 元素，权重值为 1，比如：`div {样式声明}`
- 弊端是当很多相同标签并存的时候，就会出现没办法精准定位的情况
（3）id 选择器
- 给标签的前半部分增加一个属性 id 这个属性可以指定一个唯一的不重复的值，权重值 100
- `<div id="abc">一个标签</div>`
- `#abc {样式声明}`
- id 名不能以数字开头，不建议使用中文命名，尽量见名知意
- 多个单词连接可以用- 、\_、驼峰
- 每个都有和其他重复的样式，使用 id 有几个弊端，过于订制化导致每一个元素都要有自己的 id 有一套自己的样式，代码量过大重复性过大。明明有重复的内容，但通过 id 选择器只能是一个一个的书写其样式，又不是很智能
4）类选择器【重要】
- 类选择器先要使用标签的`class`属性赋值，类选择器的权重值 10
- `<div class="abc">一个标签</div>`
- `.xxx {样式声明}`
- 类名不能以数字开头，不建议使用中文命名，尽量见名知意，多个单词连接可以用- 、\_、驼峰
- 一个元素可以创建多个类名，每个类名之间用空格分开`<div class="abc zyx">一个标签</div>`
- 易错点：
- 忘记给元素增加 id 或者 class 属性就直接开始写 css 样式
- class 的点，很容易忽略那个点
- 先写类名还是先定义 class 属性
<style>
.color-r {colo+r: red;}
.color-b {color: blue;}
.font-20 {font-size: 20px;}
.font-30 {font-size: 30px;}
</style>
<body>
<p class="color-r font-20">p我想20号字红色</p>
<p class="color-g font-20">p我想20号字绿色</p>
<p class="color-r font-30">p我想30号字红色</p>
</body>
2.关系选择器
在 html 结构中存在三种关系，“兄弟关系”、“父子关系”、“后代关系”
（1）后代选择器
- 先代元素（祖先）选择器写在前面，之后写一个空格，空格后写后代元素选择器。
- `祖先元素 后代元素 {样式声明}`
- 需要注意的是空格不要忘记，祖先元素不一定是父级和祖父级还可以再往上的级别都可以
- 但有弊端就是级别不同的相同选择器名称，容易造成不想要的结果，因此当你需要更深的层次时，可以继续用空格加入更深层的后代。
（2）子代选择器
- 可以选中某个元素的直接子元素，与后代不同的是子代选择器的范围更小。
- `父级元素 > 子级元素 {样式声明}`
- 层级可以向后代选择器一样延申,区别就是子代是>连接,后代是空格连接`.baba > div > div {字体颜色;}
（3）兄弟选择器
- 同一层的关系选择器，可以选中该元素后面的兄弟元素。
- `某元素选择器 ~ 该元素后面的所有兄弟 {样式声明}`
- 需要注意的是兄弟选择器可以选到该元素后面的兄弟，而选不到之前的。
3.伪类选择器
- 伪类选择器的作用是匹配同一个元素，不同状态下的样式
- `选择器:伪类 {样式声明}`
- `a:link {样式声明}` 没有被打开之前，或者没被打开过（`a:link`特有）
- `a:visited {样式声明}` 访问过后（`a:visited`特有）
- `div:hover {样式声明}` 鼠标悬停
- `p:active {样式声明}` 点击激活
- `input:focus {}`属性代表 input 标签获取焦点的样式(`<input/>`标签的属性)
- `input:cheaked {}`属性代表 input 单选、复选等 type 类型被选中后的样式(`<input/>`标签的属性)
a:link {
/* 没有被打开之前，或者没被打开过 */
color: green;
}
a:visited {
/* 访问过后 */
color: green;
}
div:hover {
/* 鼠标移入标签后展现 */
background-color: aqua;
}
p:active {
/* 鼠标按住元素不松手 */
background-color: blueviolet;
}
4.伪元素选择器
- CSS 伪元素用于设置元素的“指定部分”的样式
- :before 表示元素最前边的部分，紧随着标签的部分
- :after 表示元素的最后边的部分，紧随着标签的部分
- :before{content:""}:after{content:""} content 必须写
- 两个冒号 (`::`) 而不是一个冒号 (`:`)，这是 CSS3 规范中的一部分要求，目的是为了区分伪类和伪元素。大多数浏览器都支持这两种表示方式。
/* 在元素前面的部分 */
div::before {
content: "你好，";
color: red;
}
/* 在元素后面的部分 */
p::after {
content: "❤";
color: green;
}
5.css 优先级
（1）优先级的原则
- 顺序读取的优先级：是相同类型选择器采用顺序读取后来的优先
- 选择器的优先级：不同类型选择器，按照权重原则采用(id 选择器 100 #,类选择器 10 . ,元素选择器 1 div)
- 继承的优先级：制定样式的优先级大于继承样式的优先级
- 多个选择器一起使用的时候：根据权重值累加比较值后采用优先级
- 最高优先级：!important，直接获取最高优先级，内联样式不能加!important
（2）优先级的比重大小
按 CSS 引入方式分:`内联样式 > 内部样式 > 外部样式`（但要注意外部样式引用要在内部样式下面，才会低于内部样式的优先级）
权重越小越优先：id>class>类选择器>标签选择器
标签：优先级,样式,标签,元素,color,选择器,css 来源： https://www.cnblogs.com/moshaochen/p/15473044.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。