C3新增选择器：
1.属性选择器
<style>
属性选择器：根据标签的属性找到某一个标签
标志:[]
常见书写方式：
1. [属性名字]====找到带有该属性名字的标签
2. [属性名字=‘属性值’]==找到带有该属性名字并且属性值也一致的标签
(精准查找，要求属性名字和属性值必须完全一致才可以)
3. [属性名字~='值']===模糊查找，要求值满足其中一个词即可
4. [属性名字*='值']===更模糊查找，要求值满足其中的一个字即可
5. [属性名字^='值']====要求必须以。。。开头
6. [属性名字$='值']====要求必须以。。。结尾
</style>2.结构伪类选择器 nth-child(){}
<style>
结构伪类常见书写方式：
第一类：找第几个孩子
1. :first-child====找第一个孩子
2. :last-child====找最后一个孩子
3. :nth-child()，正着找
数字：写数字几就是找第几个孩子，
2n或者even:找偶数
2n+1或者odd:找奇数
4. :nth-last-child(),倒着找
数字：写数字几就是找倒数第几个孩子。
第二类： 从限定的类型中找第几个
1. :fist-of-type,从同类型中找出第一个孩子
2. :last-of-type,从同类型中找出最后一个孩子
3. :nth-of-type(数字),从同类型中找出第几个个孩子
</style>3.目标伪类 ( 一般结合锚点使用 )
:target，可以实现目标被激活之后更改一些样式的效果
<style>
/* 添加一些样式来美化锚点链接 */
ul {
list-style: none;
padding: 0;
}
li {
margin-bottom: 10px;
}
a {
text-decoration: none;
color: #0366d6;
font-weight: bold;
}
a:hover {
text-decoration: underline;
}
section {
margin-top: 20px;
padding: 10px;
border: 1px solid #ccc;
height: 1000px;
}
section:target {
background-color:pink; /* 添加背景色以突出显示 */
}
</style>
<body>
<h2>跳转到不同部分</h2>
<ul>
<li><a href="#section1">跳转到第一部分</a></li>
<li><a href="#section2">跳转到第二部分</a></li>
</ul>
<section id="section1">
<h3>第一部分</h3>
<p>这是第一部分的内容。</p>
</section>
<section id="section2">
<h3>第二部分</h3>
<p>这是第二部分的内容。</p>
</section>
</body>
4.否定伪类
:not(你要否定的元素, 其实就是一个取反操作。找到除了谁之外的)
5.动态伪类
:link========未访问
:visited=====访问过
:hover=====⿏标滑过
:active=====⿏标按下
css伪类选择器，css伪元素_css div active-CSDN博客文章浏览阅读120次。link visited hover active_css div active
:focus======⿏标获得焦点的状态（一般是用在表单元素）
6.UI状态伪类
<body>
<!-- 表单元素 -->
<input type="text" placeholder="可用状态" />
<input type="text" placeholder="禁用状态" disabled />
<!-- 单选框 -->
<label>
<input type="radio" name="gender" value="male" checked />
Male
</label>
<label>
<input type="radio" name="gender" value="female" />
Female
</label>
<!-- 鼠标 -->
<ul>
<li>鼠标选中我变色</li>
<li>鼠标选中我变色</li>
<li>鼠标选中我变色</li>
</ul>
</body>
<style>
/* UI状态伪类选择器::: */
input:enabled {
border: 1px solid green;
}
input:disabled {
border: 1px solid red;
}
/* 鼠标选中文本时的样式 */
::selection {
background-color: yellow;
color: red;
}
</style>
7.层级选择器
<body>
<div>
<p>这是一个段落</p>
<ul>
<li>列表项1 <p>内部</p> </li>
<li>列表项2</li>
</ul>
<span>这是一个<span>内部 <span>嵌套的 <span>元素 </span></span></span></span>
</div>
<h2>标题</h2>
<p>段落1</p>
<p>段落2</p>
<p>段落3</p>
</body>
<style>
/* 层级选择器::: */
/* 后代选择器 */
div p {
/* 会选择<div> 下所有 <p> 元素, 嵌套的也会选择 */
color: red;
}
div>p {
/* 只会选择直接位于 <div> 内部的一层的 <p> 元素 */
color: blue;
}
/* 兄弟选择器 */
h2 + p{
/* 会选择紧跟在 <h2> 后面的第一个 <p> 元素 */
color: red;
}
h2 ~ p{
/* 会选择所有位于 <h2> 后面的 <p> 元素，包括 段落2 和 段落3 */
color: blue;
}
</style>
盒子阴影
<style>
.box{
width: 200px;
height: 200px;
background-color: pink;
margin: 50px auto;
/*
1.水平位置
2.垂直位置
3.阴影的模糊度，值越大越模糊
4.阴影的大小，值越大阴影的范围会越大
5.阴影的颜色
6.inset,不写默认是外侧阴影，写了就变成内部阴影
注意：值与值之间空格隔开，赋值顺序不要打乱,支持写多组阴影，一组之间逗号隔开。
*/
box-shadow: 10px 10px 15px 1px green,
-5px -10px 20px 3px red,
-5px 10px 20px 3px blue;
}
</style>
<div class="box"></div>
文字阴影
<style>
.box{
/* 水平位置 垂直位置 模糊度 颜色*/
/* 注意：值与值之间空格隔开，赋值顺序不要打乱,支持写多组阴影，一组之间逗号隔开。 */
text-shadow: 3px 3px 4px red,-3px 3px 4px green;
}
</style>
</head>
<body>
<div class="box">文字文字</div>
</body>
背景
<style>
.box {
width: 600px;
height: 800px;
/* background-color: pink; */
border: 5px dashed red;
/* background-image: url(img/cat.jpg); */
/* background-repeat: no-repeat; */
padding: 20px;
/* background-origin: content-box; */
/* background-clip: content-box; */
/* background-size: cover; */
background: url(img/cat.jpg) no-repeat,
url(img/pig.jpg) no-repeat right bottom,
url(img/111.jpg) no-repeat left bottom;
background-color: pink;
}
</style>
<div class="box">wenzi</div>
和背景相关的样式：
1.背景的颜色：background-color
2.背景的图片：background-image
3.背景图片的平铺规则：background-repeat
4.背景图片的位置：background-position
新增：
1.背景图片的起点 background-origin
border-box:将起点设置在边框线上
padding-box：将起点设置在内间距上,默认值
content-box：将起点设置在内容区上
2.背景图片的裁切 background-clip
border-box:将裁切区域设置在边框上（只要超出边框线就会被裁掉）,默认值
padding-box：将裁切区域设置在内间距上（只要超出内间距区域就会被裁掉）
content-box：将裁切区域设置在内容区（只要超出内容区就会被裁掉）
3.背景图片的大小 background-size: 宽度 高度，一般调整宽度即可，高度会跟着等比例变化的（重点重点重点）
cover:等比例放大,直到图片铺满整个盒子为止，所以有可能会出现一个边被裁掉的现象
contain:等比例放大,只要有一个边铺满就会立即停止，所以有可能会出现一个边留白的现象
4.多背景：使用简写方式写，一组之间逗号隔开，前者覆盖后者
使用多背景的时候如果还想要背景颜色，最好单独再起一行写背景颜色，并且颜色这句话要写在简写方式的后面
浏览器内核与前缀
1.⾕歌chrome======内核(webkit)========前缀（-webkit-）
2.苹果safari======内核（webkit）======前缀(-webkit-)
3.⽕狐firefox=====内核（gecko）=======前缀(-moz-)
4.欧朋opera=======内核（presto）======前缀（-o-)
