web快速入门之基础篇-css：2、选择器：元素选择器、类选择器、派生选择器等

最新推荐文章于 2022-09-25 21:07:15 发布
最新推荐文章于 2022-09-25 21:07:15 发布
阅读量563 收藏 1
点赞数
分类专栏： web前端（H5）
本文为博主原创文章，不得随意转载，转载请注明出处！！！
本文链接：https://blog.csdn.net/YuDBL/article/details/104142745
版权

目录

一、前言

二、知识点简介

1、元素选择器（标签选择器）

2、类选择器

3、分类选择器

4、元素 ID 选择器

5、派生选择器

6、选择器分组

7、伪类选择器

三、实例演示

1、***元素选择器（标签选择器）

（1）实例代码

（2）效果演示

2、***类选择器

（1）实例代码

（2）效果演示

3、***分类选择器

（1）实例代码

（2）效果演示

4、***元素ID选择器

（1）实例代码

（2）效果演示

5、***派生选择器

（1）实例代码

（2）效果演示

6、***选择器分组

（1）实例代码

（2）效果演示

7、***伪类选择器

（1）实例代码

（2）效果演示

一、前言

上一篇文章我整理以前的笔记是css样式表：内联样式、内部样式表、外部样式表，详细可参考博文 web快速入门之基础篇-css：1、样式表：内联样式、内部样式表、外部样式表  这篇文章我将整理笔记css选择器：元素选择器、类选择器、分类选择器、派生选择器等

二、知识点简介

在 CSS 中，选择器是一种模式，用于选择需要添加样式的元素。

选择器：谁选择使用{}中定义的样式

1、元素选择器（标签选择器）

---html中的标签名称

p{}

h1{}

h2{}

优点：使用简单，为某种标签定义样式

缺点：跨类别、同一种下的细分

 

2、类选择器

CSS中：

.s1 {

...

  }

例如：

.s1{//点   名字

border：1px solid red; //边框：  尺寸  实线/虚线等   颜色

}

HTML中：

<标签 class="s1” >

 

3、分类选择器

定义更清晰，同一种下的细分

CSS 中：

input.txt {}

input.btn {}

html 中：

<p class="txt"></p>--error

<input class="" />

 

4、元素 ID 选择器

严格的定义---页面比较特别的组成，比如标题、布局

CSS 中：

#a1 {}

html中：

<标记 id="a1" >

 

5、派生选择器

以层次关系作为定义

CSS 中：

div a {...}

div.left a {...}

ul li ol li a {...}

HTML 中：

<div class="left">

txt

<a>ddd</a>

</div>

 

6、选择器分组

需要为一些元素定义它们样式中相同的部分时

CSS 中：

p,input.txt,#a1{....}

 

7、伪类选择器

在不同状态下的样式

XXX:link {}---未访问过

XXX:active {}---激活

XXX:hover {}---悬浮、悬停--鼠标移入

XXX:visited {}---已访问过的

XXX:focus {}---获得焦点( 如, 选中文本框 )

 

三、实例演示

1、***元素选择器（标签选择器）

（1）实例代码

我们先来看看一个例子，如下代码：1. 元素选择器.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"   http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>

<head>
<title>元素选择器</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<!--
1、link 引入
text/css： 纯文本css代码

2、rel 做什么用  
stylesheet:样式表

3、href 引入的是什么？
MyStyle.css
-->
<link type="text/css" rel="stylesheet" href="1.元素选择器.css" />
</head>

<body>

<h1>一直在模仿</h1>
<h2>从来没超越</h2>

</body>

</html>

接下来我们来看看 css 代码：1.元素选择器.css


	/* 元素选择器 */
	html
	{
		color:red
	}

	/*  当 html 和 h1 标签元素，颜色起冲突，选 h1 的。 即选择包裹里面的标签 */
	h1
	{
		color:blue;
		font-size:20pt;
	}

	h2
	{
		font-size:20pt;
		background-color:gray;
		width: 30%;
	}

（2）效果演示

用谷歌浏览器打开运行，效果如下：

