css选择符第一部分(基础用法)

最新推荐文章于 2023-09-20 08:48:52 发布
最新推荐文章于 2023-09-20 08:48:52 发布
阅读量1.1k 收藏 2
点赞数 2
分类专栏： css 文章标签： css html css3 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_58242432/article/details/120786900
版权

目录

           一，元素选择符

          1. 通配选择符(权重：0000)

          2.类型选择符(权重：0001)

          3.class选择符(权重:0010)

          ​​4.id选择符(权重:0100)

​​            二，关系选择符(权重：包含选择符权重之和) 

                  1.包含选择符(E F)

​​         2.子选择符(E>F)

​​         3.相邻选择符(E+F)

      ​​   4.兄弟选择符(E~F)

​​

           三，属性选择符(权重：0010)

1.基础

E[att]，选择具有att属性元素E。

2.进阶

(1).E[att="val"]，选择具有att属性等于的val元素E(注多个类名不起作用，例:E[class="a"] 则class："a b"不受影响)。

(2).E[att~="val"]，选择具有att属性且属性值为一(用空格分隔的字词列表中一个等于val的E元素 ，即包含只有一个值且该值等于val的情况，例：class="a val")。

(3).E[att^="val"]，选择具有att属性且属性值为以val开头的字符串的E元素。

(4).E[att$="val"]，选择具有att属性且属性值为以val结尾的字符串的E元素。

(5).E[att*="val"]，选择具有att属性且属性值为包含val的字符串的E元素。

(6).E[att|="val"]，选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素。

​​

         四，伪类选择符(权重：001)

五，伪对象选择符(权重：0001)

注：本文只为方便本人记忆的总结！！！

一，元素选择符

1. 通配选择符(权重：0000)

选定所有对象(注：会遍历并命中文档中所有的元素，出于性能考虑，需酌情使用)

写法：*{属性：值}

代码块及效果：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>CSS 通配选择符(*)选择器</title>
<style>
*{color:red;}
</style>
</head>
<body>
<h1>标题</h1>
<p>正文内容</p>
</body>
</html>

​

2.类型选择符(权重：0001)

以文档语言对象类型作为选择符

写法：元素{属性：值}

代码块及效果：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>类型选择符</title>
<style>
h1{color:red;}
p{color:aqua;}
</style>
</head>
<body>
<h1>标题</h1>
<p>正文内容</p>
</body>
</html>

​

3.class选择符(权重:0010)

类选择符允许以一种独立于文档元素的方式来指定样式，该选择符可以单独使用，也可以与其他元素结合使用。

写法：.类名{属性：值}

 (1).基础用法：单类选择符

代码块及效果：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>类型选择符</title>
<style>
.h{color:red;}
</style>
</head>
<body>
<h1 class="h">类选择器</h1>
</body>
</html>

(2).高级用法：多类选择符

注：IE6不支持多类选择符，如  .a.b{}被视为：.b{} ；

        id选择符不能在同个元素定义多个，如  id="a b"(错误写法)。

代码块及效果：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>类型选择符</title>
<style>
.h{color:red;}
.hs{color:aqua}
</style>
</head>
<body>
<h1 class="h hs">类选择器</h1>
</body>
</html>

(3)综合： class选择符

代码块及效果：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>class选择器</title>
<style>
.title{color:red;}
.content{color:aqua;}
.note{color:pink;}
</style>
</head>
<body>
<h1 class="title">标题</h1>
<p class="content">正文内容</p>
<p class="content note">多类选择符的使用</p>
</body>
</html>

​4.id选择符(权重:0100)

与类选择符相似用法，但不能在同个元素定义多个(如:id="a b"(错误写法))，

写法：#id名{属性：值} 

代码块及效果：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>id选择符</title>
<style>
#title{color:red;}
#content{color:aqua;}
</style>
</head>
<body>
<h1 id="title">标题</h1>
<p id="content">正文内容</p>
</body>
</html>

​二，关系选择符(权重：包含选择符权重之和) 

1.包含选择符(E F)

所有被E元素包含的F元素

写法：父元素E  子元素F{属性：值} 

  代码块及效果：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>包含选择符</title>
<style>
ul li{color:red;}
</style>
</head>
<body>
<ul>
	<li>列表项目</li>
	<li>列表项目</li>
	<li>列表项目</li>
	<li>列表项目</li>
</ul>
</body>
</html>

​ 2.子选择符(E>F)

  所有E元素下的子元素F 

  写法：父元素E>子元素F{属性：值} 

  代码块及效果：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>子选择符</title>
