CSS选择器

标签选择器

作用：根据指定的标签名称, 在当前界面中找到所有该名称的标签, 然后设置属性。

<style>/* 标签选择器 */div {color: aqua;font-size: 20px;}
</style>

 1.标签选择器选中的是当前界面中所有的标签, 而不能单独选中某一个标签2.标签选择器无论标签藏得多深都能选中3.只要是HTML中的标签就可以作为标签选择器(h/a/img/ul/ol/dl/input....)

id选择器

作用: 根据指定的id名称找到对应的标签, 然后设置属性。

<style>/* id选择器: #id 给一个标签设置样式 一般情况下如果只是设置样式 我们不会使用id*/#div1 {background-color: aquamarine;}
</style>

 1.每个HTML标签都有一个属性叫做id, 也就是说每个标签都可以设置id2.在同一个界面中id的名称是不可以重复的3.在编写id选择器时一定要在id名称前面加上#4.id的名称是有一定的规范的（1）id的名称只能由字母/数字/下划线，a-z 0-9 _（2）id名称不能以数字开头（3）id名称不能是HTML标签的名称

类选择器

作用: 根据指定的类名称找到对应的标签, 然后设置属性

<head><style>/* 类选择器： .class  给同一个类的标签设置样式*/.div3 {background-color: bisque;}.div5 {font-size: 20px;}</style>
</head>
<body><div class="div3 div5">我是一个多类名div</div>
</body>

 1.每个HTML标签都有一个属性叫做class, 也就是说每个标签都可以设置类名2.在同一个界面中class的名称是可以重复的3.在编写class选择器时一定要在class名称前面加上"."4.类名就是专门用来给CSS设置样式的5.类名的命名规范和id名称的命名规范一样6.在HTML中每个标签可以同时绑定多个类名

id和class的区别：1.id相当于人的身份证不可以重复；class相当于人的名称可以重复。2.一个HTML标签只能绑定一个id名称；一个HTML标签可以绑定多个class名称。

后代选择器

作用: 找到指定标签的所有特定的后代标签, 设置属性。

    <style>/* 后代（子代+其他后代）选择器 空格隔开 给div标签中的p标签设置样式*/div p {color: aquamarine;}</style>

 1.后代选择器必须用空格隔开2.后代不仅仅是儿子, 也包括孙子/重孙子, 只要最终是放到指定标签中的都是后代3.后代选择器不仅仅可以使用标签名称, 还可以使用其它选择器4.后代选择器可以通过空格一直延续下去

子元素选择器

作用: 找到指定标签中所有特定的直接子元素, 然后设置属性

    <style>/* 子代 子元素的选择器  >隔开(直接子代) 给类名为div1的标签里的p标签设置样式*/.div1>p {color: aqua;}</style>

 1.子元素选择器只会查找儿子, 不会查找其他被嵌套的标签2.子元素选择器之间需要用>符号连接, 并且不能有空格3.子元素选择器不仅仅可以使用标签名称, 还可以使用其它选择器4.子元素选择器可以通过>符号一直延续下去

后代选择器和子元素选择器的区别： 1.后代选择器使用空格作为连接符号；子元素选择器使用>作为连接符号。 2.后代选择器会选中指定标签中, 所有的特定后代标签；子元素选择器只会选中指定标签中, 所有的特定的直接标签。

交集选择器

作用: 给所有选择器选中的标签中, 相交的那部分标签设置属性。

    <style>/* 交集选择器 *//* 标签选择+类选择器 */p.p1 {color: aqua;}</style><p class="p1">第1个标签</p>

 1.选择器和选择器之间没有任何的连接符号2.选择器可以使用标签名称/id名称/class名称

并集选择器

作用: 给所有选择器选中的标签设置属性。

    <style>/* 并集选择器 */.p1,#p2 {font-size: 20px;}</style><p class="p1">第1个标签</p><p id="p2">第2个标签</p>

 1.并集选择器必须使用,来连接2.选择器可以使用标签名称/id名称/class名称

兄弟选择器（相邻css2 通用css3）

作用: 给指定选择器后面的所有选择器选中的所有标签设置属性。

    <style>/* 兄弟选择器 *//* css2相邻选择器 只会选择离p1最近的一个兄弟*/.p1+p {color: aqua;}/* css3通用选择器 */.p1~p {font-size: 20px;}</style>

 1.通用兄弟选择器必须用~连接2.通用兄弟选择器选中的是指定选择器后面某个选择器选中的所有标签, 无论有没有被隔开都可以选中

伪类选择器

伪类以":"开头，用在选择器后，用于指明元素在某种特殊的状态下才能被选中
序选择器（结构为伪类选择器）

CSS3中新增的选择器最具代表性的就是序选择器:
- :first-child 选中同级别中的第一个标签
- :last-child 选中同级别中的最后一个标签
- :nth-child(n) 选中同级别中的第n个标签
- :nth-child(odd) 选中同级别中的所有奇数
- :nth-child(even) 选中同级别中的所有偶数
```
 <style>/* 伪类选择器 适用范围：同级别*/p:first-child {color: aquamarine;}p:last-child {color: blueviolet;}p:nth-child(5) {color: cornsilk;}/* 奇数标签 */p:nth-child(odd) {font-size: 25px;}/* 偶数标签 */p:nth-child(even) {font-size: 20px;}</style>第1个标签第2个标签第3个标签第4个标签第5个标签第6个标签第7个标签第8个标签
```
- :nth-child(xn+y) x和y是用户自定义的, 而n是一个计数器, 从0开始递增,例如(3n+1)分别对应1,4,7
- :nth-last-child(n) 选中同级别中的倒数第n个标签
- :only-child 选中父元素仅有的一个子元素E。仅有一个子元素时生效

