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-)