<style>
.test>li>p{color:red;}
</style>
</head>
<body>
<ul class="test">
	<li>
		<p>列表项目1</p>
		<ul>
			<li><p>项目列表1.1</p></li>
			<li><p>项目列表1.2</p></li>
		</ul>
	</li>
	<li>
		<p>列表项目2</p>
		<ul>
			<li><p>项目列表2.1</p></li>
			<li><p>项目列表2.2</p></li>
		</ul>
	</li>
	<li><p>列表项目3</p></li>
	<li><p>列表项目4</p></li>
</ul>
</body>
</html>

​ 3.相邻选择符(E+F)

  E元素与F元素平级，且F元素必须是E元素的后一个元素

  写法：元素E+元素F{属性：值} 

  代码块及效果：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>相邻选择符</title>
<style>
p+p{color:#f00;}
</style>
</head>
<body>
<div class="test">
	<h3>标题</h3>
	<p>文字段落</p>
	<p>文字段落</p>
	<h3>标题</h3>
	<p>文字段落</p>
	<h3>标题</h3>
	<p>文字段落</p>
	<p>文字段落</p>
</div>
</body>
</html>

 ​4.兄弟选择符(E~F)

选择E元素后面的所有兄弟元素F(注： E元素与F元素不一定需要平级，也不强制是紧邻的元素)

写法：元素E~元素F{属性：值} 

  代码块及效果：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>兄弟选择符</title>
<style>
p~p{color:red;}
</style>
</head>
<body>
<div class="test">
	<h3>标题</h3>
	<p>文字段落</p>
	<p>文字段落</p>
	<h3>标题</h3>
	<p>文字段落</p>
	<h3>标题</h3>
	<p>文字段落</p>
	<p>文字段落</p>
</div>
</body>
</html>

​

三，属性选择符(权重：0010)

1.基础

E[att]，选择具有att属性元素E。

写法：元素E[属性att]{属性：值} 

代码块及效果：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>CSS 属性选择符 E[att]选择器</title>
<style>
a[class]{color:red;}
</style>
</head>
<body>
<ul>
	<li><a href="?" class="external">外部链接</a></li>
	<li><a href="?">内部链接</a></li>
	<li><a href="?" class="external">外部链接</a></li>
	<li><a href="?">内部链接</a></li>
</ul>
</body>
</html>

2.进阶

(1).E[att="val"]，选择具有att属性等于的val元素E(注多个类名不起作用，例:E[class="a"] 则class："a b"不受影响)。

 写法：元素E[属性att="val"]{属性：值} 

代码块及效果：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>CSS 属性选择符 E[att="val"]选择器</title>
<style>
input[type="text"]{border:2px solid red;}
</style>
</head>
<body>
<input type="text" />
<input type="submit" />
</body>
</html>

​

(2).E[att~="val"]，选择具有att属性且属性值为一(用空格分隔的字词列表中一个等于val的E元素 ，即包含只有一个值且该值等于val的情况，例：class="a val")。

 写法：元素E[属性att~="val"]{属性：值} 

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>CSS 属性选择符 E[att~="val"]选择器</title>
<style>
div[class~="a"]{border:2px solid red;}
</style>
</head>
<body>
<div class="a">1</div>
<div class="b">2</div>
<div class="a b">3</div>
</body>
</html>

(3).E[att^="val"]，选择具有att属性且属性值为以val开头的字符串的E元素。

写法：元素E[属性att^="val"]{属性：值} 

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>CSS 属性选择符 E[att^="val"]选择器</title>
<style>
div[class^="a"]{border:2px solid red;}
</style>
</head>
<body>
<div class="abc">1</div>
<div class="acb">2</div>
<div class="bac">3</div>
</body>
</html>

 (4).E[att$="val"]，选择具有att属性且属性值为以val结尾的字符串的E元素。

写法：元素E[属性att$="val"]{属性：值} 

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>CSS 属性选择符 E[att$="val"]选择器</title>
<style>
div[class$="c"]{border:2px solid #000;}
</style>
</head>
<body>
<div class="abc">1</div>
<div class="acb">2</div>
<div class="bac">3</div>
</body>
</html>

​

 (5).E[att*="val"]，选择具有att属性且属性值为包含val的字符串的E元素。

写法：元素E[属性att*="val"]{属性：值} 

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>CSS 属性选择符 E[att*="val"]选择器</title>
<style>
div[class*="b"]{border:2px solid #000;}
</style>
</head>
<body>
<div class="abc">1</div>
<div class="acb">2</div>
<div class="dac">3</div>
</body>
</html>

​

(6).E[att|="val"]，选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素。

写法：元素E[属性att|="val"]{属性：值} 

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>CSS 属性选择符 E[att|="val"]选择器</title>
<style>
div[class|="a"]{border:2px solid #000;}
</style>
</head>
<body>
<div class="a-test">1</div>
<div class="b-test">2</div>
<div class="c-test">3</div>
</body>
</html>

​

四，伪类选择符(权重：001)

这篇太长了，写在下一篇

五，伪对象选择符(权重：0001)

这篇太长了，写在下一篇

注：CSS3后将伪对象选择符前面的单个冒号(:)修改为双冒号(::)用以区别伪类选择符，但以前的写法仍然有效。

注：本文只为方便本人记忆的总结如有建议敬请留言

野猪麦兜
关注
专栏目录
css3选择器
m0_46388605的博客
03-10 156
CSS选择器 E[att] {} : 选择具有att属性的E元素。 E[att=“val”] {} : 选择具有att属性且属性值等于val的E元素。 E[att~=“val”] {}:用于选取属性值中包含指定词汇的元素。 E[att|=“val”] {}:选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素，如果属性值仅为val，也将被选择 E[att*=“val”] {...
css选择符第二部分(基础用法)
qq_58242432的博客
11-25 1602
css选择符第二部分(基础用法) 四，伪类选择符
CSS子选择符
xyjikl
07-18 709
CSS子选择符也可以称为子对象选择符、子选择器等，主要用于定义某个元素中子元素对象的样式，无法定义子元素以外的对象。 子选择器可以让我们指定要的是哪个父标签的哪个子标签。也就是说，子选择器只对元素的子元素生效，而不会影响到其它元素的后代元素。 所谓子元素，类似于下面的格式： 子元素的格式 strong元素就是p元素的子元素。 CSS子选择符的定义 子选择符的选择
CSS 组合选择符
最新发布
梁辰兴的博客
09-20 318
可以说，后代选择符中的空格，是用来表示后代层级的，当然就不限于二级的。子元素选择符的语法是在两个元素之间放置一个大于符号（>），表示只选择作为某个元素的直接子元素的元素，而不包括后代元素。这个选择器会作用于div元素的所有后代p元素，不论p元素在div元素的嵌套层次中的位置如何。相邻兄弟选择符是CSS选择符的一种，用来选取在另一元素后紧接的元素，并且二者有相同父元素。选择符就表示选择所有跟在h1元素后面的p元素，并可以设置这些p元素的样式。CSS子元素选择符可以选择作为某个元素的直接子元素的元素。
子选择器
dmpnosvn28419的博客
08-29 1039
子选择器 还有一个比较有用的选择器子选择器，即大于符号(>),用于选择指定标签元素的第一代子元素。如右侧代码编辑器中的代码： .food>li{border:1px solid red;} 这行代码会使class名为food下的子元素li（水果、蔬菜）加入红色实线边框。 <!DOCTYPE HTML> <html> <he...
【CSS选择符】子代选择符
weixin_39415598的博客
01-02 510
0018.jpg 后代选择符用于选取一个标签的所有后代，包括子代和孙辈等；而子代选择符只选取指定父辈的子代标签（指定标签元素的第一代子元素）。 子代选择符使用一个额外的符号（尖括号> ）表明两个元素之间的关系。 例如：body>h1 选取的是<body>标签里的所有第一代<h1>标签。 HTML标签的关系图...
CSS选择符.docx
12-16
1. **元素选择符**：元素选择符是最基础的选择符，通过元素名来选择元素。例如，`h2 {font: large/150% sans-serif;}` 会将所有`<h2>`元素的字体设置为大号字体，并将字体族设为无衬线字体。 2. **类选择符**：类...
CSS中一些特殊的上下文选择符的使用
09-25
以下将详细介绍几种常用的CSS特殊上下文选择符的使用方法和场景。 1. 子选择符（Child Selector）">" 子选择符表示元素A必须是元素B的直接子元素。它只能匹配那些直接嵌套在元素B里的元素A。在文档树中，如果元素A...
简介CSS中的各种选择符
09-25
本篇文章将深入介绍CSS中的各种选择符及其用法。 1. 类型选择符：类型选择符是基于HTML元素的标签名来选择元素，例如`div`、`p`或`h1`。例如，`div`会选择所有`<div>`元素并应用相应的样式。 2. 类选择符：类选择...
CSS选择符详解：CSS1与CSS2的用法与实例
"本文详细介绍了CSS1和CSS2中的选择符用法和实例，涵盖了类型选择符、包含选择符、ID选择符、类选择符、分组选择符、通配选择符、子选择符、相邻选择符、属性选择符以及伪类和伪对象选择符。" 在CSS中，选择符是...
html中 号选择器,CSS兄弟选择器符号‘+’号与‘~’号的区别
weixin_42325867的博客
06-04 2497
今天有人问我，在CSS的兄弟选择器中'+'号和'~'号码的区别是什么，而我自己对这个问题也不是很清除，当然，如果想弄清楚一个问题，用实践的方式比较好，今天就通过举几个例子来说明一个，CSS选择器中的加号和“~”号的区别在什么地方！CSS兄弟相邻选择器加号相邻兄弟选择器使用了加号(+)，即相邻兄弟结合符(Adjacent sibling combinator)。注释：与子结合符一样，相邻兄弟结合符旁...
css面试点-元素选择符与关系选择符
wfly blog
10-14 570
元素选择符： 通配选择符：选定所有对象。如 *{color:#f00;} 类型选择符：以文档语言对象类型作为选择符。如 p{font-size:13px;} ID选择符：以唯一标识符id属性等于subtitle的E对象作为选择符，如 #subtitle{font-size:20px;} 注意，id选择符不能在同个元素上定义多个，比如id="a b"就是错误的写法。 类选择符：以class属性...
CSS3选择符
weixin_45846263的博客
04-19 158
CSS3选择符 在css中除了我们知道的元素选择符，还新增了一些选择符下面就来说说这些选择符。 很多选择符不仅仅是CSS里面可以用，js中也是可以用。 关系选择符 兄弟选择符(E~F) 选择符合条件的所有兄弟元素 相邻选择符(E+F) 选择紧贴在E元素之后F元素，元素E与F必须同属一个父级，只能向后找。 属性选择器 =全等，~=约等，^=开头，$=结尾，*=含有，|=特别 伪类选择器 结构伪...
CSS3 选择器总结及详解
Alice_yo的博客
12-26 594
CSS3 选择器 在 CSS 中，选择器是一种模式，用于选择需要添加样式的元素。 兄弟选择符： ~ <style> *{ margin: 0; padding: 0; } body{ text-align: center; } h3{ background: yellow; width: 150px; height: 40px; line-hei...
<h1 class="title">jquery的checkbox,radio,select等方法总结</h1> <div class="meta"><time datetime="201
疯狂的简洁
06-15 963
jquery的checkbox,radio,select等方法总结 2014年8月15日 18062次浏览 jquery的checkbox，radio，和select是jquery操作的一个难点和重点，很多前端新手对其了解不是很透彻。时间久了不用，我在写的时候有时也难免对某些操作支支吾吾，记不清楚，现在，对其做一些简单的总结！ 1、checkbox日常jquery操作。 现在我们以下面
相邻兄弟选择器（+）
bingkingboy的博客
03-31 7782
今天在做导航栏的时候，需求里面需要实现一个小的动画效果，需求：导航栏中，鼠标移入每个链接，链接字体颜色发生改变，同时导航栏下面的小点圆圈移动到相对应的位置。因为需要兼容IE8的缘故，动画使用JQuery的animation函数来实现的。当完成导航栏的制作后，我突发奇想如果不需要用到任何JS是否可以实现该动画。 先看下测试中导航栏的代码 HTML <div class="nav"> <u
css选择器——[class*="col-"]，[attr~=val]等
Zoey_J的博客
08-26 1126
[attr=val]：选择属性"attr"等于val的所有元素； [attr~=val]：选择属性"attr"包含val的所有元素； [attr|=val]：选择属性"attr"以val开头的所有元素； [attr*=“val-”]：选择所有类名中含有"val-"的元素 [attr^=“val-”]：选择所有类名中以"val-"开头的元素 [attr$="-val"]：选择所有类名中以"-val...
HTML元素分类
老杨头的博客
11-14 1459
HTML页面由各种元素组合而成，按照元素不同的表现行为可分为块级元素、行内元素以及行块级元素。 1、块级元素 块级元素具有以下特点： 元素会在内联的方向上扩展并占据父容器在该方向上的所有可用空间，在大部分情况下意味着该元素会和父容器一样宽。 每个元素都会在新的一行开始布局，呈现换行效果。 元素的width和height属性可以生效 内边距（padding）, 外边距（margin） 和 边框（bord...
CSS学习————css的选择器（2）
meng_xiaoxiao的博客
10-19 282
3、伪类选择器（根据HTML元素特定的状态的选择元素，比如:active元素被鼠标按下去、:hover鼠标滑过元素）2、组合选择器（4种）（根据他们之间的特定关系来选择html元素）2-3：相邻兄弟选择器（+）：相同父级，紧随其后的元素。2-4：通用兄弟选择器（~）：相同父级，所有同级元素。选择器的作用：用来查找要设置html样式的元素；2-1：后代选择器（空格）：选择后代所有的元素。4、伪元素选择器（选取元素的一部分并设置样式）2-2：子选择器（>）:直接子元素。1-1：通配符选择器。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值