当 html 和 h1 标签元素，颜色起冲突，选 h1 的。标签 h2 没有设置文字颜色，即用 html 标签所设置的红色

有关使用优先级上篇文章有提到：web快速入门之基础篇-css：1、样式表：内联样式、内部样式表、外部样式表

2、***类选择器

（1）实例代码

我们先来看看一个例子，如下代码：2. 类选择器.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"   http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>

<head>
<title>类选择器</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<link type="text/css" rel="stylesheet" href="2.类选择器.css"/>
</head>

<body>
<h3 class="myClass" >一直在模仿,从来没超越</h3>
<h1 class="myClass2">哈哈哈！</h1>
</body>

</html>

接下来我们来看看 css 代码：2.类选择器.css

     /* 类选择器 */
	.myClass{
		border:3px solid red;
		color:blue;
		width: 30%;
	}

	.myClass2{
		border:3px solid red;
		color: grey;
		width: 30%;
	}

（2）效果演示

用谷歌浏览器打开运行，效果如下：

3、***分类选择器

（1）实例代码

我们先来看看一个例子，如下代码：3. 分类选择器.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"   http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>

<head>
<title>类选择器</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<link type="text/css" rel="stylesheet" href="3.分类选择器.css"/>
</head>

<body>
<!-- 这个没有定义，所以为默认 -->
<p class="txt">哈哈哈！</p>
<!-- 定义见css文件（ h5.txt{。。。} ），引入方式如下-->
<h5 class="txt">h5的text</h5>

<form>
	<!-- 类选择器：定义更清晰，同一种下的细分。
        如：下面都是input标签，定义见css文件，引入方式如下 -->
	文本框：<input class="txt" type="text"/> <br/> <br/>
	按钮：<input class="btn" type="button"/>
</form>
</body>


</html>

接下来我们来看看 css 代码：3.分类选择器.css


h5.txt {
	background-color:red;
	width: 30%;
}

/* 分类选择器 */
input.txt {

	border:2px solid black;
	background-color:white;
}

input.btn {

	border:2px solid gray;
	background-color:blueviolet;
	
}

（2）效果演示

用谷歌浏览器打开运行，效果如下：

4、***元素ID选择器

（1）实例代码

我们先来看看一个例子，如下代码：4. 元素ID选择器.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"   http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>

<head>
<title>元素ID选择器</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<link type="text/css" rel="stylesheet" href="4.元素ID选择器.css"/>
</head>

<body>
<h5 id="all">h5 text</h5>
</body>

</html>

接下来我们来看看 css 代码：4.元素ID选择器.css


/*元素ID选择器*/
#all {
	font-size:30pt;
	color:red;
}

（2）效果演示

用谷歌浏览器打开运行，效果如下：

5、***派生选择器

（1）实例代码

我们先来看看一个例子，如下代码：5. 派生选择器.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"   http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>

<head>
<title>元素ID选择器</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<link type="text/css" rel="stylesheet" href="5.派生选择器.css"/>
</head>

<body>

<h1>
This is a<span> important </span>head
</h1>

<div class="left">
This is a<a> important </a>head
</div>

</body>

</html>

接下来我们来看看 css 代码：5.派生选择器.css

/*派生选择器*/
h1 span{
	color:red;
}

div.left a {
	font-size:30pt;
	color:blue;
}

（2）效果演示

用谷歌浏览器打开运行，效果如下

6、***选择器分组

（1）实例代码

我们先来看看一个例子，如下代码：6. 选择器分组.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"   http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>

<head>
<title>元素ID选择器</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<link type="text/css" rel="stylesheet" href="6.选择器分组.css"/>
</head>

<body>
<h1>
This is a<span> H1_important(没有设置) </span>head
</h1>

<h2>
This is a<span> H2_important </span>head
</h2>

<p>这个是段落！！！</p>
</body>

</html>

接下来我们来看看 css 代码：6.选择器分组.css

/*选择器分组*/
h2,p{
	color:red;
}

（2）效果演示

用谷歌浏览器打开运行，效果如下

如：h2、p标签中的文本颜色都为红色

7、***伪类选择器

