css样式表,选择器,伪类选择器
CSS定义
CSS:Cascading Style Sheet(层叠样式表)
选择器 {
属性名: 属性值;
}
CSS样式表
(1)三种样式表使用
·1> 内联样式
<div style = 'width:100px ;height:100px'></div>
`2> 内部样式
<style type='text/css'>
div{
width:100px;
height:100px;
}
</style>
`3>外部样式
<link rel='stylesheet' type='text/css' herf=''>
选择器
(1)6大基础选择器
`1> id选择器:唯一对应
`2> 类class选择器:统一对应
`3> 标签选择器:初始化标签使用
`4> * 通配符标签
`5> 属性选择器:表单中input常用
`6> 最高优先权 !important
****** 权重值: !important > id > class > 属性 > 标签 > *
(2)复合选择器
1> 派生选择器(父子选择器),从右到左匹配。包含两种:包含选择器和子选择器
2> 相邻兄弟选择器:1.同父级;2.相邻;3.在其之后
3> 兄弟选择器 ~ (匹配选择器)
4> 并列选择器
5> 分组选择器
伪类和伪元素
CSS2中伪类和伪元素都是要单冒号(:)
CSS3中伪类使用单冒号(:),伪元素使用双冒号(::)
css样式表,选择器,伪类选择器的更多相关文章
- python 全栈开发,Day47(行级块级标签,高级选择器,属性选择器,伪类选择器,伪元素选择器,css的继承性和层叠性,层叠性权重相同处理,盒模型,padding,border,margin)
一.HTML中的行级标签和块级标签 块级标签 常见的块级标签:div,p,h1-h6,ul,li,dl,dt,dd 1.独占一行,不和其他元素待在同一行2.能设置宽高3.如果不设置宽高,默认为body ...
- js进阶 10-11/12 表单伪类选择器的作用
js进阶 10-11 表单伪类选择器的作用 一.总结 一句话总结:能想到用伪类选择器来解决问题.如果能一次记住自然是最棒的. 1.表单伪类选择器分为哪两类? 表单元素和表单属性,表单元素例如inpu ...
- CSS3 选择器——伪类选择器
前面花了两节内容分别在<CSS3选择器——基本选择器>和<CSS3选择器——属性选择器>介绍了CSS3选择器中的基本选择器和属性选择器使用方法,今天要和大家一起学习CSS3选择 ...
- CSS 选择器之基本选择器 属性选择器 伪类选择器
CSS 选择器 常见的选择器列表图 CSS选择器笔记 基本选择器 通配符选择器(*) 元素选择器(E) 类选择器(.className) 所有浏览器都支持类选择器,但多类选择器(.classNa ...
- 前端 CSS的选择器 伪类选择器
伪类选择器 常用的几种伪类选择器. 伪类选择器一般会用在超链接a标签中 没有访问的超链接a标签样式: a:link { color: blue; } <!DOCTYPE html> < ...
- CSS样式表-------第二章:选择器
二 .选择器 内嵌.外部样式表的一般语法: 选择器 { 样式=值: 样式=值: 样式=值: ...... } 以下面html为例,了解区分一下各种样式的选择器 <head> <met ...
- 前端 CSS的选择器 伪类选择器 CSS3 nth-child()
first-child 选中第一个标签 应用CSS样式 <!DOCTYPE html> <html lang="en"> <head> < ...
- HTML(五)选择器--伪类选择器
HTML代码 <body> <a href="www.baidu.com">www.baidu.com</a> </body> CS ...
- CSS样式----图文详解:css样式表和选择器
主要内容 CSS概述 CSS和HTML结合的三种方式:行内样式表.内嵌样式表.外部样式表 CSS四种基本选择器:标签选择器.类选择器.ID选择器.通用选择器 CSS三种扩展选择器:组合选择器.后代选择 ...
- CSS动态伪类选择器温故-3
动态伪类选择器 伪类选择器:大家熟悉的:[:link][:visited][:hover][:active]CSS3的伪类选择器分为六种:(1)动态伪类选择器(2)目标伪类选择器(3)语言伪类选择器( ...
随机推荐
- linux安装Texinfo
安装步骤 tar zxvf texinfo-5.2.tar.gz cd texinfo-5.2 ./configure --prefix=/usr make make check make insta ...
- Java 读写锁 ReadWriteLock 原理与应用场景详解
Java并发编程提供了读写锁,主要用于读多写少的场景,今天我就重点来讲解读写锁的底层实现原理@mikechen 什么是读写锁? 读写锁并不是JAVA所特有的读写锁(Readers-Writer Loc ...
- 为什么ArrayList的subList结果不能转换为ArrayList????
subList是List接口中的一个方法,该方法主要返回一个集合中的一段子集,可以理解为截取一个集合中的部分元素,它的返回值也是一个List. 让我们初始化一个例子: import java.util ...
- 谣言检测(PSIN)——《Divide-and-Conquer: Post-User Interaction Network for Fake News Detection on Social Media》
论文信息 论文标题:Divide-and-Conquer: Post-User Interaction Network for Fake News Detection on Social Media论 ...
- 【算法训练营day7】LeetCode454. 四数相加II LeetCode383. 赎金信 LeetCode15. 三数之和 LeetCode18. 四数之和
[算法训练营day7]LeetCode454. 四数相加II LeetCode383. 赎金信 LeetCode15. 三数之和 LeetCode18. 四数之和 LeetCode454. 四数相加I ...
- PHP配置负载均衡
我项目是用宝塔面板.所以这次用宝塔面板演示. 环境: LNMP 代码:2套.2套代码除了配置其他都是一样 域名:1个.2级域名.其实一级二级都没关系 /************************ ...
- 2.签名&初始化&提交
Git设置签名 签名的作用是区分不同操作者的身份,用户的签名信息在每一个版本的提交信息中能够看到, 以此确认本次提交是谁做的,git首次安装必须设置用户签名,否则无法提交代码 这里设置的用户签名和 ...
- docker-compose编排启动LNMP
2-1.docker-compose启动php #生成php镜像 [root@rocky8 data]#vim /data/dockerfile/ubuntu_php/Dockerfile FRO ...
- MongoDB数据库新手入门
windows安装mongodb 5.0.2 官网下载msi文件 自定义安装到 d:/apptoools/mongodb/ 不要勾选mongodb compass 报错:verify that you ...
- Java8新特性:函数式编程
1. 概述 函数式编程学习目的: 能够看懂公司里的代码 大数据量下处理集合效率更高 代码可读性高 消灭嵌套地狱 函数式编程思想: 面向对象思想需要关注用什么对象完成什么事情.而函数式编程思想就类似于我 ...