您的位置：首页 > Web前端 > CSS

[提高总结五]css选择器1

2017-03-13 14:14 387 查看 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试css的选择器</title>
<link rel="stylesheet" href="css/testCssSelector.css">
</head>
<body>
<h3>1:.c1 div p:选择div元素内的所有p元素</h3>
<div class="c1">
<div>
<p>我是c1下div中的p元素</p>
<h4>
<p>我是c1下div中的h4中的p元素</p>
</h4>
<div>
<p>我是c1下div中的div中的p元素</p>
</div>
</div>
<p>我是c1下的p元素</p>
</div>
<h3>2:.c2 div>p:选择所有父级是div元素的p元素</h3>
<div class="c2">
<div>
<p>我是c2下div中的p元素</p>
<h4>
<p>我是c2下div中的h4中的p元素</p>
</h4>
<div>
<p>我是c2下div中的div中的p元素</p>
</div>
</div>
<p>我是c2下的p元素</p>
</div>
<h3>3:.c3 div+p:选择所有紧接着div元素之后的p元素</h3>
<div class="c3">
<div>
<p>我是c3下div中的p元素</p>
<h4>
<p>我是c3下div中的h4中的p元素</p>
</h4>
<div>
<p>我是c3下div中的div中的p元素</p>
</div>
</div>
<p>我是c3下的p元素</p>
<p>我是c3下的p元素</p>
</div>
<h3>4:.c4 [onclick]:选择所有带有属性元素</h3>
<div class="c4">
<button onclick="">我是带onclick按钮</button>
<button>我是不带onclick按钮</button>
<span onclick="">我是带onclick的span</span>
</div>
<h3>5:.c5 [onclick=""]:选择所有带有属性并为空的元素</h3>
<div class="c5">
<button onclick="">我是带onclick=""按钮</button>
<button onclick=null>我是带onclick=null按钮</button>
<button>我是不带onclick按钮</button>
<span onclick>我是带onclick的span</span>
</div>
<h3>6:.c6 :link,visited,active,hover</h3>
<div class="c6">
<a href="http://www.baidu.com" target="_blank">未访问链接</a>
<a href="http://www.baidu.com" target="_blank">访问过链接</a>
<a href="http://www.baidu.com" target="_blank">活动链接</a>
</div>
<h3>7:.c7:div.c7 input:focus,span:focus</h3>
<div class="c7">
<input type="text" value="获得焦点时，字颜色变化">
<span>获得焦点时，字颜色变化</span>
</div>
<h3>8:.c8:div.c8 p:first-child:first-line</h3>
<div class="c8">
<p> 第一个p:我是第一行<br>
第一个p:我是第二行
</p>
<p> 第二个p:我是第一行<br>
第二个p:我是第二行
</p>
</div>
</body>
</html>
/*条件：1，子元素为div；2，p元素在子元素中，不论p的层次与父级*/
div.c1 div p {
color: red;
}

/*条件：1，子元素为div；2，p元素在子元素中，并且父元素为div，不论p的层次与父级*/
.c2 div > p {
color: red;
}

/*条件：1，子元素为div；2，p元素必须紧挨着子元素，且只有一个。*/
.c3 div + p {
color: red;
}

/*条件：设置了onclick子元素*/
.c4 [onclick] {
color: red;
}

/*条件：设置了onclick=""子元素*/
.c5 [onclick=""] {
color: red;
}

/*条件：1，必须div元素使用；2，子元素*/
div.c6 a:link {
color: red;
}

div.c6 a:visited {
color: black;
}

div.c6 a:hover {
color: yellow;
}

div.c6 a:active {
color: brown;
}
/*条件：1，必须div元素使用；2，子元素能获取焦点，如input，span不能获得焦点*/
div.c7 input:focus, span:hover {
color: red;
}
/*1:如果有first-child:的话，first-line必须写在其后面。
2:first-line和first-letter冲突，不能同时修饰一样式。
*/
div.c8 p:first-child:first-line{
color: red;
}
div.c8 p:first-child:first-letter{
color: blue;
}
div.c8 p:before{
content: "我是插入前内容";
background-color: red;
}
div.c8 p:after{
content: "我是插入后内容";
color: white;
background-color: blue;
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  css 选择器
相关文章推荐
新的分享
章节导航