1. 根選擇器:root
:root{}就等於html{}, 一般來說, 建議使用:root{}.
<style>
:root {
background:green;
}
</style>
<p>:root选择器的演示</p>2. 否定選擇器:not
#否定選擇器, 就是除此之外的
<style>
input:not([type="submit"]) {
border: 1px solid red;
}
</style>
<form action="#">
<p>
<label for="name">账号:</label>
<input type="text" name="name" id="name" placeholder="请填写账号" />
</p>
<p>
<label for="password">密码:</label>
<input type="password" name="password" id="password" placeholder="请填写密码" />
</p>
<p>
<input type="submit" value="Submit" />
</p>
</form>3. 空選擇器:empty
注意: :empty 只對一點內容都沒有的元素生效, 哪怕有一個空格都不行.
<style>
p:empty {
border: 1px solid green;
}
</style>
<p>我这里有内容</p>
<p> <!-- 我这里有一个空格 --></p>
<p></p><!-- 我这里任何内容都没有 -->#4.目標選擇器:target
超連結位址, 與id對應
<style>
.not_show{
display: none;
}
#test:target{
display:block;
}
</style>
<h2><a href="#test">test</a></h2>
<p class="not_show" id="test">
这是一个测试
</p>
<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>
<p id="pipi">
content for pipi
</p>
<h2><a href="#ruby">ruby</a></h2>
<p id="ruby">
content for ruby
</p>
<h2><a href="#aaron">Brand</a></h2>
<p id="aaron">
content for aaron
</p>5. 第一個與最後一個子元素:first-child :last-child
<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>
<p class="wrapper">
<p>我是一个块元素，我是.wrapper的第一个子元素</p>
<p>我是一个段落元素，我是不是.wrapper的第一个子元素，但是他的第一个段落元素</p>
<p>我是一个段落元素</p>
<p>我是一个块元素</p>
</p>8. 指定符合類型子元素選擇器/匹配型別奇偶選擇器:nth-of-type(n) :nth-last-of-type(n )
<style>
.wrapper > p:nth-of-type(2n){
background: orange;
}
</style>
<p class="wrapper">
<p>我是一个p元素</p>
<p>我是一个段落元素</p>
<p>我是一个p元素</p>
<p>我是一个段落</p>
<p>我是一个p元素</p>
<p>我是一个段落</p>
<p>我是一个p元素</p>
<p>我是一个段落</p>
<p>我是一个p元素</p>
<p>我是一个段落</p>
<p>我是一个p元素</p>
<p>我是一个段落</p>
<p>我是一个p元素</p>
<p>我是一个段落</p>
<p>我是一个p元素</p>
<p>我是一个段落</p>
</p>9. 唯一子元素選擇器only-child
匹配的元素的父元素中僅有一個子元素，而且是一個唯一的子元素
<style>
.post p:only-child {
background: orange;
}
</style>
<p class="post">
<p>我是一个段落</p>
<p>我是一个段落</p>
</p>
<p class="post">
<p>我是一个段落</p>
</p>#10. 唯一符合類型的子元素only-of-type
#<style>
.wrapper > p:only-of-type {
background: orange;
}
</style>
<p class="wrapper">
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个p元素</p>
</p>
<p class="wrapper">
<p>我是一个p</p>
<ul>
<li>我是一个列表项</li>
</ul>
<p>我是一个段落</p>
</p>11. 可用選擇器:enabled
<style>
p{
margin: 20px;
}
input[type="text"]:enabled {
background: #ccc;
border: 2px solid red;
}
</style>
<form action="#">
<p>
<label for="name">Text Input:</label>
<input type="text" name="name" id="name" placeholder="可用输入框" />
</p>
<p>
<label for="name">Text Input:</label>
<input type="text" name="name" id="name" placeholder="禁用输入框" disabled="disabled" />
</p>
</form>#12. 不可用選擇器:disabled
<style>
form {
margin: 50px;
}
p {
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="#">
<p>
<input type="text" name="name" id="name" placeholder="我是可用输入框" />
</p>
<p>
<input type="text" name="name" id="name" placeholder="我是不可用输入框" disabled />
</p>
</form>#13. 被選取選擇器:checked
#<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="#">
<p class="wrapper">
<p class="box">
<input type="checkbox" checked="checked" id="usename" /><span>√</span>
</p>
<lable for="usename">我是选中状态</lable>
</p>
<p class="wrapper">
<p class="box">
<input type="checkbox" id="usepwd" /><span>√</span>
</p>
<label for="usepwd">我是未选中状态</label>
</p>
</form>14. 被滑鼠選取, 高亮選擇器::selection
<style>
::-moz-selection {
background: red;
color: green;
}
::selection {
background: red;
color: green;
}
</style>
<p>拿鼠标选中我, 试试看!</p>#15. 唯讀選擇器:read-only
<style>
form {
width: 300px;
padding: 10px;
border: 1px solid #ccc;
margin: 50px auto;
}
form > p {
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="#">
<p>
<label for="name">姓名:</label>
<input type="text" name="name" id="name" placeholder="大漠" />
</p>
<p>
<label for="address">地址:</label>
<input type="text" name="address" id="address" value="中国上海" readonly />
</p>
</form>#16. 非唯讀選擇器:read-write
# #<style>
form {
width: 300px;
padding: 10px;
border: 1px solid #ccc;
margin: 50px auto;
}
form > p {
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="#">
<p>
<label for="name">姓名:</label>
<input type="text" name="name" id="name" placeholder="大漠" />
</p>
<p>
<label for="address">地址:</label>
<input type="text" name="address" id="address" placeholder="中国上海" readonly="readonly" />
</p>
</form>以上是分享CSS3中的常用選擇器使用範例整理的詳細內容。更多資訊請關注PHP中文網其他相關文章！
