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 ...
随机推荐
- https=http+ssl
TLS/SSL中使用了非对称加密,对称加密以及HASH算法.握手过程的具体描述如下: 浏览器将自己支持的一套加密规则发送给网站. 网站从中选出一组加密算法与HASH算法,并将自己的身份信息以证书的形式 ...
- 使用Postwoman
postman的脱单产品postwoman 一.安装 1.使用git进行安装: git clone https://github.com/liyasthomas/postwoman cd postwo ...
- P1168 中位数 堆
题目描述 给出一个长度为NN的非负整数序列A_iAi,对于所有1 ≤ k ≤ (N + 1) / 21≤k≤(N+1)/2,输出A_1, A_3, …, A_{2k - 1}A1,A3,…,A2 ...
- Python 矩阵（线性代数）
Python 矩阵(线性代数) 这里有一份新手友好的线性代数笔记,是和深度学习花书配套,还被Ian Goodfellow老师翻了牌. 笔记来自巴黎高等师范学院的博士生Hadrien Jean,是针对& ...
- 关系型数据库为什么喜欢使用B+树作为索引结构？ (转)
问题1. 数据库为什么要设计索引? 图书馆存了1000W本图书,要从中找到<架构师之路>,一本本查,要查到什么时候去? 于是,图书管理员设计了一套规则: (1)一楼放历史类,二楼放文学类, ...
- object in javascript
枚举对象属性 for....in 列举obj的可枚举属性,包括自身和原型链上的 object.keys() 只列举对象本身的可枚举属性 创建对象的几种方式 对象字面量 const pre='test' ...
- 说说无线路由器后门的那些事儿（1）-D-Link篇
[原创]说说无线路由器后门的那些事儿(1)-D-Link篇 作 者: gamehacker 时 间: 2013-11-29,11:29:19 链 接: http://bbs.pediy.com/sho ...
- 【问题解决方案】Xshell连接服务器并实现上传和下载文件
参考链接: Xshell连接服务器并实现上传和下载文件 第一步:xshell登录完成 略 第二步: 在服务器安装lrzsz 如果服务器的操作系统是 CentOS,则输入命令[yum install l ...
- 【原】cmdline传递参数 uboot-->kernel-->fs
在uboot中设置bootargs环境变量,在kernel启动后cat /proc/cmdline可以看到bootargs的值. U-boot的环境变量值得注意的有两个: bootcmd 和boota ...
- jmeter性能压测瓶颈排查-网络带宽
问题: 有一台机器做性能压测的时候,无论开多少个线程,QPS一直压不上去,而服务器和数据库的性能指标(主要是CPU和内存)一直维持在很低的水平. 希望帮忙排查一下原因. 过去看了下进行压测的接口代码, ...