（1）实例代码

我们先来看看一个例子，如下代码：7. 伪类选择器.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"   http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>

<head>
<title>元素ID选择器</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<link type="text/css" rel="stylesheet" href="7.伪类选择器.css"/>
</head>

<body>
<a href="http://www.baidu.com">链接文本</a>
</body>

</html>

接下来我们来看看 css 代码：7.伪类选择器.css

/*伪类选择器*/
a:link {color:red;}
a:hover {
	font-size:10pt;
	color:blue;
}

（2）效果演示

用谷歌浏览器打开运行，效果如下

当把鼠标放上去，是这种效果

 

 

 

 

 

 

 

 

 

 

被开发耽误的大厨
关注
专栏目录
手把手教你基于HTML、CSS搭建我的相册（上）
官方推荐
03-20 1万+
通过有趣的demo来带你掌握前端基础
CSS基础知识
天天向上
12-13 492
CSS概述: CSS指层叠样式表 CSS样式表极大地提高了工作效率 使用css mycss.css文件 @charset "utf-8"; /* CSS Document */ p{ color:blue; font-size:50px; } test.html文件 <!DOCTYPE html> <html> <head Lang="en"> <meta charset="UTF-8"> <title>css测试</
CSS基础-派生选择器
11-22
CSS基础-派生选择器，CSS入门必备资料
CSS 派生选择器（四）
mzoy的专栏
07-29 1720
  派生选择器通过依据元素在其位置的上下文关系来定义样式，你可以使标记更加简洁。在 CSS1 中，通过这种方式来应用规则的选择器被称为上下文选择器 (contextual selectors)，这是由于他们依赖于上下文关系来应用或者避免某项规则。在 CSS2 中，它们称为派生选择器，但是无论你如何称呼它们，它们的作用都是相同的。派生选择器允许你根据文档的上下文关系来确定某个标签的样