a标签的伪类选择器（动态伪类选择器）

1.E:link（链接伪类选择器）：选择匹配的E元素，而且匹配元素被定义了超链接并未被访问过。常用于链接描点上
2.E:visited（链接伪类选择器）：选择匹配的E元素，而且匹配元素被定义了超链接并已被访问过。常用于链接描点上
3.E:active（用户行为选择器）：选择匹配的E元素，且匹配元素被激活。常用于链接描点和按钮上
4.E:hover （用户行为选择器）：选择匹配的E元素，且用户鼠标停留在元素E上

<head><style>/* 动态伪类  顺序不能乱  *//* 还未访问过 */a:link {color: black;}/* 用户已经访问过 */a:visited {color: chartreuse;}/* 鼠标悬浮 */a:hover {color: crimson;}/* 鼠标按住不动 */a:active {color: cyan;}</style>
</head>
<body><a href="https://www.baidu.com">百度一下，你就知道啊</a>
</body>

 链接还未点击时，颜色为black；链接已经访问过时，颜色为chartreuse；鼠标悬浮链接时，颜色为crimson；鼠标按住链接并且不动时，颜色为cyan；注意：样式设置顺序必须是link-visited-hover-active

否定伪类

作用：可以从已选中的元素中剔除出某些元素

<style>        /* 否定伪类 :not(类名) *//* 除了.p2其他都设置样式 */p:not(.p2) {color: cyan;}
</style><p>第1个标签</p><p class="p2">第2个标签</p><p>第3个标签</p><p>第4个标签</p><p>第5个标签</p>

除了类名为p2的p标签，其他p标签都设置color: cyan;样式

伪元素选择器

使用伪元素来表示元素中的一些特殊位置

 1. ::after  表示元素的最后边的部分，一般需要结合content这个样式一起使用2. ::before  表示元素最前边的部分，一般需要结合content这个样式一起使用3. ::first-letter  为第一个字符来设置一个样式4. ::first-line  为第一行设置一个样式

    <style>/* 伪元素选择器 */p::after {content: '我是一个::after';}P::before {content: '我是一个::before';}/* 设置首字符的样式 */p::first-letter {color: aqua;font-size: 28px;}/* 首行文字的样式 */p::first-line {color: aquamarine;}</style>

属性选择器

作用: 根据指定的属性名称找到对应的标签, 然后设置属性

    <style>/* 属性选择器 *//* 标签[属性：值]{} */input[type='text'] {background-color: aquamarine;}input[type='password'] {background-color: plum;}</style><form action="">用户名：<input type="text" name="username">密码：<input type="password" name="user_password"></form>

通过type属性名找到对应的标签进行颜色样式设置

通配符选择器与组合选择器

通配符选择器作用：给当前界面上所有的标签设置属性
组合选择器：多个选择器组合使用

例子：

    <style>/* 通配符选择器 作用：去除标签的默认样式 */* {/* 去除标签的下划线 */text-decoration: none;/* 去除无序列表默认样式 */list-style-type: none;}/* 组合选择器 */.one,.two {color: plum;}</style>

基础：CSS3选择器详解相关推荐

css2和css1,CSS1，CSS2选择器详解
第一.CSS选择器: 1.元素选择器(也叫标签选择器,是最基本的选择器) html{background-color: red;} div{background-color: yellow;} 2.I ...
[Python从零到壹] 九.网络爬虫之Selenium基础技术万字详解（定位元素、常用方法、键盘鼠标操作）
欢迎大家来到"Python从零到壹",在这里我将分享约200篇Python系列文章,带大家一起去学习和玩耍,看看Python这个有趣的世界.所有文章都将结合案例.代码和作者的经验讲 ...
[Python从零到壹] 五.网络爬虫之BeautifulSoup基础语法万字详解
欢迎大家来到"Python从零到壹",在这里我将分享约200篇Python系列文章,带大家一起去学习和玩耍,看看Python这个有趣的世界.所有文章都将结合案例.代码和作者的经验讲 ...
html5中的empty是啥,什么是empty选择器？empty选择器详解
本篇文章给大家带来的内容是关于什么是empty选择器?empty选择器详解,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 在CSS3中,:empty选择器用于选择一个不包含任何子元素 ...
基础排序算法详解与优化
文章图片存储在GitHub,网速不佳的朋友,请看<基础排序算法详解与优化> 或者来我的技术小站 godbmw.com 1. 谈谈基础排序常见的基础排序有选择排序.冒泡排序和插入排序.众 ...
基础拾遗------委托详解
基础拾遗: 基础拾遗------特性详解基础拾遗------webservice详解基础拾遗------redis详解基础拾遗------反射详解基础拾遗------委托详解基础拾遗---- ...
[系统安全] 四十四.APT系列(9)Metasploit技术之基础用法万字详解及防御机理
您可能之前看到过我写的类似文章,为什么还要重复撰写呢?只是想更好地帮助初学者了解病毒逆向分析和系统安全,更加成体系且不破坏之前的系列.因此,我重新开设了这个专栏,准备系统整理和深入学习系统安全.逆向分 ...
基础拾遗------泛型详解
基础拾遗: 前言: 1.泛型的约束 2.泛型继承 3.关键字default 4.泛型方法 5.泛型接口 6.泛型数组 7.泛型委托基础拾遗: 基础拾遗------特性详解基础拾遗------ ...
python 3.x 爬虫基础---http headers详解
python 3.x 爬虫基础 python 3.x 爬虫基础---http headers详解 python 3.x 爬虫基础---Urllib详解 python 3.x 爬虫基础---Requer ...

基础：CSS3选择器详解

CSS选择器

基础：CSS3选择器详解相关推荐

最新文章

热门文章