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>
注意： 1、选择器与选择器之间必须用逗号来链接 2、选择器可以使用标签名称、id、class
11.332 交集选择器
作用：给所有选择器选中的标签中，相交的那部分标签设置属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
a.part2 {color: red;} #找到同时有a标签且class="part2"，添加属性
</style>
</head>
<body>
<h1>哈哈啊</h1>
<p class="part2">我是段落2</p>
<a href="#" class="part2">a标签1</a> #此处文本变成红色
<a href="#">a标签2</a>
</body>
</html>
注意： 1、选择器与选择器之间没有任何链接符号 2、选择器可以使用标签名称、id、class
11.34 序列选择器
#2.1 同级别
:first-child p:first-child 同级别的第一个
:last-child p:last-child 同级别的最后一个
:nth-child(n) 同级别的第n个
:nth-last-child(n) 同级别的倒数第n个
#2.2 同级别同类型
:first-of-type 同级别同类型的第一个
:last-of-type 同级别同类型的最后一个
:nth-of-type(n) 同级别同类型的第n个
:nth-last-of-type(n) 同级别同类型的倒数第n个
#2.3 其他
:only-of-type 同类型的唯一一个
:only-child 同一级别唯一一个
11.341同级别序列选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p:first-child {color: red;} #同一级别第一个p x
p:last-child {color: red;} #同一级别倒数第一个p y
p:nth-child(3) {color: red;} #同一级别第3个p z
p:nth-last-child(3) {color: red;}#同一级别倒数第3个p w
</style>
</head>
<body>
<h1>我是标题1</h1>
<p>我是段落1</p>
<a href="">aaaaa</a>
<p>我是段落2</p>
<p>我是段落3</p> #w
<p>我是段落4</p>
<p>我是段落5</p> #y
<div>
<p>我是段落6</p> #x w
<a href="">我是a标签</a>
<h1>我是标题2</h1>
</div>
</body>
</html>
11.342同级别同类型序列选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p:first-of-type {color: red;} # 同级别同类型的第一个p x
p:last-of-type {olor: red;} # 同级别同类型的倒数第一个p y
p:nth-of-type(3) {color: red;} # 同级别同类型的第3个p z
p:nth-last-of-type(3) {color: red;} # 同级别同类型的倒数第3个p u
p:only-child {color: red;} # 同一级别唯一一个p 不存在
p:only-of-type {color: red;} # 同类型的唯一一个 不存在
</style>
</head>
<body>
<h1>我是标题1</h1>
<p>我是段落1</p> #x
<a href="">aaaaa</a>
<p>我是段落2</p>
<p>我是段落3</p> #z u
<p>我是段落4</p>
<p>我是段落5</p> #y
<div>
<a href="">我是a标签</a>
<p>我是段落6</p>#x u
<p>我是段落7</p>
<p>我是段落8</p>#y z
<h1>我是标题2</h1>
</div>
<div>
<p>我是独生子</p>#x
<p>我是独生子</p>#y
<a href="">我是二胎</a>
<a href="">我是二胎</a>
</div>
</body>
</html>
11.35 属性选择器
作用：根据指定的属性名称找到对应的标签，然后设置属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
[id] {color: red;} #找到所有包含id属性的标签 x
h1[id] {color: red;} #找到所有包含id属性的h1标签 y
[value] {width: 200px;height: 200px;} #找到所有包含value属性的标签 z
[class="part1"] {color: red;} #找到所有class属性值为part1的标签 u
[class^="part"] {color: red;} #找到所有class属性值以part开头的标签 v
[class*="part"] {color: red;} #找到所有class属性值包含part的标签 w
[class$="yyy"] {color: red;} #找到所有class属性值以yyy结尾的标签 o
[value*="male"] {width: 200px;height: 200px;}#找到所有value属性值包含male的标签 p
[type="radio"] {width: 200px;height: 200px;}#找到所有type属性值为radio的标签 q
</style>
</head>
<body>
<h1 id="id1">哈哈啊</h1>#x y
<p id="id2" class="part3">我是段落22222</p>#x v w
<p class="part1">我是段落1111</p>#u v w
<p class="xxx part2 yyy">我是段落</p>#w o
<input type="radio" name="gender" value="male">#z p q
<input type="radio" name="gender" value="female">#z p q
</body>
</html>
11.36 伪类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
a:link {color: blue;} #没有访问的超链接a标签样式
a:hover {color: chocolate;} #鼠标悬浮在元素上应用样式：
a:active {color: mediumvioletred;} #鼠标点击瞬间的样式：
a:visited {color: green;} #访问过的超链接a标签样式：
div {width:200px; height:200px; background-color:green;}
div:hover {background-color: red;} #hover ，div等标签也可以使用 input:focus {outline:none;background-color:dark;}#input输入框获取焦点时样式：
</style>
</head>
<body>
<a href="https://www.tmall.com">这是一个好的网站</a>
<div></div>
用户名:
<input type="text" name="username">
</body>
</html>
注意： 1、a标签的伪类选择器可以单独出现，也可以一起出现 2、a标签的伪类选择器如果一起出现，有严格的顺序要求，否则失效 3、hover是所有其他标签都可以使用的 4、focus只给input标签使用
11.37 伪元素选择器
伪元素选择器(CSS3中新增的伪元素选择器):伪元素选择器的作用就是给指定标签的内容前面添加一个子元素或者给指定标签的内容后面添加一个子元素
格式：
标签名称:before{属性名称：值；}
标签名称:after{属性名称：值；}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p:before {content: "alex is BigSB";color: green;} #用于在元素的内容前面插入新内容
p:first-letter {font-size: 200px;} #杂志类文章首字母样式调整
a:after {content:"?";color:red;}#用于在元素的内容后面插入新内容,在所有a标签的内容后面加上一个?
</style>
</head>
<body>
<p>英雄不问出处，流氓不论岁数</p> #alex is BigSB英雄不问出处，流氓不论岁数
<a href="#" class="help">你是干什么的</a>
<a href="#" class="help">你是干什么的</a>
<a href="#" class="help">你是干什么的</a>
</body>
</html>
python 之 前端开发（基本选择器、组合选择器、 交集与并集选择器、序列选择器、属性选择器、伪类选择器、伪元素选择器）的更多相关文章
- 【CSS】伪类和伪元素选择器
伪类 基于当前元素所处的状态或具有的特性,用于设置元素自身的特殊效果. a:link 规定所有未被点击的链接: a:visited 匹配多有已被点击过的链接: a:active 匹配所有鼠标按下 ...
- 以css伪类为基础,引发的选择器讨论 [新手向]
作为第一篇技术干货,来写哪个方面的内容,我着实考虑了很久. 经过了整整30秒的深思熟虑,我决定就我第一次发现新大陆一样的内容,来进行一次讨论. 伪类:伪类对元素进行分类是基于特征(characteri ...
- 前端开发 CSS中你所不知道的伪类与伪元素的区别--摘抄
做过前端开发的人都熟悉伪类与伪元素,而真正能够彻底了解这二者的区别的人并不多.伪类与伪元素确实很容易混淆. 伪元素主要是用来创建一些不存在原有dom结构树种的元素,例如:用::before和::aft ...
- CSS样式表及选择器相关内容(二)-伪类与伪元素选择器
伪类与伪元素选择器归纳: 一.伪类选择器(伪类以":"开头,用在选择器后,用于指明元素在某种特殊的状态下才能被选中) 1.a标签伪类选择器,其他标签类似 eg: ...
- css伪选择器使用总结——css中关于伪类和伪元素的知识总汇
CSS 伪类用于向某些选择器添加特殊的效果,而CSS引入伪类和伪元素的概念是为了实现基于文档树之外的信息的格式化.这里讲总结关于css伪类和伪元素的相关使用 伪元素 :before/:before 在 ...
- 【从0到1学Web前端】CSS伪类和伪元素
1.CSS中的伪类 CSS 伪类用于向某些选择器加入特殊的效果. 语法: selector : pseudo-class {property: value} CSS 类也可与伪类搭配使用 select ...
- 【从0到1学Web前端】CSS伪类和伪元素 分类： HTML+CSS 2015-06-02 22:29 1065人阅读 评论(0) 收藏
1.CSS中的伪类 CSS 伪类用于向某些选择器添加特殊的效果. 语法: selector : pseudo-class {property: value} CSS 类也可与伪类搭配使用 select ...
- python 之 前端开发（ jQuery选择器、筛选器、样式操作、文本操作、属性操作、文档操作）
11.5 jQuery 引入方式: 方式一:本地引入 <script src="jquery-3.3.1.min.js"></script> <scr ...
- 前端知识之CSS(1)-css语法、css选择器（属性、伪类、伪元素、分组与嵌套）、css组合器
目录 前端基础之css 1.关于css的介绍 2.css语法 3.三种编写CSS的方式 3.1.style内部直接编写css代码 3.2.link标签引入外部css文件 3.3.标签内直接书写 4.c ...
随机推荐
- MYSQL手工注入（详细步骤）—— 待补充
0x00 SQL注入的分类: (1)基于从服务器接收到的响应 ▲基于错误的 SQL 注入 ▲联合查询的类型 ▲堆查询注射 ▲SQL 盲注 ...
- 简单说一下SS的原理
假设有主机A和B还有C.主机A是客户机,就是你的电脑,主机B是服务器,也就是位于日本的那台电脑.主机C是你需要访问的网站.在没有SS的情况下,数据传输的流程是:A-->C.在有SS的情况下,概括 ...
- 把 python 程序打包成 egg 或者 whl 安装包
原文出处:http://www.worldhello.net/2010/12/08/2178.html 本文略有改动 1.1 安装setuptools 首先要安装setuptools工具.Debian ...
- Java连载6-变量的要求
一.数据类型的作用 (1)不同的数据有不同的类型,不同的数据类型底层会分配不同的大小的空间 (2)数据类型是指程序在运行阶段应该分配多大的内存空间 二.变量要求 变量中存储的具体的“数据”必须和变量的 ...
- 【题解】Unit Fraction Partition-C++
Description给出数字P,Q,A,N,代表将分数P/Q分解成至多N个分数之和,这些分数的分子全为1,且分母的乘积不超过A.例如当输入数据为2 3 120 3时,我们可以得到以下几种分法: In ...
- [算法]Python判断一个点是否在多边形内部
题目: 代码: # -*- coding:utf-8 -*- def rayCasting(p, poly): px = p['x'] py = p['y'] flag = False i = 0 l ...
- vue组件之间的传值——中央事件总线与跨组件之间的通信（$attrs、$listeners）
vue组件之间的通信有很多种方式,最常用到的就是父子组件之间的传值,但是当项目工程比较大的时候,就会出现兄弟组件之间的传值,跨级组件之间的传值.不可否认,这些都可以类似父子组件一级一级的转换传递,但是 ...
- python 2.7 - 3.5 升级之路 (一) : 准备阶段开发环境 -- pip3, vitualEnv, pycharm
背景 由于之前项目采用的版本是Python2.7, 考虑到Python 2.7 到明年(2020年后将会停止更新),以及为了更好的适应中文和拥抱新的特性.我们决定将其从python 2 升级到最新的 ...
- [leetcode] 679. 24 Game (Hard)
24点游戏,游戏规则就是利用().+.-. *. /,对四个数字任意运算,可以得出24点则为true. 排列组合问题,最多有A42*A32*A22*4*4*4,也就是12*6*2*4*4=9216种组 ...
- 《C# 语言学习笔记》——委托
委托是一种可以把引用存储为函数的类型. 委托的声明非常类似于函数,但不带函数体,且要使用delegate关键字.委托的声明制定了一个返回类型和一个参数列表. 在定义了委托后,就可以声明该委托类型的变量 ...