文档章节

css样式-选择符-伪类-伪元素

风云海滩
 风云海滩
发布于 2015/08/27 00:18
字数 545
阅读 54
收藏 1

添加css三种方式

1、行内样式

2、嵌入样式<style>

3、链接样式<link>

4、import 指令:@import url(css/style.css)


选择符整体上分为三类:

上下文选择符

基于祖先或同胞元素选择一个元素

1、上下文选择符

标签1 标签2


2、子选择符>

标签1 > 标签2

标签2必须是标签1的子元素


3、紧邻同胞选择符+

标签1 + 标签2

标签2必须紧跟在其同胞标签1的后面


4、一般同胞选择符~

标签1 ~ 标签2

标签2必须跟(不一定紧跟)在其同胞标签1后面


5、通用选择符*

* {},p *{}


ID和类选择符

基于id和class属性的值选择元素

1、#id

2、.class

ID和类选择符可以快速定位标签,可以跟上线文选择符联合使用


属性选择符

基于属性的有无和特征选择元素

1、属性名选择符

标签名[属性名]

img[title] {}


2、属性值选择符

标签名[属性名="属性值"]

img[title="red flower"] {}



伪类

UI(User Interface,用户界面)伪类

:一个冒号表示伪类,::两个冒号表示CSS3新增的伪元素

1、链接伪类

a:link{}

a:visited{}

a:hover{}

a:active{}


2、:focus伪类

e:focus

e表示任何元素,获取焦点。

<body>

    <p>选择符测试,<em>包体测试上次登陆水电费金额</em>上下文选择符</p>

    :focus伪类:<input type="text" name="" />

</body>

input:focus {

     border: 3px solid red;

}


3、:target伪类

e:target

e表示任何元素,如果用户点击一个指向页面中的其他元素的链接,则那个元素就是目标(target),可以用target伪类选中它。

<a href="#target1">目标</a>


结构化伪类

1、:first-child和:last-child

分别代表一组同胞元素的第一个元素和最后一个

2、:nht-child

e:nth-child(n),如:e:nth-child(3)

代表一组同胞元素的第N个


伪元素

1、::first-letter伪元素

第一个字符

2、::first-line伪元素

第一行

3、::before和::after伪元素

特定元素的前面或后面加特殊内容


© 著作权归作者所有

风云海滩
粉丝 0
博文 91
码字总数 52952
作品 0
广州
程序员
私信 提问
CSS入门指南-1:工作原理

这是CSS设计指南的读书笔记,用于加深学习效果。 最近想做一个小程序,前端是必修课,那就从css开始吧。 css 工作原理 每个html元素都有一组样式属性,可以通过css来设定。当html元素的同一个...

goodspeed
2017/07/19
0
0
【CSS选择符】伪类和伪元素

0016.jpg 首先是最为常用的链接的样式 根据访客与链接的交互方式,链接有四种状态,这四种状态的外观可以使用四个伪类装饰。这些伪类分别对应下述的四个状态: HTML代码 a:link(未访问状态)...

KelvinZ
2017/12/30
0
0
好程序员web前端CSS选择符(选择器):表示要定义样式的对象

好程序员web前端CSS选择符(选择器):表示要定义样式的对象 1) 元素选择符/类型选择符(element选择器 ) 如:div{width:100px; height:100px; background:red;} 语法:元素名称{属性:属性值...

好程序员IT
04/30
0
0
CSS伪类与伪元素完全指南

本文转载自:众成翻译 译者:为之漫笔 链接:http://www.zcfy.cc/article/239 原文:https://www.smashingmagazine.com/2016/05/an-ultimate-guide-to-css-pseudo-classes-and-pseudo-eleme......

极乐君
2017/01/18
0
0
【CSS】样式的优先级

rabbit.jpg 优先级的出现是为了解决CSS样式冲突的问题。 以下两种情况会导致样式冲突: 继承,从多个祖辈那里继承相同的属性。 同一个元素有多个样式(例如为某个段落定义了类样式,又定义了...

KelvinZ
2018/01/16
0
0

没有更多内容

加载失败,请刷新页面

加载更多

PostgreSQL build

https://buildfarm.postgresql.org/cgi-bin/show_log.pl?nm=lumpsucker&dt=2019-06-23%2020%3A57%3A27...

MtrS
今天
3
0
八、Docker Swarm

Docker Swarm有两件事:一个企业级的Docker主机安全集群,另一个是用于协调微服务应用程序的引擎。 在集群方面,它将一个或多个Docker节点组合在一起,并允许你将他们作为一个集群来管理。开...

倪伟伟
昨天
7
0
Fragment懒加载其实很简单

前言 记得去年面试的时候, 面了一家小公司, 那个面试官问我, fragment的懒加载做过吗?我说没做过(确实没做过).后来面试快结束了, 又问我, 懒加载没做过是吗?后来可想而知也没收到offer, (ಥ_...

天王盖地虎626
昨天
5
0
聊聊dubbo的TimeoutFilter

序 本文主要研究一下dubbo的TimeoutFilter ListenableFilter dubbo-2.7.2/dubbo-rpc/dubbo-rpc-api/src/main/java/org/apache/dubbo/rpc/ListenableFilter.java public abstract class Liste......

go4it
昨天
9
0
方法与数组

方法 方法就是完成特定功能的代码块;在很多语言里面都有函数的定义,函数在Java中被称为方法 格式: 修饰符 返回值类型 方法名(参数类型 参数名1,参数类型 参数名2…) throw 异常{ 函数体;...

凹凸凸
昨天
10
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部