1. 根选择器 :root
:root{}就等同于html{}, 一般来说, 推荐使用:root{}.
- <style>
- :root {
- background:green;
- }
- </style>
- <div>:root选择器的演示</div>
2. 否定选择器 :not
否定选择器, 就是除此之外的
- <style>
- input:not([type="submit"]) {
- border: 1px solid red;
- }
- </style>
- <form action="#">
- <div>
- <label for="name">账号:</label>
- <input type="text" name="name" id="name" placeholder="请填写账号" />
- </div>
- <div>
- <label for="password">密码:</label>
- <input type="password" name="password" id="password" placeholder="请填写密码" />
- </div>
- <div>
- <input type="submit" value="Submit" />
- </div>
- </form>
3. 空选择器 :empty
注意: :empty 只对一点内容都没有的元素生效, 哪怕有一个空格都不行.
- <style>
- div:empty {
- border: 1px solid green;
- }
- </style>
- <div>我这里有内容</div>
- <div> <!-- 我这里有一个空格 --></div>
- <div></div><!-- 我这里任何内容都没有 -->
4.目标选择器 :target
超链接地址, 与id对应
- <style>
- .not_show{
- display: none;
- }
- #test:target{
- display:block;
- }
- </style>
- <h2><a href="#test">test</a></h2>
- <div class="not_show" id="test">
- 这是一个测试
- </div>
- <style>
- #pipi:target {
- background: orange;
- color: #fff;
- }
- #ruby:target {
- background: blue;
- color: #fff;
- }
- #aaron:target {
- background: red;
- color: #fff;
- }
- </style>
- <h2><a href="#pipi">pipi</a></h2>
- <div id="pipi">
- content for pipi
- </div>
- <h2><a href="#ruby">ruby</a></h2>
- <div id="ruby">
- content for ruby
- </div>
- <h2><a href="#aaron">Brand</a></h2>
- <div id="aaron">
- content for aaron
- </div>
5. 第一个与最后一个子元素 :first-child :last-child
CSS Code复制内容到剪贴板- <style>
- ul li:first-child a {
- color:green;
- }
- ul li:last-child a {
- color:red;
- }
- </style>
- <ul>
- <li><a href="##">Link1</a></li>
- <li><a href="##">Link2</a></li>
- <li><a href="##">Link3</a></li>
- <li><a href="##">Link4</a></li>
- <li><a href="##">Link5</a></li>
- </ul>
6. 指定子元素选择器/奇偶选择器 :nth-child(n) :nth-last-child(n)
- <style>
- /*2n 偶数*/
- ul li:nth-child(2n) {
- color:green;
- }
- /* 用关键词 odd, 表示偶数, 效果同上
- ul li:nth-child(odd) {
- color:green;
- }
- */
- /*2n+1 奇数*/
- ul li:nth-child(2n+1) {
- color:red;
- }
- /* 用关键词 even, 表示奇数, 效果同上
- ul li:nth-child(even) {
- color:red;
- }
- */
- /* 指定子元素索引 */
- ul li:nth-child(5) {
- background: #08c;
- }
- /* 倒数第五个 */
- ul li:nth-last-child(5){
- background: yellow;
- }
- </style>
- <ul>
- <li>item1</li>
- <li>item2</li>
- <li>item3</li>
- <li>item4</li>
- <li>item5</li>
- <li>item6</li>
- <li>item7</li>
- <li>item8</li>
- <li>item9</li>
- <li>item10</li>
- </ul>
7. 第一个与最后一个匹配类型的子元素 first-of-type last-of-type
- <style>
- .wrapper > p:first-of-type {
- background: green;
- }
- .wrapper > p:last-of-type {
- background: orange;
- }
- </style>
- <div class="wrapper">
- <div>我是一个块元素,我是.wrapper的第一个子元素</div>
- <p>我是一个段落元素,我是不是.wrapper的第一个子元素,但是他的第一个段落元素</p>
- <p>我是一个段落元素</p>
- <div>我是一个块元素</div>
- </div>
8. 指定匹配类型子元素选择器/匹配类型奇偶选择器 :nth-of-type(n) :nth-last-of-type(n)
- <style>
- .wrapper > p:nth-of-type(2n){
- background: orange;
- }
- </style>
- <div class="wrapper">
- <div>我是一个Div元素</div>
- <p>我是一个段落元素</p>
- <div>我是一个Div元素</div>
- <p>我是一个段落</p>
- <div>我是一个Div元素</div>
- <p>我是一个段落</p>
- <div>我是一个Div元素</div>
- <p>我是一个段落</p>
- <div>我是一个Div元素</div>
- <p>我是一个段落</p>
- <div>我是一个Div元素</div>
- <p>我是一个段落</p>
- <div>我是一个Div元素</div>
- <p>我是一个段落</p>
- <div>我是一个Div元素</div>
- <p>我是一个段落</p>
- </div>
9. 唯一子元素选择器 only-child
匹配的元素的父元素中仅有一个子元素,而且是一个唯一的子元素
- <style>
- .post p:only-child {
- background: orange;
- }
- </style>
- <div class="post">
- <p>我是一个段落</p>
- <p>我是一个段落</p>
- </div>
- <div class="post">
- <p>我是一个段落</p>
- </div>
10. 唯一匹配类型的子元素 only-of-type
CSS Code复制内容到剪贴板- <style>
- .wrapper > div:only-of-type {
- background: orange;
- }
- </style>
- <div class="wrapper">
- <p>我是一个段落</p>
- <p>我是一个段落</p>
- <p>我是一个段落</p>
- <div>我是一个Div元素</div>
- </div>
- <div class="wrapper">
- <div>我是一个Div</div>
- <ul>
- <li>我是一个列表项</li>
- </ul>
- <p>我是一个段落</p>
- </div>
11. 可用选择器 :enabled
CSS Code复制内容到剪贴板- <style>
- div{
- margin: 20px;
- }
- input[type="text"]:enabled {
- background: #ccc;
- border: 2px solid red;
- }
- </style>
- <form action="#">
- <div>
- <label for="name">Text Input:</label>
- <input type="text" name="name" id="name" placeholder="可用输入框" />
- </div>
- <div>
- <label for="name">Text Input:</label>
- <input type="text" name="name" id="name" placeholder="禁用输入框" disabled="disabled" />
- </div>
- </form>
12. 不可用选择器 :disabled
CSS Code复制内容到剪贴板- <style>
- form {
- margin: 50px;
- }
- div {
- margin-bottom: 20px;
- }
- input {
- background: #fff;
- padding: 10px;
- border: 1px solid orange;
- border-radius: 3px;
- }
- input[type="text"]:disabled {
- background: rgba(0,0,0,.15);
- border: 1px solid rgba(0,0,0,.15);
- color: rgba(0,0,0,.15);
- }
- </style>
- <form action="#">
- <div>
- <input type="text" name="name" id="name" placeholder="我是可用输入框" />
- </div>
- <div>
- <input type="text" name="name" id="name" placeholder="我是不可用输入框" disabled />
- </div>
- </form>
13. 被选中选择器 :checked
CSS Code复制内容到剪贴板- <style>
- form {
- border: 1px solid #ccc;
- padding: 20px;
- width: 300px;
- margin: 30px auto;
- }
- .wrapper {
- margin-bottom: 10px;
- }
- .box {
- display: inline-block;
- width: 20px;
- height: 20px;
- margin-right: 10px;
- position: relative;
- border: 2px solid orange;
- vertical-align: middle;
- }
- .box input {
- opacity: 0;
- positon: absolute;
- top:0;
- left:0;
- }
- .box span {
- position: absolute;
- top: -10px;
- rightright: 3px;
- font-size: 30px;
- font-weight: bold;
- font-family: Arial;
- -webkit-transform: rotate(30deg);
- transform: rotate(30deg);
- color: orange;
- }
- input[type="checkbox"] + span {
- opacity: 0;
- }
- input[type="checkbox"]:checked + span {
- opacity: 1;
- }
- </style>
- <form action="#">
- <div class="wrapper">
- <div class="box">
- <input type="checkbox" checked="checked" id="usename" /><span>√</span>
- </div>
- <lable for="usename">我是选中状态</lable>
- </div>
- <div class="wrapper">
- <div class="box">
- <input type="checkbox" id="usepwd" /><span>√</span>
- </div>
- <label for="usepwd">我是未选中状态</label>
- </div>
- </form>
14. 被鼠标选中, 高亮选择器 ::selection
CSS Code复制内容到剪贴板- <style>
- ::-moz-selection {
- background: red;
- color: green;
- }
- ::selection {
- background: red;
- color: green;
- }
- </style>
- <p>拿鼠标选中我, 试试看!</p>
15. 只读选择器 :read-only
CSS Code复制内容到剪贴板- <style>
- form {
- width: 300px;
- padding: 10px;
- border: 1px solid #ccc;
- margin: 50px auto;
- }
- form > div {
- margin-bottom: 10px;
- }
- input[type="text"]{
- border: 1px solid orange;
- padding: 5px;
- background: #fff;
- border-radius: 5px;
- }
- input[type="text"]:-moz-read-only{
- border-color: #ccc;
- }
- input[type="text"]:read-only{
- border-color: #ccc;
- }
- </style>
- <form action="#">
- <div>
- <label for="name">姓名:</label>
- <input type="text" name="name" id="name" placeholder="大漠" />
- </div>
- <div>
- <label for="address">地址:</label>
- <input type="text" name="address" id="address" value="中国上海" readonly />
- </div>
- </form>
16. 非只读选择器 :read-write
CSS Code复制内容到剪贴板- <style>
- form {
- width: 300px;
- padding: 10px;
- border: 1px solid #ccc;
- margin: 50px auto;
- }
- form > div {
- margin-bottom: 10px;
- }
- input[type="text"]{
- border: 1px solid orange;
- padding: 5px;
- background: #fff;
- border-radius: 5px;
- }
- input[type="text"]:-moz-read-only{
- border-color: #ccc;
- }
- input[type="text"]:read-only{
- border-color: #ccc;
- }
- input[type="text"]:-moz-read-write{
- border-color: #f36;
- }
- input[type="text"]:read-write{
- border-color: #f36;
- }
- </style>
- <form action="#">
- <div>
- <label for="name">姓名:</label>
- <input type="text" name="name" id="name" placeholder="大漠" />
- </div>
- <div>
- <label for="address">地址:</label>
- <input type="text" name="address" id="address" placeholder="中国上海" readonly="readonly" />
- </div>
- </form>
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
P70系列延期,华为新旗舰将在下月发布
3月20日消息,近期博主@数码闲聊站 透露,原定三月份发布的华为新旗舰P70系列延期发布,预计4月份上市。
而博主@定焦数码 爆料,华为的P70系列在定位上已经超过了Mate60,成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢?
根据目前爆料的消息来看,华为P70系列将推出三个版本,其中P70和P70 Pro采用了三角形的摄像头模组设计,而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智,但辨识度绝对拉满。
更新日志
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]