前端-Day-06

最新推荐文章于 2024-10-09 20:10:15 发布

少吃一口饭

最新推荐文章于 2024-10-09 20:10:15 发布

阅读量57

点赞数

分类专栏：前端文章标签：前端 css html

本文链接：https://blog.csdn.net/weixin_45916025/article/details/129262497

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

文章详细介绍了CSS中的属性选择器，包括按属性名、属性值、值的开头、结尾和包含来选择元素。接着讨论了伪类选择器，如:first-child,:last-child,:nth-child(),并提到了超链接的伪类状态如:link,:visited,:hover,:active。最后，文章阐述了伪元素，如::first-letter,::first-line,和::before,::after的用法。

摘要由CSDN通过智能技术生成

一、属性选择器

01[属性名] 选择含有指定属性的元素

<style>
	p[title]{
		color:orange;
		}
</style>

02[属性名=属性值] 选择含有指定属性名和属性值的元素

<style>
	p[title=hello]{
		color:orange;
		}
</style>

03[属性名^=属性值] 选择属性值以指定值开头的元素

<style>
	p[title^=abc]{
		color:orange;
		}
</style>

04[属性名$=属性值] 选择属性值以指定值结尾的元素

<style>
	p[title$=abc]{
		color:orange;
		}
</style>

05[属性名*=属性值] 选择属性值中含有某值的元素

<style>
	p[title*=e]{
		color:orange;
		}
</style>

<body>
	<p title="abc">……</p>
	<p title="abcdef">……</p>
	<p title="helloabc">……</p>
	
</body>

二、伪类选择器

伪类（不存在的类，特殊的类）

-伪类用来描述一个元素的特殊状态
	比如，第一个子元素、被点击的元素、鼠标移入的元素...
-伪类一般使用 :开头
	:first-child
	:last-child
	:nth-child()
	以上这些伪类都是根据子元素进行排序

	:first-of-type
	:last-of-type
	:nth-of-type()
	这几个伪类的功能和上述的类似，不同点是它们是在同类型元素中进行排序

:first-child 第一个子元素

<style>
	ul > li:first-child{
		color:red;
		}
</style>

:last-child 最后一个子元素

<style>
	ul > li:last-child{
		color:red;
		}
</style>

:nth-child() 选中第n个元素

-特殊值：
	n 表示选中从0到正无穷，即全选
	2n 或 even 表示选中偶数位的元素
	2n+1 或 odd 表示选中偶数位的元素

<style>
	ul > li:nth-child(3){
		color:red;
		}
	ul > li:nth-child(n){
		color:red;
		}
</style>

:first-of-type

<style>
	ul > li:first-of-type{
		color:red;
		}
</style>

:not() 否定伪类

将符合条件的元素从选择器中去除

<style>
	ul > li:not(:nth-child(3)){
		color:green;
		}
</style>

<body>
	<!--
		生成无序列表：ul>li
		生成2个无序列表：ul+ul
		生成无序列表且包含5个li：ul>li*5
	-->
	<ul>
		<span>我是一个span</span>
		<li>第一个</li>
		<li>第二个</li>
		<li>第三个</li>
		<li>第四个</li>
		<li>第五个</li>
	</ul>
		
</body>

三、超链接的伪类

:link 表示没访问过的链接（正常链接）

<style>
	a:link{
	color:red;
	font-size:30px;
	}
</style>

:visited 表示访问过的链接

由于隐私原因，所以visited这个伪类只能修改链接的颜色

<style>
	a:visited{
	color:orange;
	}
</style>

:hover 表示鼠标移入的状态

<style>
	a:hover{
	color:green;
	font-size:30px;
	}
</style>

:active 表示鼠标点击

<style>
	a:active{
	color:yellowgreen;
	font-size:30px;
	}
</style>

<body>
	<a href="https://www.baidu.com">已访问的链接</a>
	<a href="https://www.bilibili.com">未访问的链接</a>
</body>

四、伪元素

伪元素，表示页面中一些特殊的并不真实存在的元素（特殊的位置）

伪元素使用::开头
	::first-letter 
	::first-line 
	::selection
	-（常用）before 和 after 必须结合content属性来使用
		::before
		::after

::first-letter 表示第一个字母

<style>
	p::first-letter{
	color:yellowgreen;
	font-size:50px;
	}
</style>

::first-line 表示第一行

<style>
	p::first-line{
	background-color:yellow;
	}
</style>

::selection 表示选中的内容

<style>
	p::selection{
	background-color:greenyellow;
	}
</style>

::before 表示元素的头

<style>
	div::before{
	content:'abc';
	color:red;
	}
</style>

::after 表示元素的尾

<style>
	div::after{
	content:'haha';
	color:red;
	}
</style>

<body>
	<q>helloworld</q>
	<div>Hello Hello How are you</div>
	<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
	</p>
</body>