CSS札记（一）：CSS选择器
一、语法规则
选择器{
属性1:属性值1;
属性2:属性值2;
......
}
/*注释*/二、如何在html中应用CSS
1. 外部引用css文件
css文件：css/layout.css（css文件夹和HTML位于同一个目录下）
<head>
<link rel="stylesheet" href="css/layout.css">
</head>2. 内部嵌入css
<head>
<style>
/*css代码*/
</style>
</head>3. 元素内部使用
<div style="属性名:属性值;属性名:属性值;"></div>三、选择器
1. 基本选择器
1）元素选择器
a div body ul2）类选择器
.ClassName 例如: .current
3）ID选择器
#IdName 例如: #top_nav
4）普遍选择器
*{
/*css代码*/
}5）并且选择器
选择器1选择器2
p.one#first
<p class="one" id="first"></p>6）并列选择器
p,.one,#first
<p></p>
<div class="one"></div>
<ul id="first"></ul>2. 层次选择器
1）后代选择器
使用空格分割两个选择器， 例如 【parant son】
2）子代选择器
使用大于号分割两个选择器，例如 【parent > son】
3）下一个兄弟选择器
使用+分割两个选择器，例如 【li:first-child + *】
4）之后所有兄弟选择器
使用波浪线~分割两个选择器，例如【li:first-child ~ *】
3. 属性选择器(过滤器)
配合基本选择器进行筛选
<input type="text" name="username">
selector[name] 选择具有name属性的元素、无论该属性的值为什么
selector[name=val] 选择具有name属性的、并且name的值为val元素
selector[name*=val] 选择具有name属性的、并且name的值之一为val的元素
selector[name^=val] 选择具有name属性的、并且name的值以val开头的元素
selector[name$=val] 选择具有name属性的、并且name的值以val结尾的元素
selector[name~=val] 选择具有name属性的、并且name的值包含val的元素
4. 伪类选择器
配合基本选择器进行筛选1) 子元素
:first-child
:last-child
:nth-child(n)、: nth-last-child(n)
:first-of-type
:last-of-type
:nth-of-type(n)、:nth-last-of-type(n)
注：n可以为元素的序号，也可以为特殊的字符，比如“odd”，“even
2) 状态
:hover、:active:、focus
:enabled、 :disabled；:checked、 :default
:invalid、 :valid、 :required、 :optional、 :in-range 、:out-of-range
5. 伪元素选择器
伪元素以"::"开头，用在选择器后，用于选择指定的元素。
::after
常用于清除浮动，让浮动的子元素将父撑起来。
例：
<ul id = "nav">
<li></li>
<li></li>
</ul>
#nav::after{
content = "";
display = block;
clear = both;
}
::before
::first-letter
::first-line
::selection
未完待续... ...
CSS札记（一）：CSS选择器的更多相关文章
- CSS系列：CSS选择器
选择器(selector)是CSS中很重要的概念,所有HTML语言中的标记样式都是通过不同的CSS选择器来控制的.用户只需要通过选择对不同的HTML标签进行选择,并赋予各种样式声明,即可实现各种效果. ...
- CSS：CSS样式表及选择器优先级总结
我们在写网页的时候经常会遇到同一个HTML文件,使用了外部样式.内部样式以及内联样式,那么如果发生冲突时浏览器是怎么抉择的呢? 也会遇到这样的情况,在样式表中,对同一个HTML元素,我们有可能既用到了 ...
- Html 之div+css布局之css选择器
CSS选择器 什么叫选择器?通俗的来说就是 我想改变html 中某个地方的 字体大小 或者背景色 或者其它属性 内边距 外边距,宽度高度 等等 一些Css 样式. 那么我们如何找到对应的 元素呢? ...
- CSS选择器、CSS hack及CSS执行效率
主要内容: 1.CSS选择器.优先级与匹配原理 2. CSS 引入的方式有哪些 ? link 和 @import 的区别是 ? 3.CSS hack 4.如何书高效CSS 一.CSS选择器.优先级与 ...
- CSS样式----图文详解：css样式表和选择器
主要内容 CSS概述 CSS和HTML结合的三种方式:行内样式表.内嵌样式表.外部样式表 CSS四种基本选择器:标签选择器.类选择器.ID选择器.通用选择器 CSS三种扩展选择器:组合选择器.后代选择 ...
- [HTML] CSS Id 和 Class选择器
id 和 class 选择器 如果你要在HTML元素中设置CSS样式,你需要在元素中设置"id" 和 "class"选择器. id 选择器 id 选择器可以为标 ...
- css笔记09：选择器优先级
1. (1) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...
- CSS 选择器之基本选择器 属性选择器 伪类选择器
CSS 选择器 常见的选择器列表图 CSS选择器笔记 基本选择器 通配符选择器(*) 元素选择器(E) 类选择器(.className) 所有浏览器都支持类选择器,但多类选择器(.classNa ...
- HTML+CSS Day05 基本CSS选择器、复合CSS选择器与CSS继承性
1.基本CSS选择器 (1)标记选择器 <style> h1{ color:red; font-size:25px;} &l ...
随机推荐
- Linux rsync 远程同步部署篇
rsync官网: www.samba.org/ftp/rsync.html端口:873上机实战系列项目100台规模集群全网数据备份解决方案3.本项目提供免费实战讲解视频:Linux集群全网服务器数据备 ...
- CentOS7 策略路由配置
环境说明:Cloud1中的GE0/0/1.GE0/0/3.GE0/0/5接口,分别与Centos7中的eth1.eth2.eth3接口桥接到同一虚拟网卡,R1,R2,R3均配置一条静态默认路由指向Ce ...
- hive数据去重
Hive是基于Hadoop的一个数据仓库工具,可以将结构化的数据文件映射为一张数据库表,并提供类SQL查询功能 hive的元数据存储:通常是存储在关系数据库如 mysql(推荐) , derby(内嵌 ...
- java基础笔记（10）
Html:载体 CSS:样式 JavaScript:特效 html: 1. <html></html>称为根标签,所有的网页标签都在<html>< ...
- QButtonGroup
单选按钮和多选按钮,存放进QButtonGroup中 QButtonGroup方法来实现分组:将相同功能的按键,设为一个分组,然后可以进行 单选 或 多选 或 互斥单选 QAbstractButton ...
- AXI总线协议
AXI总线协议 (一).概述 AXI (高性能扩展总线接口,Advanced eXtensible Interface)是ARM AMBA 单片机总线系列中的一个协议,是计划用于高性能.高主频的系统设 ...
- python学习笔记(2)：科学计算及数据可视化入门
一.NumPy 1.NumPy:Numberical Python 2.高性能科学计算和数据分析的基础包 3.ndarray,多维数组(矩阵),具有矢量运算的能力,快速.节省空间 (1)ndarray ...
- C++ md5类，封装好
在网上看到很多md5类,不过封好的很少,我就在网上看到一篇把他写的封装 头文件 #ifndef _MD5_H #define _MD5_H #pragma warning(disable:4786)/ ...
- 基于linux(CentOS7)数据库性能优化（Postgresql）
基于CentOS7数据库性能优化(Postgresql) 1. 磁盘 a) Barriers IO i. 通过查看linux是否加载libata,确定是否开 ...
- 个人第二次作业-c++实现四则运算生成器
c++实现四则运算生成器 GIT地址 Link Git用户名 Redwarx008 学号后五位 61128 博客地址 Link 作业链接 Link 环境配置 使用VS2019社区版,一键式安装,这里不 ...