当前位置:
首页 > Python基础教程 >
-
前端开发(基本选择器、组合选择器、 交集与并集选择器、序列选择器、属性
11.3 css
11.31 基本选择器
11.311 id选择器
根据指定的id名称,在当前界面中找到对应的唯一一个的标签,然后设置属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #p1 {color: red;} 引用id一定要加# #p2 {color: green;} #p3 {color: blue;} </style> </head> <body> <p id="p1">大多数人的帅,都是浮在表面的,是外表的帅</p> <p id="p2">而我,不仅具备外表帅,内心更是帅了一逼</p> <p id="p3">就是我,我就是</p> </body> </html>
11.312 类选择器
作用:根据指定的类名称,在当前界面中找到对应的标签,然后设置属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .p1 {color: red;} #引用class一定要加点. .p2 {font-size: 50px;} .p3 {text-decoration: underline;} </style> </head> <body> <p class="p1">大多数人的帅,都是浮在表面的,是外表的帅</p> <p class="p2">而我,不仅具备外表帅,内心更是帅了一逼</p> <p class="p3">那就是我</p> <!-- 第一行与第三行的颜色都是红色 第一行与第二行的字体大小都是50px 第二行与第三行内容有个下划线 --> <p class="p1 p2">大多数人的帅,都是浮在表面的,是外表的帅</p> <p class="p2 p3">而我,不仅具备外表帅,内心更是帅了一逼</p> <p class="p3 p1">那就是我</p> </body> </html>
11.313 标签选择器
作用:根据指定的标签名称,在当前界面中找到所有该名称的标签,然后设置属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> p {color: red;} </style> </head> <body> <p>美丽的外表下其实隐藏着一颗骚动的心</p> <ul> <li> <p>这颗心叫做七巧玲珑心,男人吃了会流泪,女人吃了会怀孕</p> </li> </ul> </body> </html>
注意: 1、只要是HTML的标签都能当做标签选择器 2、标签选择器选中的是当前界面中的所有标签,而不能单独选中某一标签 3、标签选择器,无论嵌套多少层都能选中
11.314 通配符选择器
作用:选择所有标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * {color: red;} #把所有的标签设置相同的属性 </style> </head> <body> <h1 >我是标题</h1> <p >我是段落</p> <a href="#">我是超链接</a> </body> </html>
11.32 组合选择器
11.321 后代选择器
作用:找到指定标签的所有后代(儿子,孙子,重孙子、、、)标签,设置属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .part1 p {color: red;} # 1 找到part1下的所有p标签,添加属性 #id1 ul p {color: red;} # 2 找到一个id='id1'下的ul下的所有p标签 </style> </head> <body> <p>我是body下的段落1</p> <div id="id1" class="part1"> <p>我是div下的段落1</p># 1 <ul> <li class="aaa"> <p class="ccc">我是ul>li下的段落1</p># 1 2 </li> </ul> </div> <div> <p>hahahahah</p> </div> <p>我是body下的段落2</p> </body> </html>
注意:1、后代选择器必须用空格隔开 2、后代不仅仅是儿子,也包括孙子、重孙子 3、后代选择器不仅仅可以使用标签名称,还可以使用其他选择器比如id或class 4、后代选择器可以通过空格一直延续下去
11.322 子元素选择器
作用:找到指定标签的所有特定的直接子元素,然后设置属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #id1>p {color: red;} # 1 找到id='id1'下的子标签p,添加属性 .part1 ul .aaa>a {color: red;} </style> #2 找到class='part1'下的所有标签ul下的class=aaa的子标签a,添加属性 </head> <body> <p>我是body下的段落1</p> <div id="id1" class="part1"> <p>我是div下的段落1</p> # 1 <ul> <li class="aaa"> <p class="ccc">我是ul>li下的段落1</p> <a href="">点我啊1</a> # 2 <p> <a href="">点我啊2</a> </p> </li> <li> <a href="#">点我啊3</a> </li> </ul> </div> <div> <p>hahahahah</p> </div> <p>我是body下的段落2</p> <a href="#">百度一下</a> </body> </html>
注意: 1、子元素选择器之间需要用>符号链接,并且不能有空格,比如div >p会找div标签的所有后代标签,标签名为">p" 2、子元素选择器只会查找儿子,不会查找其他嵌套的标签 3、子元素选择器不仅可以用标签名称,还可以使用其他选择器,比如id或class 4、子元素选择器可以通过>符号一直延续下去
11.323相邻兄弟与通用兄弟选择器
相邻兄弟选择器:只能选中紧跟其后的那个标签,不能选中被隔开的标签
通用兄弟选择器:给指定选择器后面的所有选择器中的所有标签设置属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>后代选择器</title> <style type="text/css"> #相邻兄弟选择器 h1+p {color: red;}#相邻兄弟选择器必须通过+号链接 x #通用兄弟选择器 h1~p {color: red;}#通用兄弟选择器必须用~来链接 y </style> </head> <body> <h1>我是标题1</h1> <a href="">有了这个标签,p就不再是紧跟h1标签了,但通用兄弟选择器仍然能选中</a> <p>我是段落</p> #y <p>我是段落</p> #y <h1>我是标题2</h1> <p>我是段落</p> #x y </body> </html>
11.33 交集与并集选择器
11.331 并集选择器
作用:给所有满足条件的标签设置属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> p,a {color: red;} #找到所有p标签和a标签,添加属性 </style> </head> <body> <h1>哈哈啊</h1> <p class="part1">我是段落1</p> <a href="#" class="part2">a标签</a> </body> </html>
栏目列表
最新更新
nodejs爬虫
Python正则表达式完全指南
爬取豆瓣Top250图书数据
shp 地图文件批量添加字段
爬虫小试牛刀(爬取学校通知公告)
【python基础】函数-初识函数
【python基础】函数-返回值
HTTP请求:requests模块基础使用必知必会
Python初学者友好丨详解参数传递类型
如何有效管理爬虫流量?
SQL SERVER中递归
2个场景实例讲解GaussDB(DWS)基表统计信息估
常用的 SQL Server 关键字及其含义
动手分析SQL Server中的事务中使用的锁
openGauss内核分析:SQL by pass & 经典执行
一招教你如何高效批量导入与更新数据
天天写SQL,这些神奇的特性你知道吗?
openGauss内核分析:执行计划生成
[IM002]Navicat ODBC驱动器管理器 未发现数据
初入Sql Server 之 存储过程的简单使用
这是目前我见过最好的跨域解决方案!
减少回流与重绘
减少回流与重绘
如何使用KrpanoToolJS在浏览器切图
performance.now() 与 Date.now() 对比
一款纯 JS 实现的轻量化图片编辑器
关于开发 VS Code 插件遇到的 workbench.scm.
前端设计模式——观察者模式
前端设计模式——中介者模式
创建型-原型模式