谁知道[class^="small"]:nth-child(1)这种属性加伪类选择器为什么不生效？

Question

html

<div class="bg">
			<div class="small1"></div>
			<div class="small2"></div>
			<div class="small3"></div>
			<div class="big1"></div>
			<div class="big2"></div>
			<div class="big3"></div>
		</div>

css

html,
			body {
				width: 100%;
				height: 100%;
				margin: 0px;
				padding: 0px;
			}
			
			.bg {
				background-color: coral;
				width: 100%;
				height: 100%;
				background-image: url(img/001.png);
				background-size: 100% 100%;
				position: relative;
			}
			
			[class^="small"] {
				width: 166px;
				height: 111px;
				float: left;
				margin-left: 30px;
				margin-top: 40px;
			}
			
			[class^="small"]:nth-child(1) {
				background-image: url(img/1.png);
			}
			
			[class^="small"]:nth-child(2) {
				background-image: url(img/2.png);
			}
			
			[class^="small"]:nth-child(3) {
				background-image: url(img/3.png);
			}
			
			[class^="big"] {
				width: 919px;
				height: 614px;
				/*border: 1px solid #ddd;*/
				position: absolute;
				background-size: 100% 100%;
				right: 30px;
				top: 50px;
				display: none;
			}
			
			[class^="big"]:nth-child(1) {
				background: url(img/11.png);
			}
			
			.big2 {
				background: url(img/22.png);
			}
			
			.big3 {
				background: url(img/33.png);
			}

js

$(document).ready(function() {
				$(".small1").bind("click", function() {
					$('[class^="big"]').hide()
					$(".big1").fadeIn()
				})

				$(".small2").bind("click", function() {
					$('[class^="big"]').hide()
					$(".big2").fadeIn()
				})
				$(".small3").bind("click", function() {
					$('[class^="big"]').hide()
					$(".big3").fadeIn()
				})

			})

Answer 1

你在方括号前面加一个div就行了，被jQuery影响了就是这样

Answer 2

nth-child是选择该元素下第n个子元素，不是jQuery的eq功能

Answer 3

 [class^="big"]:nth-child(1) {                background: url(img/11.png);            }这一行不生效，其他的都有用，难道我写错了么？