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

最新推荐文章于 2022-09-25 21:07:15 发布
最新推荐文章于 2022-09-25 21:07:15 发布
阅读量579 收藏 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）效果演示

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

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

 

 

 

 

 

 

 

 

 

 

被开发耽误的大厨
关注
专栏目录
前端css基础篇（一）css入门与标签选择器
qq_41363062的博客
01-02 268
css的发展历史 从HTML被发明开始，样式就以各种形式存在。不同的浏览器结合它们各自的样式语言为用户提供页面效果控制，最初只提供很少的显示属性。随着HTML成长，为了满足页面设计者的要求， 添加了很多显示功能，使HTML变得杂乱，页面臃肿，于是就出现了css。 css初识 css(Cascading Style Sheets) 美化样式 css通称为css样式表或层叠样式表（级联样式表），主...
CSS入门教程篇
10-30
### CSS入门教程篇 #### 一、CSS简介与基本语法规范 **CSS**（Cascading Style Sheets）即层叠样式表，它是一种用于增强HTML文档样式的语言，主要用于控制网页内容的外观呈现，如颜色、布局等。CSS使得内容与表现...
css的派生选择器
小武Styles
05-08 856
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基础-派生选择器
11-22
CSS基础-派生选择器，CSS入门必备资料
CSS 派生选择器（四）
mzoy的专栏
07-29 1736
  派生选择器通过依据元素在其位置的上下文关系来定义样式，你可以使标记更加简洁。在 CSS1 中，通过这种方式来应用规则的选择器被称为上下文选择器 (contextual selectors)，这是由于他们依赖于上下文关系来应用或者避免某项规则。在 CSS2 中，它们称为派生选择器，但是无论你如何称呼它们，它们的作用都是相同的。派生选择器允许你根据文档的上下文关系来确定某个标签的样
CSS3——类选择器示例1
御承扬的博客
10-21 235
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 772
一 派生选择器通过依据元素在其位置的上下文关系来定义，使用标记会更加简洁。在css1当中，通过这种方式来应用规则的选择器被称为上下文选择器，这就是由于它们依赖于上下文关系来应用或者避免某些规则。在css2当中，它们称为派生选择器，但是无论你任何称呼它们，它们的作用都是一样的。通过派生选择器允许你根据文档的上下文关系来确定某个标签的样式。也就是说通过合理的使用派生选择器，我们可以使html代码便的更...
[C1进阶之路-Web基础] 基础选择器
Nick 的笔记
04-15 997
​ 🍹欢迎各路大佬来到 Nick 主页指点 ☀️本期文章将学习 [C1进阶之路-Web基础] 基础选择器，我是博主Nick。✨ ✨我的博客主页：Nick_Bears 🌹꧔ꦿ 🌹꧔ꦿ博文内容如对您有所帮助，还请给个点赞 + 关注 + 收藏✨ 🍋 注：资料来源于C1进阶考试资料 ​
Div+CSS布局详解与入门教程
- CSS基础：详细介绍了CSS的基本语法、颜色值、字体定义，以及选择器的使用，如群选择器、派生选择器、id选择器和类别选择器。 - CSS布局入门：涵盖了定义div元素、CSS盒模型的理解以及背景图片的处理，这些都是实现...
CSS基础教程：从入门到精通
- **派生选择器**：允许基于其他已选中的元素创建新的选择器。 - **id选择器**：用于唯一标识页面上的元素，`#id-name` 形式。 - **类选择器**：`class-name`，用于标识一组相似元素。 - **CSS背景和文本**：...
零基础入门：大神详解前端开发CSS与布局
此外，还介绍了如何通过分组选择器和派生选择器来优化样式定义，使代码更为简洁和灵活。 对于想要深入学习前端开发特别是WEB技术的人来说，文章最后提到的一个重要资源是推荐的学习社群，该社群定期邀请大神讲解，...
【web初步】元素选择器
lzx's blog
04-07 326
标签选择器 标签选择器也称为类型选择器，它直接引用HTML标签名称，用来匹配同名的所有标签。 优点：使用简单，直接引用，不需要为标签添加属性。 缺点：匹配的范围过大，精度不够。 一般常用标签选择器重置各个标签的默认样式。 p{ font-size:12px; color:red; } 类选择器 类选择器以点号（.）为前缀，后面是一个类名。 在标签中定义class属性后，设置属...
类选择器和元素选择器
zpznba的博客
09-10 892
我们先声明一个类选择器： <style> .blue-text { color: blue; } </style> 上面的代码在 <style> 标记中声明了一个叫做 blue-text 的类样式。 然后在h2元素上应用我们声明的类选择器： <h2 class="blue-text">CatPhotoApp</h2&...
CSS 派生选择器
qq_40894300的博客
05-03 177
派生选择器 通过依据元素在其位置的上下文关系来定义样式，你可以使标记更加简洁。 在 CSS1 中，通过这种方式来应用规则的选择器被称为上下文选择器 (contextual selectors)，这是由于它们依赖于上下文关系来应用或者避免某项规则。在 CSS2 中，它们称为派生选择器，但是无论你如何称呼它们，它们的作用都是相同的。 派生选择器允许你根据文档的上下文关系来确定某个标签的样式。通过合理地...
CSS基础选择器_07
weixin_45382875的博客
01-11 420
CSS基础选择器_07 黑马程序员web前端开发入门教程 HTML5+CSS3 2022/1/11 一、标签选择器 结构： 标签名 { css属性名：属性值； } 作用： 通过标签名，找到页面中所有这类标签，设置样式 例子： 注意点： 标签选择器选择的是一类标签，而不是单独某一个 标签选择器无论嵌套关系有多深，都能找到对应的标签 二、类选择器 结构： .类名 { css属性名：属性值； } 作用： 通过类名，找到页面中所有带有这个类名的标签，设置样式 例子： 注意点： 所有标签上都有cla
web选择器
m0_73275593的博客
09-25 212
前端使用的选择器
Web练习3 CSS简单选择器使用实例
cjf16337023的博客
03-28 357
css派生选择器外部,CSS派生选择器
weixin_42515409的博客
08-03 214
功能：在css中，需要根据类名、对象ＩＤ、元素名进行定位的情况下，可以使用派生选择器进行定位！语言基础总结：１. 　在需要指定元素或对象ＩＤ或类属性名的情况下，写法是元素在前，对象ＩＤ或类元素名在后，２.　在须同时指定类名和ＩＤ名的情况下，两者不分先后，但元素名在前３.　中间的空格表示后代元素例子：/*作为 h1 元素后代的任何 em 元素，不管中间是否还有其它元素隔开*/h1 em {color...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

被开发耽误的大厨

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

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

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

打赏作者

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

抵扣说明：

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

余额充值