CSS选择器
基本选择器
通配选择器
可以选中所有的HTML元素，清除样式时可以使用
* {
color: orange;
font-size: 40px;
}
元素选择器
为元素统一设置样式，故无法实现差异化设置
/* 为所有h1元素添加样式 */
h1 {
color: red;
font-size: 60px;
}
/* 为所有p元素添加样式 */
p {
color: red;
font-size: 60px;
}
类选择器
根据元素的class值选中元素添加样式
一个标签只能有一个class，但class可以有多值，使用空格隔开
.inner {
background-color: red;
font-size: 20px;
}
/* 后来者居上原则，neibu的样式会优先于inner*/
.neibu {
background-color: blue;
font-size: 20px;
}
/* class的值可以有多个值 */
"inner neibu">学习CSS
ID选择器
根据元素的id值，精准的为某个元素添加样式
规范：
- id属性值：由
字母、数字、下划线_、短杠-组成，最好以字母开头、不要包含空格、区分大小写 - 一个元素只能拥有一个id属性，可以同时拥有
id和class属性，且多个元素的id属性值不能相同
#top-div-inner {
color: red;
font-size: 60px;
}
"top-div-inner" class="inner">学习CSS
复合选择器
交集选择器
交集有
并且的含义（通俗理解：即...又...的意思）
用于选中同时符合多个条件的元素
/* 选中类名为outer的div元素 div元素名必须放在前面，*/
div.outer {
background-color: red;
width: 300px;
height: 300px;
}
/* 选中包含inner和interior的元素 */
.inner.interior {
background-color: black;
width: 200px;
height: 200px;
}
"outer">
"inner interior">
注意：
-
有元素时，元素必须写在前面
-
id选择器、通配选择器，理论上可以作为交集的条件，但实际应用中几乎不用（没有意义）
-
交集选择器中不能出现两个元素选择器，因为一个元素不可能即是p元素又是span元素
-
用的最多的交集选择器是：元素选择器配合类名选择器，例如：
p.beauty
并集选择器
用于选中多个选择器对应的元素，又称分组选择器，并集就是或的意思，多个选择器通过,连接
.outer, .inner {}
/* 也可以竖着写 */
#outer2,
.inner2 {
}
"outer">
"inner">
"outer2">
"inner2">
元素关系
父、子元素
直接包裹某个元素的元素，就是该元素的父元素，被父元素直接包含的元素称为子元素
<div>
<h1>h1h1>
<ul>
<li>1li>
<li>2li>
<li>3li>
ul>
div>
祖先、后代元素
父元素也算是祖先元素的一种
<div>
<h1>h1h1>
<ul>
<li>1li>
<li>2li>
<li>3li>
ul>
div>
兄弟元素
具有相同父元素的元素，互为兄弟元素
<div>
<h1>h1h1>
<ul>
<li>1li>
<li>2li>
<li>3li>
ul>
div>
后代选择器
选择器之间用空格隔开
<style>
/* 选中ul中的所有li */
ul li {
color: red;
}
/* 选中ul中所有li中的a元素 */
ul li a {
color: orange;
}
/* 选中类名为ul元素中的所有li */
.ul li {
color: blue;
}
/* 选中类名为ul元素中的类名为demo的li */
.ul li.demo {
color: red;
}
style>
<div>
<ul>
<li>广州li>
<li>天河区li>
<li>深圳li>
<li>佛山li>
ul>
div>
子选择器
选择器之间使用>隔开
<style>
/* div中的子代span元素 */
div > span {
color: red;
}
/* 类名为ul的元素中的子li元素 */
.ul > li {
color: black;
}
style>
<div>
<span>广东省span>
<ul class="ul">
<li>广州li>
<li>天河区li>
<li>深圳li>
<li>佛山li>
ul>
div>
兄弟选择器
相邻兄弟选择器
相邻兄弟元素（紧挨着的下一个元素），兄弟选择器选择的是向下的兄弟级，不向上查找，使用+分割
<style>
h1 + p {
color: red;
}
style>
<div>
<p>0p>
<h1>1h1>
<p>2p>
<p>3p>
div>
通用兄弟选择器
符合条件的所有兄弟元素，通过~分割
<style>
h1 ~ p {
color: red;
}
style>
<div>
<p>0p>
<h1>1h1>
<p>2p>
<p>3p>
div>
属性选择器
选中属性值符合一定要求的元素
语法：
| 语法 | 含义 |
|---|---|
[属性名] |
选中具有某个属性的元素 |
[属性名="值"] |
选中包含某个属性，且属性值等于指定值的元素 |
[属性名^="值"] |
选中包含某个属性，且属性值以指定的值开头的元素 |
[属性名$="值"] |
选中包含某个属性，且属性值以指定的值结尾的元素 |
[属性名*=“值”] |
选择包含某个属性，属性值包含指定值的元素 |
<style>
[title] {
color: red;
}
[title = "itzhuzhu0"] {
color: black;
}
[title ^= "itzhu"] {
color: chartreuse;
}
[title $= "2"] {
color: orange;
}
[title *= "zhuzhu"] {
color: blue;
}
style>
<div title="itzhuzhu0">0div>
<div title="itzhuzhu1">1div>
<div title="itzhuzhu2">2div>
伪类选择器
是元素的一种
特殊状态，伪：假的，伪类：像类，但不是类
动态伪类
顺序不能乱，在css里的规则是后来者居上，通过:分割
| 元素 | 含义 |
|---|---|
link |
超链接未被访问的状态 |
visited |
超链接访问过的状态 |
hover |
鼠标悬停在元素上的状态 |
active |
元素激活（按下鼠标不松开）的状态 |
focus |
获取焦点的元素（表单类的元素才能使用） |
<style>
a:link {
color: darkgreen;
}
a:visited{
color: red;
}
a:hover{
color: silver;
}
a:active {
color: blue;
}
input:focus {
color: darkgreen;
}
style>
<a href="https://www.baidu.com">去百度a>
<a href="https://www.jd.com">去京东a>
<input type="text">
结构伪类
| 语法 | 含义 |
|---|---|
:first-child |
所有兄弟元素中的第一个 |
:last-child |
所有兄弟元素中的最后一个 |
:nth-child(n) |
所有兄弟元素中的第n个 |
:first-of-type |
所有同类型兄弟元素中的第一个 |
:last-of-type |
所有同类型兄弟元素中的最后一个 |
:nth-of-type(n) |
所有同类型兄弟元素中的第n个 |
:nth-last-child(n) |
所有兄弟元素中的倒数第n个 |
:nth-last-of-type(n) |
所有同类型兄弟元素中的 倒数第n个 |
:only-child |
选择没有兄弟的元素（独生子女） |
:only-of-type |
选择没有同类型兄弟的元素 |
:root |
根元素（html标签） |
:empty |
内容为空元素（空格也算内容） |
n的值：
| 值 | 含义 |
|---|---|
| 0/不写 | 什么都选不中 |
| 1~正无穷的整数 | 选中对应序号的子元素 |
| 2n或even | 选中序号为偶数的子元素 |
| 2n+1或odd | 选中序号为奇数的子元素 |
| -n+3 | 选中的是前 3 个 |
| 3n+4（公式写法） | 结果为：3*0+4=4 |
<style>
p:first-child {
color: red;
}
p:last-child {
color: red;
}
/* 不包含span，上面两个也是*/
p:nth-child(2) {
color: red;
}
span:first-of-type {
color: red;
}
p:last-of-type {
color: red;
}
p:nth-of-type(2) {
color: red;
}
p:nth-last-child(2) {
color: blue;
}
p:nth-last-of-type(2) {
color: blue;
}
a:only-child {
color: blue;
}
a:only-of-type {
color: red;
}
/* 根元素就是html标签 */
:root {
background-color: red;
}
:empty {
width: 10px;
height: 10px;
background-color: red;
}
style>
<div>
<span>0span>
<p>1p>
<p>2p>
<p>3p>
<span>4
<a>aa>
span>
<div>div>
div>
否定伪类
not（选择器）排除满足括号中条件的元素
<style>
/* 排除div中的p元素，且类名为last的元素 */
div > p:not(.last) {
color: red;
}
div > p:not(:last-child) {
color: red;
}
style>
<div>
<p>1p>
<p>2p>
<p>3p>
<p class="last">4p>
div>
UI伪类
- checked：被选中的复选框或单选按钮
- enable：可用的表单元素（没有 disabled 属性）
- disabled：不可用的表单元素（有 disabled 属性）
<style>
/* checked、radio无法设置背景色 */
input:checked {
width: 100px;
height: 100px;
}
input:enabled {
background-color: blue;
}
input:disabled {
background-color: red;
}
style>
<input type="checkbox">
<input type="radio" name="gender">
<input type="radio" name="gender">
<input type="text">
<input type="text" disabled>
目标伪类
target：选中锚点指向的元素
<style>
div {
background-color: red;
height: 200px;
}
div:target {
background-color: blue;
}
style>
<a href="#one">onea>
<a href="#two">twoa>
<a href="#three">threea>
<div id="one">第1个div>
<div id="two">第2个div>
<div id="three">第3个div>
语言伪类
:lang()：根据指定的语言选择元素（本质是看 lang 属性的值）
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
div:lang(en) {
color: red;
}
div:lang(zh-CN) {
color: blue;
}
style>
head>
<body>
<div lang="zh-CN">itzhuzhu你好啊div>
<div>itzhuzhu你好啊div>
body>
html>
伪元素选择器
选中元素中的一些特殊位置，通过::，冒号前后不能空格
常用伪元素：
| 元素 | 含义 |
|---|---|
first-letter |
选中元素中的第一个文字 |
first-line |
选中元素中的第一行文字 |
selection |
选中被鼠标选中的内容 |
placeholder |
选中输入框的提示文字 |
before |
在元素最开始的位置，创建一个子元素（必须用content属性指定内容） |
after |
在元素最后的位置，创建一个子元素（必须用content属性指定内容） |
<style>
p::first-letter {
font-size: 20px;
}
p::first-line {
background-color: red;
}
p::selection {
background-color: orange;
}
input::placeholder {
color: blue;
}
p::before {
content: "￥";
}
p::after {
content: ".00元";
}
style>
head>
<body>
<p>199p>
<input type="text" placeholder="请输入用户名">
选择器优先级
通过不同的选择器，选中相同的元素 ，并且为相同的样式名设置不同的值时，就发生了样式的冲突。
行内样式 > ID选择器 > 类选择器 > 元素选择器 > 通配选择器
注意：并集选择器的每一个部分是分开计算权重的
计算选择器权重格式： (a,b,c)
a：ID选择器的个数b：类、伪类、属性选择器的个数c：元素、伪元素选择器的个数
鼠标放在选择器上就能快速查看权重，并集选择器可以放在每一个元素上查看权重
**比较：**按照从左到右的顺序，依次比较大小，当前位胜出后，后面的不再对比，例如：
(1,0,0) > (0,2,2)
(1,1,0) > (1,0,3)
(1,1,3) > (1,1,2)
特殊规则：
-
行内样式权重大于所有选择器
-
!important的权重，大于行内样式，权重最高
<style>
#box {
width: 100px;
height: 100px;
background-color: red;
}
#box {
width: 100px;
height: 100px;
background-color: blue;
!important
}
style>
<div id="box">div>
CSS三大特性
层叠性
如果发生了样式冲突，那就会根据选择器优先级进行样式的层叠（覆盖），如果权重相同，就比较书写顺序
什么是样式冲突？
- 元素的同一个样式名，被设置了不同的值，这就是冲突
#box {
width: 100px;
height: 100px;
background-color: red;
}
#box {
width: 100px;
height: 100px;
background-color: blue;
!important
}
继承性
元素会自动拥有
其父元素、或祖先元素上所设置的某些样式（参照MDN网站，可查询属性是否可被继承）
继承规则：就近继承（先去父元素找，再去爷爷元素找…）
<style>
div {
color: red;
}
p {
color: blue;
}
style>
<div>
<span>1span>
<p>
<span>2span>
p>
div>
优先级
!important > 行内样式 > ID选择器 > 类选择器 > 元素选择器 > 通配选择器 > 继承的样式