您的位置：首页 > Web前端 > CSS
CSS3及CSS2中易忘记的选择器记录

2016-09-10 10:16 260 查看
<span style="font-family:Microsoft YaHei;font-size:12px;"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>易忘记选择器</title>
<style>
/*子元素选择器*/
li>a{
color:red;
}

/*后代选择器*/
p a{
color:yellow;
}

/*相邻选择器*/
h1+p{
color:green;
}

/*属性选择器*/
a[href][title="liutao"]{
color:red;
font-size:20px;
}

/*组选择器*/
h1,div>h2{
color:green;
font-family:微软雅黑;
}

/*复合选择器*/
p.test{
color:yellow;
}

/*伪类选择器*/
/*获取某个父元素内的第二个li元素，注意：如果把2替换成n就表示全选，
替换成2n就表示选偶数，替换成n+5就表示从第五个元素开始全选。使用nth-last-child(2)
一样，只是从后面开始选择*/
li:nth-child(2){
background-color:#333;
color:white;
}
/*获取与li元素比例的第三个元素，与上面的选择器的区别在于这是选择的第三个，即使不是li
元素都可以。如果前面不写li元素就会选择所有并列元素的第三个。使用nth-last-of-type(3)
效果一样，只是从后面开始选择。*/
li:nth-of-type(3){
background-color:#444;
color:white;
}
/*选择元素的最后一个子元素，
注意使用:first-of-type和使用nth-of-type(1)一样，使用last-of-type和使用
nth-last-of-type(1)一样*/
ul :last-child{
background-color:green;
}
/*如果一个元素只有一个子元素，那么这个p元素就被选中，注意和only-of-type基本相同，
但是如果不是用p，那么only-child不会选择body元素，而第二个会选择中body元素。*/
p:only-child{
color:blue;
}
/*使用:root根元素选择器和使用html元素选择器相同*/
:root{
background:yellow;
}
/*p元素里卖弄没有内容的被选中*/
p:empty{
display:none;
}

/*：target可用于选择当前活动的目标元素*/
：target{
border:2px solid #D4D4D4;
background-color:#e5eecc;
}

/*否定伪类:div的后代元素中id不是.test的元素*/
div :not(.test){
background:red;
}

/*
注意：CSS2中有的伪类选择器：hover,:active,:visited,:link
*/

</style>
<style>
ul>li{
display:inline-block;
height:24px;
line-height:24px;
width:24px;
font-size:15px;
text-align:center;
background-color:rgb(226,129,129);
border-radius:4px;
margin:5px;
}
</style>
</head>
<body>
<!-- 子元素选择器 -->
<li><a href="#">www.liutao.com</a></li>
<li><div><a href="#">www.liutao.com</a></div></li>

<!-- 后代选择器 -->
<p><a href="#">www.liutao.com</a></p>
<p><div><a href="#">www.liutao.com</a></div></p>

<!-- 注意：子选择器和后代选择器的异同在于子选择器只针对儿子，后代选择器不仅有儿子还有孙子，曾孙子 -->

<!-- 相邻元素选择器 -->
<div class="content">
<h1>测试</h1>
<p>测试内容</p>
</div>

<!-- 属性选择器 -->
<a href="#" title="liutao">www.liutao.com</a>
<a href="#">www.liutao2.com</a>

<!-- 组选择器 -->
<h1>标题1</h1>
<div><h2>标题2</h2></div>

<!-- 复合选择器 ,注意复合选择器中间不要留空格，不然就和后代选择器相同了，而且复合选择器的两个条件都必须满足-->
<p class="test">复合选择器</p>

<!-- 为类选择器 -->
<ul class="test">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
<div>
<ul class="test_one">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
</div>

<div>
<p>only-child</p>
<p></p>
</div>
<div>
<p>only-child</p>
<p>only-child</p>
</div>
<div>
<div>only-child</div>
</div>

<!-- 目标伪类：target -->
<a href="#a1">跳转至内容1</a><!-- 点击a1链接，则内容1的背景变为：target中的设置 -->
<a href="#a2">跳转至内容2</a><!-- 点击a2链接，则内容2的背景变为：target中的设置 ，a1恢复原状-->
<p id="a1"><b>内容1...</b></p>
<p id="a2"><b>内容2...</b></p>

<!-- 否定伪类 -->

</body>
</html></span>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理
标签：
相关文章推荐
新的分享
章节导航