css中关于选择器的使用总结-css教程-PHP中文网

首页

web前端

css教程

css中关于选择器的使用总结

黄舟

Oct 27, 2017 am 10:04 AM

css选择器

标签、通配符选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标签选择器</title>
    <style type="text/css">
    <!--
    body:标签选择器
    *：通配符选择器
    .：类选择器
    ，：并集选择器
    
    CSS属性：
     Text-align    Center,left,right    文字居中格式    
     Font-size    18px    设置文字大小    
     Font-family    微软雅黑,宋体    设置字体    
     Font-weight    Normal默认，bold粗体，100px    设置字体加粗    
     Font-style    Normal默认，italic斜体    设置字体风格    
     Color    颜色    设置文字颜色       
    -->
    body{
        background:url("xia.jpg");
           }
    p{
        font-size:50px;
        color:green;
        background-color:blue;
        width:300px;
        height:200px;
    }
    *{
         font-size: 100px;
         color: red;

      }
    </style>
</head>
<body>
    <h1>111</h1>
    <p>14期威武</p>
</body>
</html>

类选择器

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Document</title>
   <style type="text/css">
      .G{
         font-size: 200px;
         color:red;
      }
      .o1{
         font-size: 200px;
         color: blue;
      }
      .o2{
         font-size: 200px;
         color: yellow;
      }
      .g1{
         font-size: 200px;
         color: green;
      }
      .l{
         font-size: 200px;
         color: pink;
      }
      .e{
         font-size: 200px;
         color: black;
      }


   </style>
</head>
<body>
   <span class="G">G</span>
   <span class="o1">o</span>
   <span class="o2">o</span>
   <span class="g1">g</span>
   <span class="l">l</span>
   <span class="e">e</span>
</body>
</html>

复合选择器：交集选择器

选择器+选择器（中间没有空格）

<!DOCTYPE html>    
<html lang="en">    
<head>    
	<meta charset="UTF-8">    
	<title>Document</title>    
	<style type="text/css">    
		.box{    
			font-size:50px;    
		}    
		p.box{    
			color:red;    
		}    
		p#miss{    
			width: 400px;    
			height: 300px;    
			background-color:yellow;    
		}    
	</style>    
</head>    
<body>    
        <!--其实无非是浏览器寻找标签顺序，第一个找到p.box即可；第二个找到
            .box类即可
            -->
	<p class="box">14期威武</p>    
	<p class="box">14期霸气</p>    
	<p id="miss">14期万岁</p>    
</body>    
</html>

后代选择器和子代选择器：实际上就是包含关系

后代选择器：可隔代遗传 选择器+空格+选择器

子代选择器：只能寻找第一个后代 选择器+>+选择器

<!DOCTYPE html>    
<html lang="en">    
<head>    
	<meta charset="UTF-8">    
	<title>Document</title>    
	<style type="text/css">    

        .box span{    
    	    color:red;    
        }    
	</style>    
</head>    
<body>  
         <!--
         下面p标签会找到.box类，由于span是后代选择器选择对象，即使隔代也可继承，所以p标签
         下面的span标签也可继承
         -->  
	<p class="box">    
		<p><span class="miss">14期威武</span>    
		<span>14期好人</span>    
		</p>    
	</p>    
	<p class="box"><span>14霸气</span></p>    
</body>    
</html>

<!DOCTYPE html>    
<html lang="en">    
<head>    
	<meta charset="UTF-8">    
	<title>Document</title>    
	<style type="text/css">    
	p>span{    
			color:red;    
			font-size:40px;    
		}    
        p>span{    
   	    color:green;    
   	    font-size:60px;    
            }    
	</style>    
</head>    
<body>    
        <!--
            此处，由于是子代选择器，所以span只能继承p；span只能继承p；
            所以第一个为绿色；第二个为红色
        -->
	<p>    
		<p><span>14期威武</span></p>    
		<span>14期霸气</span>    
	</p>    
</body>    
</html

以上是css中关于选择器的使用总结的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

光标的下一个CSS样式Apr 23, 2025 am 11:04 AM

具有CSS的自定义光标很棒，但是我们可以将JavaScript提升到一个新的水平。使用JavaScript，我们可以在光标状态之间过渡，将动态文本放置在光标中，应用复杂的动画并应用过滤器。

世界碰撞：使用样式查询的钥匙帧碰撞检测Apr 23, 2025 am 10:42 AM

互动CSS动画和元素相互启动的元素在2025年似乎更合理。虽然不需要在CSS中实施乒乓球，但CSS的灵活性和力量的增加，可以怀疑Lee＆Aver Lee＆Aver Lee有一天将是一场

使用CSS背景过滤器进行UI效果Apr 23, 2025 am 10:20 AM

有关利用CSS背景滤波器属性来样式用户界面的提示和技巧。您将学习如何在多个元素之间进行背景过滤器，并将它们与其他CSS图形效果集成在一起以创建精心设计的设计。

微笑吗？Apr 23, 2025 am 09:57 AM

好吧，事实证明，SVG的内置动画功能从未按计划进行弃用。当然，CSS和JavaScript具有承载负载的能力，但是很高兴知道Smil并没有像以前那样死在水中

'漂亮”在情人眼中Apr 23, 2025 am 09:40 AM

是的，让＃039;跳上文字包装：Safari Technology Preview In Pretty Landing！但是请注意，它与在铬浏览器中的工作方式不同。

CSS-tricks编年史XLIIIApr 23, 2025 am 09:35 AM

此CSS-tricks更新了，重点介绍了年鉴，最近的播客出现，新的CSS计数器指南以及增加了几位新作者，这些新作者贡献了有价值的内容。

tailwind的@Apply功能比听起来更好Apr 23, 2025 am 09:23 AM

在大多数情况下，人们展示了@Apply的@Apply功能，其中包括Tailwind的单个property实用程序之一（会改变单个CSS声明）。当以这种方式展示时，@Apply听起来似乎很有希望。如此明显

感觉就像我没有释放：走向理智的旅程Apr 23, 2025 am 09:19 AM

像白痴一样部署的部署归结为您部署的工具与降低复杂性与添加的复杂性之间的奖励之间的不匹配。

See all articles

热AI工具

热工具

SecLists

SecLists是最终安全测试人员的伙伴。它是一个包含各种类型列表的集合，这些列表在安全评估过程中经常使用，都在一个地方。SecLists通过方便地提供安全测试人员可能需要的所有列表，帮助提高安全测试的效率和生产力。列表类型包括用户名、密码、URL、模糊测试有效载荷、敏感数据模式、Web shell等等。测试人员只需将此存储库拉到新的测试机上，他就可以访问到所需的每种类型的列表。

Damn Vulnerable Web App (DVWA) 是一个PHP/MySQL的Web应用程序，非常容易受到攻击。它的主要目标是成为安全专业人员在合法环境中测试自己的技能和工具的辅助工具，帮助Web开发人员更好地理解保护Web应用程序的过程，并帮助教师/学生在课堂环境中教授/学习Web应用程序安全。DVWA的目标是通过简单直接的界面练习一些最常见的Web漏洞，难度各不相同。请注意，该软件中