属性选择器，兄弟伪类选择器，

最新推荐文章于 2024-04-13 12:25:32 发布

xqiitan

最新推荐文章于 2024-04-13 12:25:32 发布

阅读量938

点赞数 1

分类专栏： h5

本文链接：https://blog.csdn.net/xqiitan/article/details/88237070

版权

h5 专栏收录该内容

48 篇文章 0 订阅

订阅专栏

属性选择器，通过属性，来选择对应的标签，并设置相应的css样式。

/* 属性选择器：属性是相对于标签而言。所谓的属性选择器，就是根据指定名称的值来查找元素
           a) E[attr],表示存在attr属性的E标签； div[class]
           b) E[attr=val],表示属性值完全等于val；div[class=mydemo]
           c) E[attr*=val],表示的属性值里包含val字符并且在‘任意’位置； div[class*=mydemo]
           d) E[attr^=val],表示属性值里面包含val字符并且在‘开始’位置；div[class^=mydemo]
           e) E[attr$=val],表示属性值里包含val字符并且在‘结束’位置；div[class$=mydemo]
           */

<html>
	<head>
		<meta charset="utf-8">
		<title>01属性选择器</title>
		<style type="text/css">
			.red {
				color: red;
			}
			.blue {
				color: blue;
			}
			.darkred{
				color: darkred;
			}
			.blueviolet{
				color: blueviolet;
			}
			/* 属性选择器：属性是相对于标签而言。所谓的属性选择器，就是根据指定名称的值来查找元素 
			a) E[attr],表示存在attr属性的E标签； div[class]
			b) E[attr=val],表示属性值完全等于val；div[class=mydemo]
			c) E[attr*=val],表示的属性值里包含val字符并且在‘任意’位置； div[class*=mydemo]
			d) E[attr^=val],表示属性值里面包含val字符并且在‘开始’位置；div[class^=mydemo]
			e) E[attr$=val],表示属性值里包含val字符并且在‘结束’位置；div[class$=mydemo]
			*/
			/* 1. 查找拥有style属性的li标签，给它设置css样式 */
			li[style]{
				text-decoration: underline;
			}
			/* 2. 查找拥有指定attr属性，并且属性值为value的E标签。
			如想要查找拥有class属性别切值为red的li标签。=是严格匹配*/
			li[class=red]{
				/* font-size: 30px; */
			}
			/* 3. 查找拥有指定attr属性，并且属性值中包含（可以在任意位置）value的E标签。*/
			li[class*=blue]{
				/* color: #8A2BE2;
				font-size: 30px; */
			}
			/* 4. 查找拥有指定attr属性，并且属性值是以value开头的 E标签。*/
			li[class^=red]{
				/* color: #8A2BE2;
				font-size: 30px; */
			}
			/* 4. 查找拥有指定attr属性，并且属性值是以value结束的 E标签。*/
			li[class$=blue]{
				color: #8A2BE2;
				font-size: 30px;
			}
		</style>
	</head>
	<body>
		<ol>
			<li class="red" style="">河南发生情流感</li>
			<li class="blue">河北承德避暑山庄</li>
			<li class="darkred" style="">湖北武汉，地铁建设的很快</li>
			<li class="blue">湖南violet长沙，是个鸟不拉屎的地方</li>
			<li class="red">广东东莞，是个男人喜欢的地方</li>
			<li class="blueviolet">深圳，创业者的天堂，那边工资很高</li>
		</ol>
	</body>
</html>

==================================================

兄弟伪类选择器

<html>
	<head>
		<meta charset="utf-8">
		<title>兄弟伪类，选择器</title>
		<style type="text/css">
			.first {
				color: red;
			}
			/* 兄弟伪类：
			 +：获取当前元素的相邻的，满足条件的元素。
			 ~：获取当前元素的满足条件的兄弟元素。
			 */
			/* 查找：添加了.first样式的标签的相邻的li元素（必须是相邻的，且必须是指定类型的元素） */
			.first + li {
				color: green;
			}
			/* 查找添加了first样式的，所有的兄弟（同级别）li元素（必须是指定类型的元素） */
			.first ~ li{
				color:blue;
			}
		</style>
	</head>
	<body>
		<ul>
			<li class="first">前端与移动开发</li>
			<span>span 内容</span>
			<li>java</li>
			<li>JavaScript</li>
			<li>C++</li>
			<li>平面设计</li>
		</ul>
	</body>
</html>

====================================

相对于父元素的伪类选择器

a）之前学习的：a:hovar    a:link a:active   a:visted
b）以某元素相对于其父元素或兄弟元素的位置来获取元素的结构伪类。
   E:first-child: 查找E这个元素的父元素的第一个子元素E
   E:last-child: 查找最后一个元素
   E:nth-child(n): 第n个子元素，计算方法是E元素的全部兄弟元素。
   E:nth-last-child(n): 类似上面的，只不过是，倒着计算。

xqiitan

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
属性选择器，兄弟伪类选择器，

属性选择器，通过属性，来选择对应的标签，并设置相应的css样式。/* 属性选择器：属性是相对于标签而言。所谓的属性选择器，就是根据指定名称的值来查找元素 a) E[attr],表示存在attr属性的E标签； div[class] b) E[attr=val],表示属性值完全等于val；div[class=mydemo] c...
复制链接

扫一扫

专栏目录