CSS.属性选择器和伪类

最新推荐文章于 2024-07-10 10:47:29 发布

TIME时间缝隙

最新推荐文章于 2024-07-10 10:47:29 发布

阅读量151

点赞数

分类专栏： HTML+CSS+H5C3+JavaScript 文章标签： css

本文链接：https://blog.csdn.net/weixin_43398418/article/details/112853583

版权

HTML+CSS+H5C3+JavaScript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--
		[属性名]选择含有指定属性的元素
		[属性名=属性值]选择含有指定属性和属性值得元素
		[属性名^=属性值]选择属性值以指定的值开头的元素
		[属性名$=属性值]选择属性值以指定的值结尾的元素
		-->
		<style type="text/css">
			/*p[title]*/
			/*p[title=abc]*/
/*			p[title^=abc]
*/
			/*p[title$=abc]*/
			
		{
			color: orange;
		}
		</style>
		
	</head>
	<body>
		<p title="abc">少小离家老大回</p>
		<p title="abcdef">乡音无改鬓毛衰</p>
		<p title="helloabc">儿童相见不相识</p>
		<p>笑问客从何处来</p>
		<p>秋水共长天一色</p>
		<p>落霞与孤到起飞</p>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style type="text/css">
		/*
		 * 将ul里的第一个li设置为红色
		 */
		/*
		 * 伪类（不存在的类，特殊的类）
		 * 	-伪类用来描述一个元素的特殊状态
		 * 	比如：第一个元素子元素，被点击的元素，鼠标移入的元素、、、、
		 * 伪类一般情况下都是使用，开头
		 * 	：first-child 第一个元素
		 * 	：last-child最后一个元素
		 * 	：nth-child（）选中第N个元素
		 * 特殊值：
		 * n 第n个n的范围0到正无穷
		 * 2n或even表示选中偶数位的元素
		 * 2n+1或odd表示选中奇数位的元素
		 * -以上这些伪类都是根据所有的资源是你进行排序
		 * 	
		 */
		/*
		 * first-of-type
		 * last-of-type
		 * nth-of-type
		 * 	-这几个伪类的功能和上述的类似，不同点是他们是在同类型中进行排序
		 * 
		 */
		/*
		 * ：not（）否定伪类
		 * 	-将符合条件的元素从选择器
		 */
		/*ul>li:first-child*/
		/*ul>li:last-child*/
		/*ul>li:nth-child(2)*/
		/*ul>li:nth-child(n)*/
		/*ul>li:nth-child(2n)*/
		/*ul>li:nth-child(2n+1)*/
		/*ul>li:first-of-type*/
		/*ul>li:last-of-type*/
		/*ul>li:nth-last-child(2)*/
		
		
		{
			color: aqua;
		}
	</style>
	<body>
		<ul>
			<li class="abc">abc</li>
			<li class="abc">fsaf</li>
			<li class="safd">abc</li>
			<li class="sdfsdf">asfasfdsa</li>
		</ul>
	</body>
</html>