css的基本选择器有哪些

技术css的基本选择器有哪些这篇文章主要介绍“css的基本选择器有哪些”,在日常操作中,相信很多人在css的基本选择器有哪些问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”css的基本选择器

本文主要介绍“css的基本选择器是什么”。在日常操作中,相信很多人对css的基本选择器有疑问。边肖查阅了各种资料,整理出简单易用的操作方法,希望能帮你解决“css的基本选择器是什么”的疑惑!接下来,请和边肖一起学习!

css的基本选择器是:1。通配符选择器;2.标签选择器;3.类别选择器;4.Id选择器;5.组合元素选择器;6.多类选择器。

css的基本选择器有哪些

本教程操作环境:windows7系统,CSS3HTML5版本,戴尔G3电脑。

基本选择器介绍

基本选择器分为六种使用模式:例如,通配符选择器、标签选择器、类选择器、Id选择器、组合元素选择器和多类选择器。

基本选择器指令表。

选择器的语法格式含义示例通配符选择器* {属性:值;}通用选择器可以选择页面上的所有元素并对其应用样式,样式由*表示。不推荐,但IE6不支持,增加了大型网站的负担。* { width: 300px}标签选择器标签名称{属性:值;}标签选择器,匹配对应HTML的标签。h2{color:红色;}类选择器。类属性值{属性:value;}类选择器,为具有指定类属性值的元素设置样式。盒子{color:红色;}Id选择器#id属性值{属性:value;}Id选择器,在HTML文档中只使用一次。Id选择器是用#定义的。#box{color:红色;}组合元素选择器标记名。类属性值{attribute: value}选择器将选择具有指定。根据标记名分类属性值。p . box { color : red;}多类选择器。类属性值。类属性值{属性:value;}通过将两个类选择器链接在一起,您只能同时选择包含这些类名的元素(类名的顺序不受限制)。注意:在IE7之前的版本中,不同平台的Internet Explorer无法正确处理多类选择器。 box . box 1 { color : red;}

通配符选择器

接下来,让我们进入通用选择器的练习。作者将HTML页面中h2标签和P标签的字体颜色设置为嵌入式形式的红色。

码组

!DOCTYPEhtml

超文本标记语言

metachartset=' UTF-8 '

标题通配符选择器/标题

风格

*{

color:red

}

/style

/head

身体

h2/h2

p/p

/body

/html结果图。

css的基本选择器有哪些

00-1010接下来,让我们进入标签选择器的练习。作者使用嵌入形式。

