htmlcss系列学习——（五）css选择器

选择器:

标签选择器

格式：标签名称{属性:值;}
例如：div{color:skyblue;}

id标签选择器

格式：#id名称{属性:值;}
例如：#id{color:pink;}

class选择器

格式：.类名{属性:值;}
例如：.class{color:orange;}

伪类选择器

格式：选择元素:状态{属性:值;}
状态：
:first-child ------------------选中同级别中的第一个标签
:last-child ------------------选中同级别中的最后一个标签
:nth-child() ----------------该状态的括号内可填：
------------------------------ n(选中同级别中的第n个标签);
------------------------------ odd(选中同级别中的所有奇数);
------------------------------ even(选中同级别中的所有偶数);
------------------------------ an+b(a和b是用户自定义的, 而n是一个计数器, 从0开始递增)
:nth-last-child(n) ---------选中同级别中的倒数第n个标签
:only-child -----------------选中父元素仅有的一个子元素E。仅有一个子元素时生效
:first-of-type---------------选中同级别中同类型的第一个标签
:last-of-typ ---------------选中同级别中同类型的最后一个标签
:nth-of-type(n) -----------选中同级别中同类型的第n个标签
:nth-last-of-type(n) -----选中同级别中同类型的倒数第n个标签
:only-of-type -------------选中父元素的特定类型的唯一子元素

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div:first-child{color:pink;}div:last-child{color:aqua;}div:nth-child(2){color: gold;}</style>
</head>
<body><div>one</div><div>two</div><div>three</div>
</body>
</html>

动态伪类

格式：选择元素:状态{属性:值;}
状态：
:link 超链接未被访问过
:visited 超链接被访问过
:active 超链接被点击瞬间
:hover 鼠标滑入

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#a:link{color:aqua;}#a:visited{color:pink;}#a:active{color:red;}div:hover{color:yellow}</style>
</head>
<body><a href="#" id="a">xxx</a><div>xxxxxxxxxxxx</div>
</body>
</html>

否定伪类

格式：选择元素:not(剔除元素){属性:值;}
例如：除id属性为a的div,其他div的color都变为粉色

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div:not(#a){color:pink;}</style>
</head>
<body><div>xxx</div><div id="a">xxx</div><div>xxx</div>
</body>
</html>

交集选择器

交集选择器格式：标签名称1标签名称2{属性:值;}
例如：仅选择满足p标签且满足id属性为a的

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>p#a{color:pink;}</style>
</head>
<body><div id="a">one</div><p id="a">two</p><p id="b">three</p>
</body>
</html>

并集选择器

并集选择器格式：标签名称1,标签名称2{属性:值;}
例如：同时选择class属性为a的和id属性为b的

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.a,#b{color:pink;}</style>
</head>
<body><div id="a" class="a">one</div><p id="a">two</p><p id="b">three</p>
</body>
</html>

后代选择器

格式：标签名称1 标签名称2{属性:值;}
例如：选择div中后代为span标签的

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div span{color:pink;}</style>
</head>
<body><div><span>1</span><p>2</p><span>3</span></div>
</body>
</html>

子代选择器

格式：标签名称1>标签名称2{属性:值;}
例如：div中选择子代class属性为three的

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div>.three{color:pink;}</style>
</head>
<body><div><span class="one">1</span><p class="two">2</p><span class="three">3</span></div>
</body>
</html>

兄弟选择器

相邻兄弟选择器格式：标签名称1+标签名称2{属性:值;}
例如：选择id属性为id1的相邻兄弟id2

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#id1+#id2{color:pink;}</style>
</head>
<body><div><div id="id1">1</div><div id="id2">2</div><div id="id3">3</div></div><div id="id2">22</div>
</body>
</html>

通用兄弟选择器格式：标签名称1~标签名称2{属性:值;}
例如：.选择id属性为id1的兄弟id3

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#id1~#id3{color:pink;}</style>
</head>
<body><div><div id="id1">1</div><div id="id2">2</div><div id="id3">3</div></div><div id="id3">33</div>
</body>
</html>

htmlcss系列学习——（五）css选择器相关推荐

HTML+CSS+JavaScript复习笔记持更（五）——CSS选择器
CSS选择器在一个页面中,必不可少的就是css样式,css样式全都写在style标签中,在使用css时,我们可以用的css选择器非常之多,所以css选择器的分类也很多,但是基本上可以统计分为两类:基 ...
html5类选择器用什么表示,HTML_揭秘常用的五类CSS选择器用法，有许多新手朋友不知道在什么 - phpStudy...
揭秘常用的五类CSS选择器用法有许多新手朋友不知道在什么情况下运用什么样的CSS选择器,针对新手朋友,对CSS选择器作一些简单的说明,这里重点介绍一下最常用的五类CSS选择器的使用. 本文向大家描述 ...
css样式的五种选择器
css样式的五种选择器 css样式中有五种选择器,分别是标签选择器.类选择器.ID选择器.派生选择器.组合选择器,接下来为大家一一介绍. (1)标签选择器针对于标签的选择器,这种选择器中的样式会作用 ...
css选择器的应用的实验,HTMLCSS实验(3)---掌握CSS选择器的使用方法
[实验题目]HTML&CSS实验(3) [实验目的]掌握CSS选择器的使用方法. ----------------------个人作业,如果有后辈的作业习题一致,可以参考学习,一起交流,请勿直 ...
CSS常用五类选择器
要使用css对HTML页面中的元素实现一对一,一对多或者多对一的控制,这就需要用到CSS选择器. ㈠什么是选择器? 每一条css样式定义由两部分组成,形式如下: [code] 选择器{样式} [/co ...
设计中最常用的CSS选择器
准确而简洁的运用CSS选择器会达到非常好的效果.我们不必通篇给每一个元素定义类(class)或ID,通过合适的组织,可以用最简单的方法实现同样的效果.在实际工作中,最常用的选择器有以下五类: 一.标签 ...
16.CSS选择器【下】
第十三章 CSS选择器[下] 一.伪类选择器总汇二.结构性伪类选择器 :能够根据元素在文档中的位置选择元素,这类元素都有一个前缀(:) 1.根元素选择器 :(基本不怎么用,因为总是返回<ht ...
CSS选择器详细介绍
CSS3 基本选择器 * E .class #id EF E>F E+F E[attribute] E[attribute=value] E[attribute~=value] E[attrib ...
外链引入css有哪些方式_HTML+CSS基础(三) CSS的引入方式和CSS选择器
一.CSS概念: 什么是CSS,CSS说白了就是给页面添加样式,让整个页面变的好看起来的一种东西,用来定义网页外观,如字体.背景.颜色等二.在页面中使用css的3种常用方式 1.行内样式就是在一个 ...
一个容易被忽视的css选择器
之前学的的迷糊了,也不知道什么会什么不会了,跑去面试了.别人列出一堆css选择器,本以为选择器没啥的,结果到那个多类选择器翻车了,.a.b选择同时含a,b类名的,很尴尬所以回来仔细整理了一下.目前根据 ...

htmlcss系列学习——（五）css选择器

选择器:

htmlcss系列学习——（五）css选择器相关推荐

最新文章

热门文章