结构伪类选择器学习

最新推荐文章于 2023-10-28 13:36:56 发布
最新推荐文章于 2023-10-28 13:36:56 发布
阅读量77 收藏
点赞数
文章标签： 学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hughrj/article/details/128189959
版权

1.优先匹配位置后匹配元素或class名    当不写元素时从根标签html开始匹配

1.1:first-child

1.1.1

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
         :first-child {
            color: rgb(216, 18, 18);
        }
    </style>
</head>

<body>

    <ol>
        <p>2222</p>
        <ul>12</ul>
        <div>1111</div>
        <p>3333</p>
        <ul>22</ul>
        <ul>32</ul>
    </ol>

</body>

</html>

该结果为全红因为他直接匹配到了html这个根标签

1.1.2


                

        

        

    




        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  hughrj
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    0
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                  2
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      










                



	

		

			

				
					
谈谈一些有趣的CSS题目（十）-- 结构性伪类选择器

				
			

			

				

					weixin_34393428的博客
				

				

					11-15
					
					108
					
				

			

		

		

			
				
开本系列，谈谈一些有趣的 CSS 题目，题目类型天马行空，想到什么说什么，不仅为了拓宽一下解决问题的思路，更涉及一些容易忽视的 CSS 细节。
解题不考虑兼容性，题目天马行空，想到什么说什么，如果解题中有你感觉到生僻的 CSS 属性，赶紧去补习一下吧。
不断更新，不断更新，不断更新，重要的事情说三遍。
谈谈一些有趣的CSS题目（一）-- 左边竖条的实现方法
谈谈一些有趣的CSS题目（二）-...

			
		

	



                

              
                



	

		

			

				
					
CSS3---结构性伪类选择器—not

				
			

			

				

					diyinjiao1404的博客
				

				

					05-04
					
					273
					
				

			

		

		

			
				
结构性伪类选择器—not

