CSS 笔记——选择器
1. 选择器
(1)类型选择器(标签选择器)
基本语法
E { sRules }
使用说明
类型选择器。以文档对象(Element)类型作为选择器。 选择面较大,适合做某种标签元素外观的常规设置。
代码示例
<style type="text/css" media="screen">
p {
text-align: center;
color: red;
}
h1 {
text-align: right;
color: green;
}
</style>
<body>
<h1>This heading will be center-aligned</h1>
<p>This paragraph will also be center-aligned.</p>
</body>
(2)通用选择器
基本语法
* { sRules }
使用说明
通用选择器。选定文档目录树(DOM)中的所有类型的单一对象。假如通用选择器不是单一选择器中的唯一组成,“*”可以省略。
代码示例
<style type="text/css" media="screen">
* {
text-align: center;
color: blue;
}
</style>
<body>
<h1>This heading will be center-aligned</h1>
<p>This paragraph will also be center-aligned.</p>
<div>This is a div.</div>
</body>
(3)id 选择器
基本语法
#ID { sRules }
使用说明
ID选择器。以文档目录树(DOM)中作为对象的唯一标识符的 ID 作为选择器。 ID 名称不能以数字开头!
代码示例
<style type="text/css" media="screen">
#red {
color:red;
}
#green {
color:green;
}
</style>
<body>
<p id="red">这个段落是红色。</p>
<p id="green">这个段落是绿色。</p>
</body>
(4)class 选择器
基本语法
E.className { sRules }
使用说明
网页中,无论什么标签的元素,只要class属性和该类选择器的名字一致,则被选中。类名的第一个字符不能使用数字!
类选择器在定义的时候,需要在类名字前放置一个 . 符号,以表征这个不是标签选择器,而是类选择器,在使用的时候,则不需要这个. 符号。其效果等同于E [ class ~= className ]
一个元素属于某种类选择器控制范围,加上class属性就可以了。 类选择可以跨标签,无论什么标签,只要class属性和该类名字一致,就属于这个类选择器控制范围。一个标签可以被多个类选择器修饰,同样的类选择器,如果属性有冲突,将会覆盖前头的属性值,定义(非调用)在后头的优先级高于前头。
代码示例
<style type="text/css" media="screen">
.red {
color: red;
text-align: left;
}
.center {
text-align: center;
}
</style>
<body>
<h1 class="center">
This heading will be center-aligned
</h1>
<p class="center red">
This paragraph will also be center-aligned.
</p>
</body>
(5)属性选择器
基本语法
E [ attr ] { sRules }
E [ attr = value ] { sRules }
E [ attr ~= value ] { sRules }
E [ attr |= value ] { sRules }
使用说明
属性选择器。
选择具有 attr 属性的 E
选择具有 attr 属性且属性值等于 value 的 E
选择具有 attr 属性且属性值为一用空格分隔的字词列表,其中一个等于 value 的 E 。这里的 value 不能包含空格
选择具有 attr 属性且属性值为一用连字符分隔的字词列表,由 value 开始的 E
代码示例
<style type="text/css" media="screen">
p[class=demo] {
color: red;
}
</style>
<body>
<p class="demo">
This paragraph will also be center-aligned.
</p>
</body>
(6)选择器分组
基本语法
E1 , E2 , E3 { sRules }
使用说明
选择器分组。将同样的定义应用于多个选择器,可以将选择器以逗号分隔的方式并为组。
代码示例
<style type="text/css" media="screen">
h1, p, div {
text-align: center;
color: red;
}
</style>
<body>
<h1>This heading will be center-aligned</h1>
<p>This paragraph will also be center-aligned.</p>
<div>This is a div.</div>
</body>
(7)包含选择器 (后代选择器)
基本语法
E1 E2 { sRules }
使用说明
包含选择器。选择所有被 E1 包含的 E2 。即 E1.contains(E2)==true 。 即选取某元素的后代元素。
代码示例
<style type="text/css" media="screen">
div p {
background-color:yellow;
text-align: center;
}
</style>
<body>
<div>
<p>段落 1。 在 div 中。</p>
<span><p>段落 2。 在 div 中的 span 中。</p></span>
</div>
<p>段落 3。不在 div 中。</p>
<p>段落 4。不在 div 中。</p>
</body>
(8)子对象选择器
基本语法
E1 > E2 { sRules }
使用说明
子对象选择器。选择所有作为 E1 子对象的 E2 。与包含选择器相比,子对象选择器只能选择作为某对象子对象的元素。
代码示例
<style type="text/css" media="screen">
div>p {
background-color:yellow;
text-align: center;
}
</style>
<body>
<div>
<h2>标题</h2>
<p>段落 1。 在 div 中。</p>
<span><p>段落 2。 在 div 中的 span 中。</p></span>
</div>
<p>段落 3。不在 div 中。</p>
<p>段落 4。不在 div 中。</p>
</body>
(9)相邻兄弟选择器
基本语法
E1 + E2 { sRules }
使用说明
相邻选择器。选择所有作为 E1 元素相邻的下一个元素E2 。 选择紧接在另一个元素后的元素,而且二者有相同的父元素。
代码示例
<style type="text/css" media="screen">
h1+p, div+p {
text-align: center;
color: red;
background-color:yellow;
}
</style>
<body>
<h1>This is a heading.</h1>
<p>This is paragraph.</p>
<p>This is paragraph.</p>
<h1>Welcome to My Homepage</h1>
<div>
<h1>My name is Donald</h1>
<p>I live in Duckburg.</p>
<p>I will not be styled.</p>
</div>
<p>My best friend is Mickey.</p>
<p>I will not be styled.</p>
</body>
(10)后续兄弟选择器
基本语法
E1 ~ E2 { sRules }
使用说明
后续兄弟选择器。选择所有作为 E1 元素之后的兄弟元素 E2 。
代码示例
<style type="text/css" media="screen">
div~p {
text-align: center;
color: red;
background-color:yellow;
}
</style>
<body>
<p>之前段落,不会选中。</p>
<div>
<p>段落 1。 在 div 中。</p>
<p>段落 2。 在 div 中。</p>
</div>
<p>段落 3。不在 div 中。</p>
<p>段落 4。不在 div 中。</p>
</body>
(11)伪类及伪对象选择器
基本语法
E : Pseudo-Classes { sRules }
E : Pseudo-Elements { sRules }
使用说明
CSS伪类是用来添加一些选择器的特殊效果。
由于状态的变化是非静态的,所以元素达到一个特定状态时,它可能得到一个伪类的样式;当状态改变时,它又会失去这个样式。由此可以看出,它的功能和class有些类似,但它是基于文档之外的抽象,所以叫伪类。
伪类列表
伪类列表 | 伪类列表 | 伪类列表 | 伪对象列表 |
---|---|---|---|
:link | :hover | :active | :first-letter |
:focus | :first-child | :first | :first-line |
:visited | :left | :right | :before |
:lang | :after |
(11.1):link
基本语法
Selector : link { sRules }
使用说明
设置元素在未被访问前的样式。默认值由浏览器决定。
对于无 href 属性(特性)的 a 对象,此伪类不发生作用。
IE3将 :link 伪类的样式表属性作用于 visited 伪类。
代码示例
a:link { color: red }
:link { color: red }
(11.2):hover
基本语法
Selector : hover { sRules }
使用说明
设置对象在其鼠标悬停时的样式。
在CSS1中此伪类仅可用于 a 对象。对于无 href 属性(特性)的 a 对象,此伪类不发生作用。 在CSS2中此伪类可以应用于任何对象。
代码示例
a:link { color: red } /* unvisited links */
a:visited { color: blue } /* visited links */
a:hover { color: yellow } /* user hovers */
a:active { color: lime } /* active links */
(11.3):active
基本语法
Selector : active { sRules }
使用说明
设置对象在被用户激活(在鼠标点击与释放之间发生的事件)时的样式。
在CSS1中此伪类仅可用于 a 对象。对于无 href 属性(特性)的 a 对象,此伪类不发生作用。在CSS2中此伪类可以应用于任何对象。
并且 :active 可以和 :link 以及 :visited 状态同时发生。
代码示例
a:link { color: red } /* unvisited links */
a:visited { color: blue } /* visited links */
a:hover { color: yellow } /* user hovers */
a:active { color: lime } /* active links */
(11.4):visited
基本语法
Selector : visited { sRules }
使用说明
设置 a 对象在其链接地址已被访问过时的样式。 IE3将 :link 伪类的样式表属性作用于 :visited 伪类。
默认值由浏览器决定。定义网页过期时间或用户清空历史记录将影响此伪类的作用。对于无 href 属性(特性)的 a 对象,此伪类不发生作用。
代码示例
a:link { color: red } /* unvisited links */
a:visited { color: blue } /* visited links */
a:hover { color: yellow } /* user hovers */
a:active { color: lime } /* active links */
(11.5):focus
基本语法
Selector : focus { sRules }
使用说明
设置对象在成为输入焦点(该对象的 onfocus 事件发生)时的样式。
代码示例
a:focus { background: yellow }
a:focus:hover { background: white }
(11.6):first-child
基本语法
Selector : first-child { sRules }
使用说明
设置 E 的第一个子对象的样式。
代码示例
* > a:first-child /* A is first child of any element */
a:first-child /* Same */
(11.7):first
基本语法
Selector : first { sRules }
使用说明
设置页面容器第一页使用的样式。仅用于 @page 规则
代码示例
@page :first { margin: 4cm }
(11.8):left
基本语法
Selector : left { sRules }
使用说明
设置页面容器位于装订线左边的所有页面使用的样式。仅用于 @page 规则。
代码示例
@page :left { margin: 4cm }
(11.9):right
基本语法
Selector : right { sRules }
使用说明
设置页面容器位于装订线右边的所有页面使用的样式。仅用于 @page 规则。
代码示例
@page :right { margin: 4cm }
(11.10):lang
基本语法
Selector : lang { sRules }
使用说明
设置对象使用特殊语言的内容的样式。
代码示例
html:lang(fr-ca) { quotes: '? ' ' ?' }
html:lang(de) { quotes: '?' '?' '\2039' '\203A' }
:lang(fr) > Q { quotes: '? ' ' ?' }
:lang(de) > Q { quotes: '?' '?' '\2039' '\203A' }
(11.11):first-letter
基本语法
Selector : first-letter { sRules }
使用说明
设置对象内的第一个字符的样式。
此伪对象仅作用于块对象。内联要素要使用该属性,必须先设定对象的 height 或 width 属性,或者设定 position 属性为 absolute ,或者设定 display 属性为 block 。
在此伪对象中配合使用 font-size 属性和 float 属性可以制作首字下沉效果。
代码示例
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
<HEAD>
<TITLE>Drop cap initial letter</TITLE>
<STYLE type="text/css">
P {
font-size: 12pt;
line-height: 1.2
}
P:first-letter {
font-size: 200%;
font-style: italic;
font-weight: bold;
float: left
}
SPAN {
text-transform: uppercase
}
</STYLE>
</HEAD>
<BODY>
<P><SPAN>The first</SPAN> few words of an article
in The Economist.</P>
</BODY>
</HTML>
(11.12):first-line
基本语法
Selector : first-line { sRules }
使用说明
设置对象内的第一行的样式。
此伪对象仅作用于块对象。内联要素要使用该属性,必须先设定对象的 height 或 width 属性,或者设定 position 属性为 absolute ,或者设定 display 属性为 block 。
如果未强制指定对象的 width 属性, 首行的内容长度可能不是固定的。
代码示例
p:first-line { text-transform: uppercase }
<P>This is a somewhat long HTML
paragraph that will be broken into several
lines. The first line will be identified
by a fictional tag sequence. The other lines
will be treated as ordinary lines in the
paragraph.</P>
(11.13):before
基本语法
Selector : before { sRules }
使用说明
用来和 content 属性一起使用,设置在对象前(依据对象树的逻辑结构)发生的内容。
(11.14):after
基本语法
Selector : after { sRules }
使用说明
用来和 content 属性一起使用,设置在对象后(依据对象树的逻辑结构)发生的内容。
CSS 笔记——选择器的更多相关文章
- CSS笔记--选择器
CSS笔记--选择器 mate的使用 <meta charset="UTF-8"> <title>Document</title> <me ...
- 【CSS复合选择器、元素显示模式、背景】前端小抄(3) - Pink老师自学笔记
[CSS复合选择器.元素显示模式.背景]前端小抄(3) 本学习笔记是个人对 Pink 老师课程的总结归纳,转载请注明出处! 一.CSS的复合选择器 1.1 什么是复合选择器 在 CSS 中,可以根据选 ...
- CSS笔记——属性选择器
1.存在和值(Presence and value)属性选择器这些属性选择器尝试匹配精确的属性值:[attr]:该选择器选择包含 attr 属性的所有元素,不论 attr 的值为何.[attr=val ...
- 前端学习笔记之CSS后代选择器、子元素选择器、相邻兄弟选择器区别与详解
派生选择器用的很多,派生选择器具体包括为后代选择器.子元素选择器.相邻兄弟选择器,我们来理解一下他们之间的具体用法与区别. 1.css后代选择器语法:h1 em {color:red;} 表示的是从h ...
- CSS 笔记之 CSS 选择器
/*先设置背景再设置前景*/ pre{ background-color: #f8f8f8; border: solid 1px #ccc; border-radius: 3px; overflow: ...
- HTML+CSS笔记 CSS笔记集合
HTML+CSS笔记 表格,超链接,图片,表单 涉及内容:表格,超链接,图片,表单 HTML+CSS笔记 CSS入门 涉及内容:简介,优势,语法说明,代码注释,CSS样式位置,不同样式优先级,选择器, ...
- CSS系列(7)CSS类选择器Class详解
这一篇文章,以笔记形式写. 1, CSS 类选择器详解 http://www.w3school.com.cn/css/css_selector_class.asp 知识点: (1) 使用类选择 ...
- CSS的选择器
<div id="demo"> <div class="inner"> <p><a href="#" ...
- JS实战 · 仿css样式选择器
代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/ ...
随机推荐
- codeforces contest 864 problemD
Ivan has an array consisting of n elements. Each of the elements is an integer from 1 to n. Recently ...
- 【BZOJ】2196: [Usaco2011 Mar]Brownie Slicing
[题意]给定n*m的数字矩阵,要求横着切A-1刀,对每块再分别竖着切B-1刀,是最小子矩阵最大. [算法]二分+贪心 [题解]还记得提高组2015跳石头吗?这道题做法一致,只不过拓展到二维而已. 二分 ...
- 20155335俞昆《java程序设计》第三周总结
20155335 2006-2007-2 <Java程序设计>第三周学习总结 ## 教材学习内容总结 首先,关键是区基本类型和类类型,,产生对象必须定义类,类是一个概念,并不存在,对 ...
- Tunnel Warfare(HDU1540+线段树+区间合并)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1540 题目: 题意:总共有n个村庄,有q次操作,每次操作分为摧毁一座村庄,修复一座村庄,和查询与询问的 ...
- react组件之间的几种通信情况
组件之间的几种通信情况 父组件向子组件通信 子组件向父组件通信 跨级组件通信 没有嵌套关系组件之间的通信 1,父组件向子组件传递 React数据流动是单向的,父组件向子组件通信也是最常见的;父组件通过 ...
- js_开发小技巧记录(一)
(一) 生成从minNum到maxNum的随机数 <!DOCTYPE html> <html> <head> <meta charset="UTF- ...
- 利用python对WiderFace数据解析及画框
#注:此代码稍作修改也可以用于WFLW人脸数据集的标注文件解析,#参见其README.md文件了解其每一行的信息,从中解析出相应字#段即可. import os import cv2 def draw ...
- Git——Git常用命令速查表
- eclipse 配置jsp
1.安装jdk和jre 下载地址:http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html ...
- 深度学习方法(五):卷积神经网络CNN经典模型整理Lenet,Alexnet,Googlenet,VGG,Deep Residual Learning
欢迎转载,转载请注明:本文出自Bin的专栏blog.csdn.net/xbinworld. 技术交流QQ群:433250724,欢迎对算法.技术感兴趣的同学加入. 关于卷积神经网络CNN,网络和文献中 ...