文档章节

CSS2选择器

Romanceling
 Romanceling
发布于 2017/07/22 20:43
字数 708
阅读 15
收藏 0

1.元素选择器: html {color:black;}

2.选择器组: h1,h2 {color:black;}

3.通配选择器: 可以匹配所有的元素  例:  * {color:black;}

4.类选择器: *.waring {color:red;}

选择多个类时:不同类名间不能有空格,例

<p class='warning help'>help!<p>

p.warning.help {background:red;}

5.ID选择器: *#first-para {font-weight:bold;}

类选择器和ID选择器可能会区分大小写

 

6.属性选择器:选择有某个属性的元素(不论该属性的值是什么)

h1[class] {color:silver;}  选择有class属性的所有的hi元素,使其文本为银色.

a[href][title] {font-weight:bold;}选择同事有href和title属性的超链接.

7.根据具体属性值选择:

<p class='warning help'>help!<p>

p[class='warning help'] {background:red;},注意和类选择器的例子比较,多类之间可以加空格

8.根据部分属性值选择:

p[class~='warning'] {color:red;}等价于p.warning {color:red;},选择class属性中包含warning的元素.

类型 描述
[foo^='bar'] 选项foo属性值以"bar"开头的所有元素
[foo$='bar'] 选项foo属性值以"bar"结尾的所有元素
[foo*='bar'] 选择foo属性值中包含子串"bar"的所有元素

9.特殊的属性值选择器:

*[lang|="en"]{color:white;}

选择属性等于"en"或者以"en-"开头的元素

 

10.后代选择器:

选择子孙:ul ol ul em{color:gray;}

选择子元素:h1 > strong {color:red;}

11.兄弟选择器:(选择紧跟在后面的同辈元素)

h1 + p {margin-top:0;},选择紧跟在在一个h1元素后出现的所有段落

html > body  table + ul {margin-top:1.5em;},选择紧跟在一个table元素后出现的所有兄弟ul元素,该table元素包含在一个body元素中,body元素本身是html元素的子元素

 

12.伪类选择器:

链接伪类:

伪类名 描述
:link 指示作为超链接(即有一个href属性)并指向一个未访问地址的所有锚
:visited 指示作为已访问地址超链接的所有锚

a:visited {color:red;}

动态伪类:

伪类名 描述
:focus 指示当前拥有焦点的元素
:hover 指示鼠标指针停留在哪个元素上
:active 指示被用户输入激活的元素

a:link {color:navy;}

a:visited {color:gary;}

a:hover {color:red;}

a:active{color:yellow;}

伪类的顺序很重要,通常建议是:link-visited-hover-active

静态伪类:p:first-child {font-weight:bold;}

指选择作为某元素的第一个子元素的所有p元素设置为粗体,而不是选择p的第一个子元素

结合伪类:  a:link:hover{color:red;}  a:visited:hover{color:maroon;}

伪元素:   :first-letter,第一个字母   :first-line,第一行文本

h2:before {content: ']]'; color:red;},在每个h2元素前都加一对银色中括号

body:after{content:'  The End.';},在文档的最后用一个结束语

© 著作权归作者所有

上一篇: CSS的特殊性
下一篇: CSS和文档
Romanceling
粉丝 14
博文 166
码字总数 91809
作品 0
无锡
程序员
私信 提问
加载中

评论(0)

HTML5开发手机App之:CSS全教程-何韬-专题视频课程

HTML5开发手机App之:CSS全教程—20784人已学习 课程介绍 全面解读CSS2,CSS3以及CSS布局模式等各项知识点,深入系统了解CSS能够实现的各种功能并加以灵活运用。 课程收益 使致力于开发Web前...

pkutao
2016/03/31
0
0
Html CSS学习(四)CSS选择器

CSS选择器 Html用于呈现网页的内容与结构,CSS用于设置页面中内容的外观,即表现形式,在对内容进行样式的设置时,首先要选择欲应用样式的内容,这主要通过CSS的选择器进行。本部分内容主要对...

AzureMonkey
2019/01/14
27
0
CSS 选择器[上]

选择器总汇 基本选择器 符合选择器 伪元素选择器 目前CSS选择器的版本已经升级至第三代,即CSS3选择器。CSS3选择器提供了更多、更丰富的选择器方式,主要分为三大类。 一、选择器总汇 三种选...

xiaoxiaobukuang
2017/10/19
0
0
【CSS基础】伪类与伪元素的区别

引入 有同学在使用CSS伪元素时使用 :: (双冒号)产生疑问。 进而对:(单冒号)和::(双冒号)的区别产生疑问。 而我们在使用伪类伪元素的时候常常都是使用单冒号。 那么我们就来看看怎么回事吧...

终南熊吉
2019/11/08
0
0
css伪类选择器

我们在写css的时候会经常使用伪类选择器,伪类选择器就是通过css选择器加上冒号和伪类名构成的。可能有些伪类选择器你已经见过了,比如说a:hover这样的选择器。 在大多情况下,伪类选择器是非...

省委书记沙瑞金
2016/11/08
125
0

没有更多内容

加载失败,请刷新页面

加载更多

PHP一致性hash代码

[TOC] PHP实现一致性hash bash命令 因为下面PHP代码的模拟用户用的是随机数,所以统计结果达不到绝对的均衡. php ./hash.php | sort | uniq -c | sort PHP代码 这是之前学的时候留下来的测试...

我爱吃炒鸡
今天
78
0
OSChina 周六乱弹 —— 现在看动弹的人都是什么状态

Osc乱弹歌单(2020)请戳(这里) 【今日歌曲】 @薛定谔的兄弟 :分享洛神有语创建的歌单「我喜欢的音乐」: 《夏日、教室与望着窗外的我》- Candy_Wind 手机党少年们想听歌,请使劲儿戳(这里...

小小编辑
今天
118
4
wamp环境安装redis扩展

1.查看phpinfo信息根据配置信息下载对应的扩展 关键信息:VC14,TS,x86 2.下载php_redis和php_igbinary扩展 php_redis扩展下载地址: https://windows.php.net/downloads/pecl/snaps/redis...

点滴课程
今天
36
0
开源商城开发笔记1-创建MyBatis示例

一、修改pom.xml,引入MyBatis,JUnit,Log4j <dependencies><dependency><groupId>org.mybatis</groupId><artifactId>mybatis</artifactId><version>3.5.4</version>......

土龙
今天
56
0
The Best Way To Learn English in 2020 (In my humble opinion.)

✅Here is the plan: THINGS YOU WILL NEED: - 1 hour per day (30 minutes will work as well). - a notebook and a pen to write down new vocabulary each day. - an English song. - an ......

FalconChen
昨天
85
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部