:not选择器称为否定选择器，和jQuery中的:not选择器一模一样，可以选择除某个元素之外的所有元素。就拿form元素来说，比如说你想给表单中除submit按钮之外的input元素添加红色边框，CSS代码可以写成：
form {
  width: 200px;
  margin: 20px auto;
}
div {
  margin-bo...

			
		

	



                


  
              

                


	

		

			

				
					
日历 ——练习CSS结构伪类选择器

				
			

			

				

					weixin_47207556的博客
				

				

					10-01
					
					207
					
				

			

		

		

			
				
今天拿到一个日历的练习题，试着实现了一下。
题目照片如下：

然后下面是我最后实现的

感觉还可以，第一次拿着图实现。主要是练习结构伪类选择器。
代码：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>rili</title>
    <style>
        *{
            box-sizing:

			
		

	





	

		

			

				
					
CSS3每日一练之选择器-结构性伪类选择器

				
			

			

				

					weixin_30932215的博客
				

				

					07-25
					
					92
					
				

			

		

		

			
				
<!DOCTYPE HTML>
<html>
  <head>
  <meta charset="gb2312">
  <title>CSS3每日一练之选择器-结构性伪类选择器[四] | 前端开发网(W3Cfuns.com)!</title>
  <style typ...

			
		

	



		

			
		



	

		

			

				
					
css习题(使用结构伪类选择器去做把列表中的某些列表项的边框线去除)

				
			

			

				

					weixin_46611729的博客
				

				

					08-26
					
					243
					
				

			

		

		

			
				
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>中国的流浪猫</title>
    <style>
        * {
            mar

			
		

	





	

		

			

				
					
【CSS基础学习】伪类选择器，伪元素选择器，交集选择器

				
			

			

				

					01-08
				

			

		

		

			
				
伪类选择器和伪元素选择器可以为文档中非具体存在的结果指定样式，或者为某些元素（包括文档本身）的状态指定样式，它会根据某种条件而非文档结构应用样式。 伪类选择器的使用方法如下： HTML标记 伪类名{伪类名：...

			
		

	





	

		

			

				
					
JQuery 学习笔记 选择器之一

				
			

			

				

					10-29
				

			

		

		

			
				
此外，还有伪类选择器（`:hover`、`:active`等）和属性选择器（`[attribute=value]`），它们使得选择和操作DOM元素变得更加灵活和精确。通过熟练掌握这些选择器，你可以更高效地构建动态网页应用。

			
		

	





	

		

			

				
					
认识CSS3选择器，第1部分：结构化伪类

				
			

			

				

					04-09
				

			

		

		

			
				
本篇文章，我们将聚焦于“结构化伪类”，这是CSS3选择器中一类特别有用的功能，能够帮助我们基于元素在文档结构中的位置来应用样式。  结构化伪类，正如其名，主要是针对HTML5新增的语义化元素而设计的，如`...

			
		

	





	

		

			

				
					
折叠菜单及选择器的运用

				
			

			

				

					08-31
				

			

		

		

			
				
在示例中，`:gt()` 和 `:not()` 是两种伪类选择器，`:gt(index)` 选取索引值大于指定值的所有元素，`:not(selector)` 则用于排除与指定选择器匹配的元素。这里的 `$category` 变量就是通过这两个选择器筛选出的元素...

			
		

	





	

		

			

				
					
最好的文章伪原创生成器

				
			

			

				

					03-19
				

			

		

		

			
				
在选择最佳的伪原创生成器时，要考虑以下因素：  1. **准确性**：生成器是否能准确地保持原文的含义。 2. **速度**：生成内容的速度，对于大量内容需求来说很重要。 3. **用户友好**：界面是否简洁易用，是否有良好...

			
		

	





	

		

			

				
					
结构化伪类的练习

				
			

			

				

					weixin_33868027的博客
				

				

					09-18
					
					106
					
				

			

		

		

			
				
2019独角兽企业重金招聘Python工程师标准>>>   
                                        
         ...

			
		

	





	

		

			

				
					
CSS学习（三）——结构伪类选择器，属性选择器

				
			

			

				

					weixin_52725999的博客
				

				

					03-01
					
					185
					
				

			

		

		

			
				
结构伪类选择器
伪类：相当于条件
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    不使用class，id选择器-->
    <style>
        /*ul的第一个子元素*/
        ul li:first-child{
            

			
		

	





	

		

			

				
					
结构伪类选择器

				
			

			

				

					cyx13504213312的博客
				

				

					08-17
					
					62
					
				

			

		

		

			
				
结构伪类选择器

			
		

	





	

		

			

				
					
css学习15：结构性伪类选择器

				
			

			

				

					八十岁老将的博客
				

				

					02-10
					
					200
					
				

			

		

		

			
				
1、根元素选择器
:root选择器匹配文档中的根元素。它可能是用得最少的一个伪类选择器,因为总是返回html元素。
:root {
    border: thin;
}

2、子元素选择器




选择器
说明




:first-child
选取元素的第一个子元素


:last-child
选取元素的最后一个子元素


:only-child
选取元素的唯一一个子元素


:only-of-type
选取属于父元素的特定类型的唯一子元素


2.1 :first-child选择器
:first-ch

			
		

	





	

		

			

				
					
结构伪类选择器（部分）

				
			

			

				

					laodaer的博客
				

				

					12-05
					
					256
					
				

			

		

		

			
				
结构伪类选择器：总结--当页面上的某个元素处于在不同的位置上的时候，我们可以通过伪类选择器去选择某个标签或者某个class相同的元素li:first-child 就是第一个lili:last-child 就是最后一个lili:nth-child（n） ，n是几就是第几个li代码：


效果图：li:nth-child(odd) 就是排在奇数的lili:nth-child(even) 就是排在偶数数的li代码：


 效果图：1. ：2n是指第0、2、4、6、8等个li。3n是指第0、3、6、9、12等个li

			
		

	





	

		

			

				
					
结构伪类选择器、属性选择器、css的作用及字体样式 2022-1-24

				
			

			

				

					m0_56661579的博客
				

				

					01-26
					
					301
					
				

			

		

		

			
				
一、结构伪类选择器
伪类：id+class结合
练习1.1ul的第一个元素，ul的最后一个元素
<style>
        /*ul的第一个元素*/
        ul li:first-child{
            background: #c907ff;
        }

        /*ul的最后一个元素*/
        ul li:last-child{
            background: brown;
        }

    </sty

			
		

	





	

		

			

				
					
html中p标签的伪类选择器,详解css3系列：伪元素和伪类选择器

				
			

			

				

					weixin_36070568的博客
				

				

					06-15
					
					1016
					
				

			

		

		

			
				
伪类选择器伪类选择器： 和一般的DOM中的元素样式不一样，它并不改变任何DOM内容。只是插入了一些修饰类的元素，这些元素对于用户来说是可见的，但是对于DOM来说不可见。伪类的效果可以通过添加一个实际的类来达到。常用的伪类选择器是使用在a元素上的几种，`如a:link|a:visited|a:hover|a:active`提示：在 CSS 定义中，a:hover 必须被置于 a:link 和 a:v...

			
		

	





	

		

			

				
					
结构伪类选择器和伪元素选择器

					
最新发布

				
			

			

				

					qq_56025677的博客
				

				

					10-28
					
					58
					
				

			

		

		

			
				
声明：本章节内容为本人学习笔记，如有侵权，联系删除！

			
		

	





	

		

			

				
					
html中p标签的伪类选择器,表单标签和css伪类选择器

				
			

			

				

					weixin_32918953的博客
				

				

					06-15
					
					1227
					
				

			

		

		

			
				
一.表单标签和input标签1.表单标签:form这个标签作为一个容器，来收集和提交这个标签中其他相关标签的数据，一般不单独使用active属性:设置提交路径(接口)method属性:设置请求方式(post/get)image.png2.input标签input标签是单标签input标签可以单独使用，也可以和form配合使用type属性：这个值不一样，input的功能就不一样image.png2....

			
		

	





	

		

			

				
					
2016年全面详解：CSS3选择器与结构性伪类实战教程

				
			

			

				

					
				

			

		

		

			
				
2. **结构性伪类选择器**：  - `:nth-child(n)`：根据兄弟节点位置选择，如`p:nth-child(odd)`匹配奇数行。  - `:nth-child(even)`、`:nth-child(2n)`等类似用法。  - `:nth-last-child(n)`：从后向前计数的子节点。...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		
评论 2

	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值