CSS的引入方式和复合选择器
CSS的引入方式
样式表 | 优点 | 缺点 | 范围 |
---|---|---|---|
行内样式表 | 书写方便 | 结构样式混写 | 控制一个标签 |
内部样式表 | 部分结构和样式相分离 | 没有彻底 | 控制一个页面 |
外部样式表 | 完全实现结构和样式分离 | 需要引入 | 控制多个页面 |
<link rel="stylesheet" href="a.css">
<!-- href="路径" -->
emmet 语法
快速生成HTML标签
- 生成多个标签:div*****10
- 有父子级关系的标签:ul > li
- 兄弟关系:div**+**p
- 带有类名或者标签名的:div**.**pink(class名)div#gray(id名)
- 生成的div的类名是有顺序的:p.demo**$***5
- 生成的标签默认显示几个文字:div{这里写文字}
注意:$是自增的符号
快速生成CSS样式
- width:100px; w100
- 可以用首字母快速生成样式
复合选择器
- 后代选择器
可以选择父元素里的子元素
ul li{
width: 300px;
}
注意:
- 元素一和元素二必须用空格隔开
- 只要有一层以上的关系就可以用,就像:
<ul>
<li>
<a href="#">aaa</a>
</li>
</ul>
也可以通过后代选择器对“a”标签进行选择(ul li a)
- 子选择器
只选择父元素最近一级的子元素
元素1>元素2{样式声明}
注意:
元素1和元素2用大于号隔开
元素1是父级,元素2是子级,最终选择元素2
并集选择器
可以将多个标签用同一样式
元素1,元素2{样式声明}
注意:
- 用逗号来实现
- 任何选择器都可以作为并集选择器的一部分
- 最后一个元素不需要加逗号
div,
p,
.pig li{样式声明}
- 伪类选择器
链接伪类选择器
给某些选择器添加特殊效果,用“ : ”来实现
属性 | 定义 |
---|---|
a:link |
选择所有未被访问的链接 |
a:visited |
选择所有已经被访问过的链接 |
a:hover |
选择鼠标指针位于其上的链接 |
a:active |
选择活动链接(鼠标按下未弹起) |
这个好好玩!
注意:按照 lvha的顺序!!!
focus伪类选择器
用于选取获得焦点的表单元素input:focus{样式声明}
选择器 | 作用 | 用法 |
---|---|---|
后代选择器 | 用来选择后代元素 | 符号是空格 .nav a |
子代选择器 | 选择最近一级元素 | 符号是大于号 .nav>p |
并集选择器 | 选择某些相同样式的元素 | 符号是逗号 .nav,.header |
链接伪类选择器 | 选择不同状态的链接 | a:hover{} |
:focus 选择器 | 选择获得光标的表单 | input:focus |
CSS的引入方式和复合选择器的更多相关文章
- python 全栈开发,Day46(列表标签,表格标签,表单标签,css的引入方式,css选择器)
一.列表标签 列表标签分为三种. 1.无序列表<ul>,无序列表中的每一项是<li> 英文单词解释如下: ul:unordered list,“无序列表”的意思. li:lis ...
- 11 CSS的三种引入方式和基本选择器
<!-- 整体说明: 1.CSS的三种引入方式 (1)行内样式 (2)内接样式 (3)外接样式 2.CSS的基本选择器 (1)id选择器 (引用方式:#id) (2)标签选择器(引用方式:标签名 ...
- 前端1-----CSS层叠样式表了解,css的引入方式,三大选择器(标签,类,id),高级选择器
前端1-----CSS层叠样式表了解,css的引入方式,三大选择器(标签,类,id),高级选择器 一丶CSS简介 叠样式表(英文全称:Cascading Style Sheets)是一种用来表现 ...
- Day46(列表标签,表格标签,表单标签,css的引入方式,css选择器)
一.列表标签 列表标签分为三种. 1.无序列表<ul>,无序列表中的每一项是<li> 英文单词解释如下: ul:unordered list,“无序列表”的意思. li:lis ...
- 前端(二)—— CSS的引入方式、长度与颜色单位、常用样式、选择器
CSS的引入方式.长度与颜色单位.常用样式.选择器 一.CSS的三种引入方式 1.行间式 <!doctype html> <html> <head> <met ...
- CSS的引入方式和样式
CSS的引入方式和样式 一.样式 行内样式 内接样式 外接样式(1.链接式 2.导入式) <!--行内样式--> <div> <p style="color: ...
- CSS的引入方式
再用HTML编写的文本中,有是没能达到我们想要的效果,此时此刻我们可以用过引用CSS来控制!这不仅使得效果好而且代码层次清晰.CSS的引入方式可以分为四类: 1.链入外部样式表,就是把样式表保存为一个 ...
- js介绍,js三种引入方式,js选择器,js四种调试方式,js操作页面文档DOM(修改文本,修改css样式,修改属性)
js介绍 js运行编写在浏览器上的脚本语言(外挂,具有逻辑性) 脚本语言:运行在浏览器上的独立的代码块(具有逻辑性) 操作BOM 浏览器对象盒子 操作DOM 文本对象 js三种引入方式 (1)行间式: ...
- web@css引入方式,基本选择器,3大特性,高效运行
4.高效的css 所谓高效就是让浏览器查找更少的元素标签来确定匹配的style元素. 1.不要再ID选择器前使用标签名 解释:ID选择是唯一的,加上标签名相当于画蛇添足了,没必 ...
随机推荐
- manjaro配置攻略
2021.1.30 更新 1 概述 本文主要讲述了新安装的Manjaro一些常用的配置,包括源.常用软件.快捷键.终端以及一些效率工具的配置. 2 pacman源 首先是pacman源的选择: sud ...
- (十四)docker exec 详解
1. 作用 在运行的容器中执行命令 2. 语法 docker exec [OPTIONS] CONTAINER COMMAND [ARG...] OPTIONS说明: -d :分离模式: 在后台运行 ...
- OO博客总结——OO落下帷幕
OO博客总结--OO落下帷幕 凡此过往,皆为序章. 不知不觉OO课程即将落下帷幕,一路坎坎坷坷磕磕绊绊,可算是要结束了,心里终于松了一口气,也有小小的不甘和遗憾.凡此过往,皆为序章.特殊的线上OO课程 ...
- hdu 2841 Visible Trees(容斥)
原文链接 There are many trees forming a m * n grid, the grid starts from (1,1). Farmer Sherlock is stand ...
- php异常及错误信息捕获并记录日志实现方法全解析
php异常处理 什么是异常? PHP 5 提供了一种新的面向对象的错误处理方法.异常处理用于在指定的错误(异常)情况发生时改变脚本的正常流程.这种情况称为异常. 当异常被触发时,通常会发生: 当前代码 ...
- jumpserver2
测试环境 CPU: 64位双核处理器 内存: 4G DDR3 数据库:mysql 版本大于等于 5.6 mariadb 版本大于等于 5.5.6 环境 系统: CentOS 7 IP: 192.168 ...
- 我为Dexposed续一秒——论ART上运行时 Method AOP实现
转载于:http://weishu.me/2017/11/23/dexposed-on-art/ 两年前阿里开源了 Dexposed 项目,它能够在Dalvik上无侵入地实现运行时方法拦截,正如其介绍 ...
- 简单写个logictic回归
最近做华为软件精英挑战赛热身赛,给出的demo是使用logistic做的金融风控,比赛要求很严格,如果使用Python 进行训练那么不能使用任何第三方机器学习库,只能使用Python和原生numpy1 ...
- Python数模笔记-Sklearn(1) 介绍
1.SKlearn 是什么 Sklearn(全称 SciKit-Learn),是基于 Python 语言的机器学习工具包. Sklearn 主要用Python编写,建立在 Numpy.Scipy.Pa ...
- GDOI2021 游记
蹭了个名额去参加 \(\text{GDOI}\) \(\text{tg}\),体验了一下大佬的生活/kk (以下试题皆为 \(\text A\) 卷 DAY -1 不知道要复习什么.本来没有机会来参加 ...