,将HTML页面中的h2标签和p标签中的字体颜色设置为红色。

  • 代码块

  • <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>标签选择器</title>
    		<style>
    			h2 {
    				color: red;
    			}
    		</style>
    	</head>
    	<body>
    		<h2></h2>
    		<p></p>
    	</body>
    </html>
    • 结果图

    css的基本选择器有哪些

    • 注意:标签选择器是指给指定的标签设置样式。

    • 代码块

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>标签选择器</title>
    		<style>
    			h2 {
    				color: red;
    			}
    		</style>
    	</head>
    	<body>
    		<h2>成功不是击败别人,而是改变自己。</h2>
    		<h2></h2>
    		<p></p>
    	</body>
    </html>
    • 结果图
      css的基本选择器有哪些

    • 现在大家应该知道了p标签为什么没有改变了,因为标签选择器的作用是给指定的标签设置样式的,接下来笔者将p标签的字体颜色设置为红色。

    • 代码块

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>标签选择器</title>
    		<style>
    			h2 {
    				color: red;
    			}
    			p {
    				color: red;
    			}
    		</style>
    	</head>
    	<body>
    		<h2>成功不是击败别人,而是改变自己。</h2>
    		<h2></h2>
    		<p></p>
    	</body>
    </html>
    • 结果图
      css的基本选择器有哪些

    类选择器

    • 接下来让我们进入类选择器实践,笔者以嵌入式的形式,使用类的属性值为.box,来完成HTML页面中的h2标签和p标签中的字体颜色设置为红色。

    • 首先我们将HTML页面中的第一个h2标签字体颜色设置为红色。

    • 代码块

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>类选择器</title>
    		<style>
    			.box {
    				color: red;
    			}
    		</style>
    	</head>
    	<body>
    		<h2 class="box">成功不是击败别人,而是改变自己。</h2>
    		<h2></h2>
    		<p></p>
    	</body>
    </html>
    • 结果图
      css的基本选择器有哪些

    • 注意:只要是class属性的值为.box的标签,不管它是什么标签,都会将字体颜色设置为红色,其余的CSS样式也是一致。

    • 现在我们将第二个h2标签和p标签字体颜色设置为红色。

    • 代码块

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>类选择器</title>
        <style>
            .box{
                color:red;
            }
        </style>
    </head>
    <body>
        <h2 class="box">成功不是击败别人,而是改变自己。</h2>
    	<h2 class="box"></h2>
    	<p class="box"></p>
    </body>
    </html>
    • 结果图
      css的基本选择器有哪些

    Id选择器

    • 接下来让我们进入id选择器实践,笔者以嵌入式的形式,通过id属性值为#box,将HTML页面中的h2标签中的字体颜色设置为红色。

    • 代码块

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>id选择器</title>
    		<style>
    			#box {
    				color: red;
    			}
    		</style>
    	</head>
    	<body>
    		<h2 id="box">成功不是击败别人,而是改变自己。</h2>
    	</body>
    </html>
    • 结果图

      css的基本选择器有哪些

    • 注意:使用id选择器是给拥有指定的id属性值来设置样式,但是要注意在一个HTML页面中id的属性值必须是唯一的。

    结合元素选择器

    • 接下来让我们进入结合元素选择器实践,笔者以嵌入式的形式,通过h3标签class属性值为.box元素的字体颜色,设置为红色。

    • 代码块

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>结合元素选择器</title>
    		<style>
    			h3.box {
    				color: red;
    			}
    		</style>
    	</head>
    	<body>
    		<h3 class="box">成功不是击败别人,而是改变自己。</h3>
    		<span class="box">成功不是击败别人,而是改变自己。</span>
    	</body>
    </html>
    • 结果图
      css的基本选择器有哪些

    • 注意:结合元素选取器执行原理说明如下:首先是先找到h3标签,然后再去h3标签中找class属性值为.box,如果找到class属性值为.box就给其设置样式。现在大家应该知道了span标签下面的class属性值为.box为什么没有渲染的原因了。


    多类选择器

    • 接下来让我们进入多类选择器实践,笔者以嵌入式的形式,将class属性值包含.box.box1元素的字体颜色设置为红色。

    • 代码块

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>多类选择器</title>
    		<style>
    			.box.box1 {
    				color: red;
    			}
    		</style>
    	</head>
    	<body>
    		<h3 class="box1 box">成功不是击败别人,而是改变自己。</h3>
    		<span class="box box1">成功不是击败别人,而是改变自己。</span>
    		<h3 class="box1 "></h3>
    		<span class="box"></span>
    	</body>
    </html>

    css的基本选择器有哪些

    注意:多类选择器执行原理说明如下:首先class属性值可以设置为多个以空格隔开即可,举例:如果一个class属性值包含.box.box1将其设置样式,通过把两个类选择器链接在一起,仅可以选择同时包含这些类名的元素(类名的顺序不限)。如果一个多类选择器包含类名列表中没有的一个类名,匹配就会失败。现在大家应该知道了单独的class属性值为.box.box1没有被渲染了。

    到此,关于“css的基本选择器有哪些”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注网站,小编会继续努力为大家带来更多实用的文章!

    内容来源网络,如有侵权,联系删除,本文地址:https://www.230890.com/zhan/66406.html

    (0)

    相关推荐

    • windows php 命令(php环境搭建的主要步骤和方法)

      技术然后使用在Homestead中版本管理工具切换 PHP 版本然后使用在Homestead中版本管理工具切换 PHP 版本,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能

      攻略 2021年12月23日
    • 如何分析python的map、reduce函数

      技术如何分析python的map、reduce函数这篇文章给大家介绍如何分析python的map、reduce函数,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。小编讲的是Python的map、red

      攻略 2021年12月4日
    • Laravel基于reset怎么实现分布式事务

      技术Laravel基于reset怎么实现分布式事务这篇文章主要讲解了“Laravel基于reset怎么实现分布式事务”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“Lara

      攻略 2021年11月9日
    • C++11列表初始化是怎样的

      技术C++11列表初始化是怎样的这篇文章主要介绍“C++11列表初始化是怎样的”,在日常操作中,相信很多人在C++11列表初始化是怎样的问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”C++

      攻略 2021年11月25日
    • go并发中select的示例分析

      技术go并发中select的示例分析这篇文章给大家分享的是有关go并发中select的示例分析的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。一、前言介绍:对于Go语言并发通讯,是使用的协程go

      攻略 2021年11月17日
    • 贪心-Doing Homework again HDU

      技术贪心-Doing Homework again HDU 贪心-Doing Homework again HDU - 1789题目
      https://vjudge.net/problem/HDU-178

      礼包 2021年11月19日