CSS3 高级选择器

最新推荐文章于 2022-07-02 10:18:23 发布

凌冰_

最新推荐文章于 2022-07-02 10:18:23 发布

阅读量1k

点赞数

分类专栏： CSS3

本文链接：https://blog.csdn.net/hlx20080808/article/details/86307287

版权

CSS3 专栏收录该内容

24 篇文章 2 订阅

订阅专栏

高级选择器：

1>层次选择器

2>结构伪类选择器

3>属性选择器

详细介绍这几个选择器：

层次选择器

页面：

<body>
		<!--格式化代码：ctrl+shift+F-->
		<h2>兄弟</h2>
		<p>1</p>
		<!-- 为了说明相邻兄弟选择器，在此处添加一个类名active -->
		<p>2</p>
		<p>3</p>
		<ul>
			<li>
				<p>张三</p>
			</li>
			<li>
				<p>李四</p>
			</li>
			<li>
				<p>王五</p>
			</li>
		</ul>
	</body>

/*后代选择器:孩子的孩子...*/
body p{
	 /*border: 1px solid red;*/
}

/*子选择器:body的孩子*/
body>p{
	/*border: 1px solid blue;*/
}

/*相邻兄弟选择器:比较近的兄弟*/
h2+p{
	/*border: 2px solid yellowgreen;*/
}


/*通用兄弟选择器:找到p远近兄弟*/
h2~p{
	border: 5px solid chocolate;
}

效果：

结构伪类选择器

页面：

<body>
		<p>1</p>
		<p>2</p>
		<p>3</p>
		<ul>
			<li>
				<p>张三0</p>
			</li>
			<li>
				<p>李四1</p>
			</li>
			<li>
				<p>王五2</p>
			</li>
			<li>
				<p>熊大3</p>
			</li>
		</ul>
	</body>

/*E:first-child :找父的第一个孩子 */

/*注意:不能用body作为父*/
li:first-child{
	border: 2px solid darkcyan;
}

/*E:first-child :找父的最后一个孩子 */

li:last-child{
	border: 2px solid brown;
}

/*E F:nth-child(n): 找到父的孩子第几个
   odd:奇数 ,even:偶数（从1开始数）
 */
/*ul li:nth-child(odd){*/
ul li:nth-child(3){
	/*background-color: coral;*/
}

/*E:first-of-type:父级的第一个元素*/
li:first-of-type{
	background: cornflowerblue;
}

/*E:last-of-type:父级的最后一个元素*/
li:last-of-type{
	background: chartreuse;
}

/*E F:nth-of-type(n):找到子孩子的第几个*/
ul li:nth-of-type(2){
	border: 10px double darkgrey;
}

/*E F:nth-last-of-type(n):子孩子中的倒数第1个同级兄弟*/
li:nth-last-of-type(1){
	border: 5px double red;
}

效果：

属性选择器

页面：

<body>
		<a href="http://www.baidu.com" id="first">1</a>
		<a href="#" title="test website" target="_blank">2</a>
		<a href="sites/file/test.html">3</a>
		<a href="sites/file/test.png" class="links item"> 4</a>
		<a href="sites/file/image.jpg">5</a>
		<a href="efc" title="website link">6</a>
		<a href="/a.pdf">7</a>
		<a href="/abc.pdf">8</a>
		<a href="abcdef.doc">9</a>
		<a href="abd.doc" id="last">10</a>

	</body>

a{
	width: 60px;
	height: 60px;
	border: 0px solid red;
	background: gainsboro;
	display: block;  /*行级转换成块级*/
	float: left;   /*浮动*/
	margin: 5px 10px;  /*外边距*/
	border-radius: 20%;  /* 圆角  */
	text-align: center;  /*水平文本居中*/
	line-height: 55px;  /*垂直居中*/
	font-weight: bolder; /*字体加粗*/
	text-decoration: none; /*去掉下划线*/
	color:black;  /*字体颜色*/
}


/*E[attr]: E标签的属性id*/
a[id]{
	background: mediumaquamarine;
}

/*E[attr=val]:E标签的属性href=#*/
a[href='#']{
	background: chocolate;
}


/*E[attr^=val]:E标签的属性href的值以s开头*/
a[href^='s']{
	background: yellowgreen;
}

/*E[attr$=val]:E标签的属性href的值以f结尾*/
a[href$='f']{
	background: blueviolet;
}

/*E[attr*=val]:E标签的属性href的值包含f所有的*/
a[href*='f']{
	background:coral;
}

效果：