CSS Code复制内容到剪贴板
- <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>