CSS3——类选择器示例1
御承扬的博客
10-21 227
CSS3示例1 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>类选择器示例1</title> <style type="text/css"> body{ te...
css中的派生,CSS派生选择器
weixin_36182916的博客
08-03 755
一 派生选择器通过依据元素在其位置的上下文关系来定义，使用标记会更加简洁。在css1当中，通过这种方式来应用规则的选择器被称为上下文选择器，这就是由于它们依赖于上下文关系来应用或者避免某些规则。在css2当中，它们称为派生选择器，但是无论你任何称呼它们，它们的作用都是一样的。通过派生选择器允许你根据文档的上下文关系来确定某个标签的样式。也就是说通过合理的使用派生选择器，我们可以使html代码便的更...
[C1进阶之路-Web基础] 基础选择器
Nick 的笔记
04-15 974
​ 🍹欢迎各路大佬来到 Nick 主页指点 ☀️本期文章将学习 [C1进阶之路-Web基础] 基础选择器，我是博主Nick。✨ ✨我的博客主页：Nick_Bears 🌹꧔ꦿ 🌹꧔ꦿ博文内容如对您有所帮助，还请给个点赞 + 关注 + 收藏✨ 🍋 注：资料来源于C1进阶考试资料 ​
WEB基础之：CSS选择器
f_carey的博客
12-11 752
CSS选择器1. 规则结构2. 元素选择器3. 选择器分组3.1 多选择器分组3.2 通配选择器3.3 声明分组3.4 结合选择器和声明的分组4. 类选择器4.1 类选择器4.2 多类选择器5. ID选择器5.1 ID 选择器5.2 类选择器还是 ID 选择器？5.3 区分大小写6. 属性选择器6.1 简单属性选择6.2 根据具体属性值选择6.3 根据部分属性值选择6.4 特定属性选择类型7. 后代选择器7.1 根据上下文选择元素7.2 语法解释8. 子元素选择器9. 选择相邻兄弟元素10. 伪类选择器1
Web学习笔记10：css初级篇-选择器（2）
Wanghs0716的博客
03-29 222
今天我们来唠唠复杂选择器。 虽说是复杂选择器，还不如说是几个方便的工具。其实，我们只需要我们上节课的几个选择器，就已经足够了。 Let us see see 有哪些吧！ （5）父子选择器、派生选择器 （6）直接子元素选择 （7）并列选择器 （8）分组选择器 （9）伪类选择器 我们逐个看一看喽！ 父子选择器（派生选择器） 不知各位是否听说过“树”的概念。几乎所有语言，都会涉及到这个概念。 这个父子选择器，其实就和树差不多。 我们先看一个样例出真知： <!DOC
前端css基础篇（一）css入门与标签选择器
qq_41363062的博客
01-02 257
css的发展历史 从HTML被发明开始，样式就以各种形式存在。不同的浏览器结合它们各自的样式语言为用户提供页面效果控制，最初只提供很少的显示属性。随着HTML成长，为了满足页面设计者的要求， 添加了很多显示功能，使HTML变得杂乱，页面臃肿，于是就出现了css。 css初识 css(Cascading Style Sheets) 美化样式 css通称为css样式表或层叠样式表（级联样式表），主...
CSS入门教程篇
10-30
### CSS入门教程篇 #### 一、CSS简介与基本语法规范 **CSS**（Cascading Style Sheets）即层叠样式表，它是一种用于增强HTML文档样式的语言，主要用于控制网页内容的外观呈现，如颜色、布局等。CSS使得内容与表现...
【web初步】元素选择器
lzx's blog
04-07 320
标签选择器 标签选择器也称为类型选择器，它直接引用HTML标签名称，用来匹配同名的所有标签。 优点：使用简单，直接引用，不需要为标签添加属性。 缺点：匹配的范围过大，精度不够。 一般常用标签选择器重置各个标签的默认样式。 p{ font-size:12px; color:red; } 类选择器 类选择器以点号（.）为前缀，后面是一个类名。 在标签中定义class属性后，设置属...
类选择器和元素选择器
zpznba的博客
09-10 874
我们先声明一个类选择器： <style> .blue-text { color: blue; } </style> 上面的代码在 <style> 标记中声明了一个叫做 blue-text 的类样式。 然后在h2元素上应用我们声明的类选择器： <h2 class="blue-text">CatPhotoApp</h2&...
css的派生选择器
小武Styles
05-08 846
Insert title here --> div p{ color:red; font-size:20px; } div,p{ color:green; font-size:30px; } /* p{ color:green; } */ a:LINK { text-decoration:none; color:green; } a:HOVER { text-decor
CSS 派生选择器
qq_40894300的博客
05-03 167
派生选择器 通过依据元素在其位置的上下文关系来定义样式，你可以使标记更加简洁。 在 CSS1 中，通过这种方式来应用规则的选择器被称为上下文选择器 (contextual selectors)，这是由于它们依赖于上下文关系来应用或者避免某项规则。在 CSS2 中，它们称为派生选择器，但是无论你如何称呼它们，它们的作用都是相同的。 派生选择器允许你根据文档的上下文关系来确定某个标签的样式。通过合理地...
CSS基础选择器_07
weixin_45382875的博客
01-11 389
CSS基础选择器_07 黑马程序员web前端开发入门教程 HTML5+CSS3 2022/1/11 一、标签选择器 结构： 标签名 { css属性名：属性值； } 作用： 通过标签名，找到页面中所有这类标签，设置样式 例子： 注意点： 标签选择器选择的是一类标签，而不是单独某一个 标签选择器无论嵌套关系有多深，都能找到对应的标签 二、类选择器 结构： .类名 { css属性名：属性值； } 作用： 通过类名，找到页面中所有带有这个类名的标签，设置样式 例子： 注意点： 所有标签上都有cla
web选择器
最新发布
m0_73275593的博客
09-25 200
前端使用的选择器
Div+CSS布局详解与入门教程
- CSS基础：详细介绍了CSS的基本语法、颜色值、字体定义，以及选择器的使用，如群选择器、派生选择器、id选择器和类别选择器。 - CSS布局入门：涵盖了定义div元素、CSS盒模型的理解以及背景图片的处理，这些都是实现...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

被开发耽误的大厨

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值