CSS笔记2-复合选择器

最新推荐文章于 2024-07-20 16:31:22 发布

原创最新推荐文章于 2024-07-20 16:31:22 发布 · 145 阅读

0 ·

CC 4.0 BY-SA版权

复合选择器

CSS2.1

前提：样式继承
后代选择器：空格

ul b{
 		color:pink;
 	}

交集选择器：连续书写
交集没有继承性

 	li.mystyle2{
 		background-color:pink;
 	}

并集选择器：逗号

 	h3,h4{
 		color:yellow
 	}

CSS3（类似于JQuery）

层次选择器
–后代选择器：空格
–子代选择器：>
–相邻同辈选择器（只对后面的元素有效）：+

 	h4+h1
 	{
 		color:blue;
 	}

–通用同辈选择器（只要是同辈都可以）：~

 	h4~h1
 	{
 		color:blue;
 	}

结构伪类选择器

<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
    /*设置第一个li标签子类*/
 	li:first-child{
 		color:blue;
 	}
 	/*设置最后一个li标签子类*/
 	li:last-child{
 		color:red;
 	}
 	/*设置第n个li标签子类*/
 	li:nth-child(2){
		color:green;
 	}
 	li:nth-child(3){
		color:pink;
 	}
 	/*设置第一个p标签格式*/
 	p:first-of-type{
 	background-color:yellow;
 	}
 	 /*设置最后一个p标签格式*/
 	p:last-of-type{
 	background-color:blue;
 	}
 	 /*设置第n个p标签格式*/
 	p:nth-of-type(2){
 	background-color:pink;
 	}
</style>
</head>
<body>
	<p>p1</p>
	<p>p2</p>
	<p>p3</p>
	<ul>
		<li>123</li>
		<li>456</li>
		<li>789</li>
		<li>111111</li>
	</ul>
</body>
</html>

属性选择器

	input[name]{/*设置有name元素的标签的背景色为黄色*/
		background-color:yellow;
	}
	input[name="username"]{  /*设置name=username的元素格式*/
		color:blue;	
	}
	input[name^=a]{/*选中name以a开头的元素*/
		background-color:pink;
	}
	input[name$=b]{/*选中name以b结尾的元素*/
		background-color:gray;
	}
	input[name*=k]{/*选中name内含k的元素*/
		background-color:red;
	}