选 择 器

article/2025/9/21 5:53:58

目录

1、三种基本选择器（重要）

（1）基本选择器

（2）类选择器 class

（3）id选择器

2、层次选择器

（1）后代选择器

（2）子选择器

（3）相邻兄弟选择器

（4）通用选择器

3、结构伪类选择器

（1）这个就是ul的第一个元素

（2）这个是ul的最后一个元素  

（3）选中p1 ：定位到父元素，选择当前的第一个元素

（4）如果第一个标签不是p，则就无效

（5）需要修改的话则要把nth-child(1)改成nth-child(2)

（6）选中父元素，下的p元素的第二个，类型

4、属性选择器（重要）

 （1）直接使用id属性

（2）id=first的元素

（3）class中有links的元素

（4）选中href中以http开头的元素

（5）选中结尾为jpg的元素

作用:选择页面上的某一个或者某一类元素  

1、三种基本选择器（重要）

（1）基本选择器

  • 标签选择器：选择一类标签 标签{}  
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>/* 标签选择器，会选择到页面上所有的这个标签元素 */h1 {/*这个color就是颜色，badground:就是背景，border-radius:就是边框弧度大小*/color: #517851;badground: #150101;border-radius: 20px;}p{/*字体大小*/font-size: 70px;}</style></head>
<body><h1>学java</h1><h1>学Java</h1><p>看我的！</p></body>
</html>

 

运行结果：

 

（2）类选择器 class

  • 选择所有class 属性一致的标签，跨标签 .类名{}
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>/* 类选择器的格式，.class的名称{}好处，可以多个标签归类，是同一个class，可以复用*/.shan{color: #4036bb;}.shanmu{color: #c43a3a;}</style></head>
<body><h1 class="shanmu">标题1</h1>
<h1 class="shan">标体2</h1>
<h1 class="shan">标体3</h1><P class="shan">p标签</P></body>
</html>

运行结果：

 

 

（3）id选择器

  •  优先级：id > class > 标签（非常重要！！！）
  • 全局唯一 #id名{}
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>/*id选择器：id必须保证全局唯一#id名称{}优先级：不遵循就近原则，固定的id选择器 > clss选择器 > 标签选择器*/#shanmu {color: #4036bb;}.style1 {color: #4036;}h1 {color: aqua;}#sanmu{color: #150101;}</style></head>
<body><h1 class="style1" id="shanmu">标签1</h1><h1 class="style1" id="sanmu">标签2</h1><h1 class="style1">标签3</h1><h1>标签4</h1><h1>标签5</h1><h1>标签6</h1></body>
</html>

 

运行结果：

 

2、层次选择器

 

（1）后代选择器

  • 在某个元素的后面 祖爷爷 爷爷 爸爸 你 (就是p元素后面的全部都是后代)，后代后面是空格
    /*    后代选择器*/body p{background: red;}
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>/*p{*//*    background: #4036bb;*//*}*//*    后代选择器*/body p{background: red;}</style></head>
<body><p>p1</p>
<p>p2</p>
<p>p3</p><ul><li><p>p4</p></li><li><p>p5</p></li><li><p>p6</p></li>
</ul></body>
</html>

 

输出结果：  

（2）子选择器

  • 一代 儿子，这里其实就是只有p第一代才有，后面的都没有，子选择器后面是>  
    /*    子选择器*/body>p{background: #517851;}

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>/*    子选择器*/body>p{background: #517851;}</style>
</head>
<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul><li><p>p4</p></li><li><p>p5</p></li><li><p>p6</p></li>
</ul>
</body>
</html>

输出结果：  

（3）相邻兄弟选择器

  • 其实就是有class="active"的下一个进行设置，在这里就是p1的下一个p2，p7的下一个p8，相邻兄弟选择器后面是+  
        /*    相邻兄弟选择器：只有一个，相邻（向下）*/.active + p {background: green;}
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>/*    相邻兄弟选择器：只有一个，相邻（向下）*/.active + p {background: green;}</style>
</head>
<body><p>p0</p>
<p class="active">p1</p>
<p>p2</p>
<p>p3</p>
<ul><li><p>p4</p></li><li><p>p5</p></li><li><p>p6</p></li>
</ul><p class="active">p7</p>
<p>p8</p></body>
</html>

 

输出结果：

（4）通用选择器

  • 后面跟着是~，就是当前选中的元素向下的所有兄弟元素，在这里就是p1是当前选中的元素，然后p2 p3 p7 p8是后面的同辈元素，所以他们都是兄弟元素  
/*    通用兄弟选择器，当前选中元素的向下的所有兄弟元素*/
.active~p{background: brown;
}

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>/*p{*//*    background: #4036bb;*//*}*//*!*    后代选择器*!*//*    body p{*//*        background: red;*//*    }*//*!*    子选择器*!*//*    body>p{*//*        background: #517851;*//*    }*//*!*    相邻兄弟选择器：只有一个，相邻（向下）*!*//*.active + p {*//*    background: green;*//*}*//*    通用兄弟选择器，当前选中元素的向下的所有兄弟元素*/.active~p{background: brown;}</style>
</head>
<body><p>p0</p>
<p class="active">p1</p>
<p>p2</p>
<p>p3</p>
<ul><li><p>p4</p></li><li><p>p5</p></li><li><p>p6</p></li>
</ul><p>p7</p>
<p>p8</p></body>
</html>

 

输出结果：

3、结构伪类选择器

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!--不使用 class选择器  id选择器  的前提下--><style>/*ul的第一个子元素*/ul li:first-child {background: #66c81e;}/*ul的最后个子元素*/ul li:last-child {background: #c82527;}/*选中p1  定位到父元素，选择当前的第一个元素 顺序选择当前p元素的父级元素，选中父级元素的第一个，并且是当前元素才生效！*/p:nth-child(1) {background: #47c8bc;}/*选中父元素下的p元素的第二个，类型 */p:nth-of-type(2) {background: #356fc8;}/*鼠标悬停 */a:hover {background: #c8c557;}</style>
</head>
<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul><li>li1</li><li>li2</li><li>li3</li>
</ul>
<a>link</a></body>
</html>

 输出结果：

 p1：使用

    p:nth-child(1) {background: #47c8bc;}

p2：使用

    p:nth-of-type(2) {background: #356fc8;}

li1：使用

   ul li:first-child {background: #66c81e;}

li3 ：使用

    /*ul的最后个子元素*/ul li:last-child {background: #c82527;}

（1）这个就是ul的第一个元素

/*ul的第一个子元素*/
ul li:first-child {background: #2071c7;
}

 

 输出结果：

（2）这个是ul的最后一个元素  

/*!*    ul的最后一个子元素*!*/
ul li:last-child {background: #26de26;
}

 

输出结果：

 

 

（3）选中p1 ：定位到父元素，选择当前的第一个元素

选择当前p元素的父级元素，选中父级元素的第一个，并且是当前元素才生效！

/*    选中p1 ：定位到父元素，选择当前的第一个元素
选择当前p元素的父级元素，选中父级元素的第一个，并且是当前元素才生效！
*/p:nth-child(1){background: rgba(45, 44, 44, 0.86);}

 

输出结果：

 

（4）如果第一个标签不是p，则就无效

/*    选中p1 ：定位到父元素，选择当前的第一个元素
选择当前p元素的父级元素，选中父级元素的第一个，并且是当前元素才生效！
*/p:nth-child(1){background: rgba(45, 44, 44, 0.86);}

 

 输出结果：

 

（5）需要修改的话则要把nth-child(1)改成nth-child(2)

/*    选中p1 ：定位到父元素，选择当前的第一个元素
选择当前p元素的父级元素，选中父级元素的第一个，并且是当前元素才生效！
*/p:nth-child(2){background: rgba(45, 44, 44, 0.86);}

 

输出结果： 

（6）选中父元素，下的p元素的第二个，类型

/*    选中父元素，下的p元素的第二个，类型*/p:nth-of-type(1){background: #4036bb;}

 

输出结果：

 

4、属性选择器（重要）

  • id + class 结合
  • 属性名，属性名=属性值（正则）
  •  = 绝对等于
  • *= 包含这个元素
  • ^= 以这个开头
  •  $= 以这个结尾

  

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.demo a {/*向左浮动*/float: left;/*将元素显示为块元素*/display: block;/*高度*/height: 50px;/*宽度*/width: 50px;/*圆角弧度*/border-radius: 10px;/*背景颜色*/background: #a12727;/*对其方式：居中对齐*/text-align: center;/*文字颜色*/color: #4036bb;/*外边距*/text-decoration: none;/*    每个元素往右边偏移5个距离*/margin-right: 5px;/*    font 后面是粗体，粗体大小*/font: bold 20px/50px Arial;}/*    属性名，属性名=属性值（正则）= 绝对等于*= 包含这个元素^= 以这个开头$= 以这个结尾*//*存在id属性的元素，  a[]{}*//*a[id]{*//*background: #517851;*//*}*//*与上面效果是一样的*//*id=first的元素*//*a[id=first] {*//*    background: bisque;*//*}*//*    class中有links的元素   *//*a[class*="links"] {*//*    background: yellowgreen;*//*}*//*    选中href中以http开头的元素*//*a[href^=http] {*//*    background: yellow;*//*}*/a[href$="jpg"]{background: #7570aa;}</style></head>
<body><p class="demo"><a href="https://www.baidu.com" class="links item first" id="first">1</a><a href="" class="links item active" target="_blank" title="test">2</a><a href="img/123.html" class="links item">3</a><a href="img/123.png" class="links item">4</a><a href="img/123.jpg" class="links item">5</a><a href="abc" class="links item">6</a><a href="/a.pdf" class="links item">7</a><a href="/abc.pdf" class="links item">8</a><a href="abc.doc" class="links item">9</a><a href="abcd.doc" class="links item last">10</a></body>
</html>

 

 （1）直接使用id属性

        /*存在id属性的元素，  a[]{}*/a[id]{background: #517851;}

 

 输出结果：

 

（2）id=first的元素

        /*与上面效果是一样的*//*id=first的元素*/a[id=first] {background: bisque;}

 

输出结果：

 

（3）class中有links的元素

        /*    class中有links的元素   */a[class*="links"] {background: yellowgreen;}

 

输出结果：

 

（4）选中href中以http开头的元素

        /*    选中href中以http开头的元素*/a[href^=http] {background: yellow;}

输出结果：

 

（5）选中结尾为jpg的元素

        /*选中结尾为jpg的元素*/a[href$="jpg"]{background: #7570aa;}

 

输出结果：

 


http://chatgpt.dhexx.cn/article/Y5Kuc9dk.shtml

相关文章

AD域基础

AD域基础

文章目录 AD域基础1.什么是AD域2.AD域和工作组的区别2.1 工作组特点及优缺点2.2 AD域特点及优缺点 3.为什么要做AD域管理4.AD域可以做什么 AD域基础 1.什么是AD域 active directory 活动目录&#xff0c;指一组服务器和工作站的集合&#xff0c;域中的目录是始终呈激活可用&a…
阅读更多...
创建AD域

创建AD域

创建AD域&#xff08;skills.cn&#xff09;&#xff1a; &#xff08;1&#xff09;安装首台域控制器 &#xff08;2&#xff09;安装第二台域控制器 &#xff08;3&#xff09;将member server加入到skills.cn域 &#xff08;4&#xff09;将client加入到skills.cn域 建域的必…
阅读更多...
AD域详细介绍和部署

AD域详细介绍和部署

文章目录 网络基础域一、概述二、部署域模式1. 部署活动目录&#xff08;AD&#xff09;2. 客户机加入域3. 组织单位&#xff08;OU&#xff09;4. 组策略4.1 概述4.2 创建GPO4.3 组策略应用顺序4.4 编辑测试组策略4.5 阻止继承4.6 强制组策略4.7 计算机&用户脚本4.8 计算机…
阅读更多...
AD域允许普通用户打开需要管理员权限的软件

AD域允许普通用户打开需要管理员权限的软件

问题场景描述 公司的所有电脑都加了域&#xff0c;防止有些不安分的员工擅自下载及安装一些其他软件&#xff0c;导致电脑变卡或者中毒等&#xff0c;所以加了域后&#xff0c;安装任何软件都由IT来安装&#xff0c;但是这里涉及到一个问题&#xff0c;安装的时候需要管理员密…
阅读更多...
AD域组策略管理

AD域组策略管理

一、Active Directory组策略管理 ADManager Plus是一个基于web的Active Directory管理和报表工具&#xff0c;只需点击几下即可帮助为多个域管理组策略对象(GPO)。它还提供预制的组策略(GPO)报表&#xff0c;可快速提取GPO相关信息。 使用ADManager Plus轻松管理Windows Acti…
阅读更多...
AD域：添加辅域控制器(辅域服务器)

AD域：添加辅域控制器(辅域服务器)

前言&#xff1a; 如下我创建了一个AD域&#xff0c;现在只有一个主域控制器&#xff0c;也就是创建AD域的第一台服务器默认为主域控制器。为防止主域服务器出现故障影响整个域的运作&#xff0c;故现在要为该域添加一个辅域服务器&#xff0c;用来做备用域服务器。 域&#…
阅读更多...
什么是AD域？域能给公司带来什么好处？哪款AD域管理工具比较好？

什么是AD域？域能给公司带来什么好处？哪款AD域管理工具比较好？

经营公司中很重要的一点就是对公司的管理&#xff0c;所以基本上所有中型公司为了更方便地管理公司电脑&#xff0c;打印机和用户都会请IT咨询公司来做AD域的设计。当然很多小型公司也有这样的设计以方便未来的成长。AD域会给公司带来有很多好处&#xff0c;并且给公司成长留足…
阅读更多...
AD域文件权限管理

AD域文件权限管理

活动目录文件权限管理 在网络上共享资源时&#xff0c;首先关心的是谁可以访问这些资源以及级别。在 Active Directory &#xff08;AD&#xff09; 环境中管理文件服务器可能很乏味&#xff0c;而且必须一次一个用户完成&#xff0c;这一事实使其成为系统管理员最耗时的活动之…
阅读更多...
AD域实现统一用户管理

AD域实现统一用户管理

AD域服务 什么是目录&#xff08;directory&#xff09;呢&#xff1f; 日常生活中使用的电话薄内记录着亲朋好友的姓名、电话与地址等数据&#xff0c;它就是 telephone directory&#xff08;电话目录&#xff09;&#xff1b;计算机中的文件系统&#xff08;file system&am…
阅读更多...
AD域建设管理（一）| 安装windows server2019、AD域、AD域证书服务

AD域建设管理（一）| 安装windows server2019、AD域、AD域证书服务

AD域建设管理&#xff08;一&#xff09;| 安装windows server2019、AD域、AD域证书服务 1.环境介绍及前言2.安装配置win server 2019虚拟机3.安装AD域服务、AD证书服务3.1.安装AD域服务3.2.配置AD域服务(将此服务器提升为域控制器)3.3.安装AD域证书服务3.4.配置AD域证书服务 4…
阅读更多...
AD域组策略安全管理

AD域组策略安全管理

信息安全-终端安全&#xff08;AD域组策略安全管理&#xff09; 终端安全体系五要素&#xff1a; 身份认证&#xff1a;AD认证、身份标识、角色定义、外部纷争系统等。 准入控制&#xff1a;软件防火墙、802.1X交换机、网关准入控制、ARP、DHCP等。 安全认证&#xff1a;防病…
阅读更多...
通过Windows10管理AD域控

通过Windows10管理AD域控

有域控环境&#xff0c;要维护管理域控&#xff0c;一般都是直接在AD域控上操作&#xff0c;或者是远程到AD域控的服务器&#xff0c;有没有办法直接在windows10的电脑上操作管理域控呢&#xff1f;答案是肯定的&#xff0c;微软给我们提供一个插件&#xff1a;win10: WindowsT…
阅读更多...
AD域管理-Active Directory批量用户管理

AD域管理-Active Directory批量用户管理

在Microsoft Active Directory中管理用户帐户是对每个IT管理员的公开挑战。使用本地Active Directory工具或类似PowerShell等其它选项对用户属性进行手动配置是非常耗时&#xff0c;令人厌烦&#xff0c;而且容易出错&#xff0c;特别是在大型复杂的windows网络中。此外&#x…
阅读更多...
AD域控管理之授权普通用户或组管理计算机加入域和退出域的权限

AD域控管理之授权普通用户或组管理计算机加入域和退出域的权限

通过委派任务来实现&#xff0c;具体如下&#xff1a; 1. 在域控上打开Active Directory 用户和计算机&#xff0c;右击域名(注意“将计算机加入域”只能在域上委派&#xff0c;不能在OU上)&#xff0c;选择【委派控制】; 2. 下一步&#xff0c;点击添加&#xff0c;选择被授权…
阅读更多...
AD域控基本功能介绍

AD域控基本功能介绍

AD active Direcotry 域控制器是指在“域”模式下&#xff0c;至少有一台服务器负责每一台联入网络的电脑和用户的验证工作&#xff0c;相当于一个单位的门卫一样&#xff0c;称为“域控制器&#xff08;Domain Controller&#xff0c;简写为DC&#xff09;”。 将多台网络中…
阅读更多...
VMware-AD域控管理

VMware-AD域控管理

目录 新建AD用户[ 以张三[zhangsan]、李四[lisi]为例 ] 2.用户信息-属性-管理-编辑&#xff1a; 3.将张三设置为AD域控管理员&#xff0c; 在wqd.com域下新建几个部门&#xff08;IT、HR、PRD&#xff09; 对从主机&#xff08;win7&#xff09;进行AD接管 修改win7计算机名称&…
阅读更多...
光猫，路由器，机顶盒

光猫，路由器，机顶盒

本文仅记录一下我家的网络配置&#xff0c;不具有普适性。 1&#xff0c;路由方式 光猫是光纤入网进来的第一个机器&#xff0c;光猫有2个网口&#xff0c;网口1专门用来上网&#xff0c;网口2专门用来看电视。 路由器的WAN口接光猫网口1&#xff0c;是路由器的网络入口&…
阅读更多...
更换光猫的原理与方法

更换光猫的原理与方法

当你给装维打电话说你需要更换光猫时&#xff0c;对于装维来说&#xff0c;他并不需要知道怎么更换&#xff0c;他只需要生成一张工单&#xff0c;由后台进行业务操作后&#xff0c;在去用户家把新光猫给装好即可&#xff0c;此时装维到底起到了什么作用呢&#xff1f;我想可能…
阅读更多...
光猫、路由器、交换机、wifi通俗释义

光猫、路由器、交换机、wifi通俗释义

如今&#xff0c;网络已经进入了千家万户&#xff0c;上网已成为了我们生活中必不可少的事情。通常&#xff0c;在家里最常见的网络设备有&#xff1a;光猫&#xff08;光调制解调器&#xff09;、路由器、交换机、wifi&#xff0c;但很多小白用户并不能轻易区分它们。当遇上网…
阅读更多...
“光猫”调制解调器 和 路由器的区别 傻傻分不清

“光猫”调制解调器 和 路由器的区别 傻傻分不清

一、 “猫”指调制解调器&#xff0c;所谓调制&#xff0c;就是把数字信号转换成电话线上传输的模拟信号;解调&#xff0c;即把模拟信号转换成数字信号。合称调制解调器。调制解调器的英文是“Modem”&#xff0c;读音与“猫”相似&#xff0c;因此被称作“猫”。简单来说&…
阅读更多...
推荐文章

Copyright @ 2022~2023