CSS选择符小讲(2)
作者:飘零雾雨 来源:css探索之旅 发布时间:2009-09-17 11:53:00
相邻选择符(Adjacent Selectors)
语法:E1 + E2
说明:选择紧跟在对象E1之后的所有E2对象(E1与E2需结构级别相同)。非IE内核浏览器和IE7及以上浏览器支持,属于CSS2选择符。
实例:
p + p{color:#F00;}
<p>测试的内容1</p>
<p>测试的内容2</p>
<div>测试的内容3</div>
<p>测试的内容4</p>
<p>测试的内容5</p>
<div><p>测试的内容6</p></div>
属性选择符(Attribute Selectors)
语法:(属性选择符具体再分为4种不同的表现方式)
1.E1[attr]
2.E1[attr=value]
3.E1[attr~=value]
4.E1[attr|=value]
说明:
1. 选择具有attr属性的E1
2. 选择具有attr属性且属性值等于value的E1
3. 选择具有attr属性且属性值为一用空格分隔的字词列表,其中一个等于value的E1。
4. 选择具有attr属性且属性值为一用连字符分隔的字词列表,由value开始的E1
非IE内核浏览器和IE7及以上浏览器支持,属于CSS2选择符。
实例:
div[title]{color:#f00;}
<div title="测试的内容">测试的内容</div>
div[class=a]{color:#f00;}
<div class="a">测试的内容</div>
<div class="a b">测试的内容</div>
div[class~=a]{color:#f00;}
<div class="a">测试的内容</div>
<div class="a b">测试的内容</div>
div[title|=a]{color:#f00;}
<div title="a">测试的内容</div>
<div title="a b c">测试的内容</div>
<div title="a-b-c">测试的内容</div>
伪类选择符(CSS Pseudo-Classes Reference)
语法:(伪类选择符共有10种)
1. Selector:link{ sRules }
2. Selector:visited{ sRules }
3. Selector:hover{ sRules }
4. Selector:active{ sRules }
5. Selector:focus{ sRules }
6. Selector1 Selector2:first-child{ sRules }
7. Selector:first{ sRules }
8. Selector:left{ sRules }
9. Selector:right{ sRules }
10.Selector:lang{ sRules }
说明:
1. 设置a对象在未被访问前的样式表属性。默认值由浏览器决定。对于无href属性(特性)的a对象,此伪类不发生作用。
2. 设置a对象在其链接地址已被访问过时的样式表属性。默认值由浏览器决定。定义网页过期时间或用户清空历史记录将影响此伪类的作用。对于无href属性(特性)的a对象,此伪类不发生作用。
3. 设置对象在其鼠标悬停时的样式表属性。在CSS1中此伪类仅可用于a对象。且对于无href属性(特性)的a对象,此伪类不发生作用。在CSS2中此伪类可以应用于任何对象。
4. 设置对象在被用户激活(在鼠标点击与释放之间发生的事件)时的样式表属性。在CSS1中此伪类仅可用于a对象。且对于无href属性(特性)的a对象,此伪类不发生作用。在CSS2中此伪类可以应用于任何对象。并且:active状态可以和:link以及:visited状态同时发生。
5. 设置对象在成为输入焦点(该对象的onfocus事件发生)时的样式表属性。
6. 设置对象(Selector1)的第一个子对象(Selector2)的样式表属性。
7. 设置页面容器第一页使用的样式表属性。仅用于@page规则。
8. 设置页面容器位于装订线左边的所有页面使用的样式表属性。仅用于@page规则。
9. 设置页面容器位于装订线右边的所有页面使用的样式表属性。仅用于@page规则。
10.设置对象使用特殊语言的内容样式表属性。
:link, :visited, :hover, :active属于CSS1,目前所有主流浏览器均支持a对象的该4种伪类选择符,非IE浏览器和IE7及以上浏览器还支持非a对象的:hover, :active;:focus, :lang属于CSS2,非IE核心浏览器及IE8支持。
实例:
a:link{color:#f00;}
a:visited{color:#666;}
a:hover{color:#F60;text-decoration:none;}
a:active{color:#000;}
<a href="http://blog.doyoe.com/">css探索之旅</a>
input:focus,a:focus{background:#f00;/* 点击或按TAB键获得焦点时生效 */}
<a href="https://www.aspxhome.com/">asp之家</a>
<input type="text" />
div em:first-child{color:#f00;}
<div><em>web</em>前端开发<em>权威指南</em></div>
伪对象选择符(CSS Pseudo-Elements Reference)
语法:(伪对象选择符共有4种)
1. Selector:first-letter
2. Selector:first-line
3. Selector:before
4. Selector:after
说明:
1. 设置对象内的第一个字符的样式表属性。此伪对象仅作用于块元素。内联元素要使用该伪对象,必须先设定对象具有块元素的表状。
2. 设置对象内的第一行的样式表属性。此伪对象仅作用于块对象。内联对象要使用该伪对象,必须先设定对象具有块元素的表状。
3. 用来和content属性一起使用,设置在对象前(依据对象树的逻辑结构)发生的内容。
4. 用来和content属性一起使用,设置在对象后(依据对象树的逻辑结构)发生的内容。
这几个伪对象选择符都为属于CSS2选择符,其中:first-letter和:first-line目前所有主流浏览器均支持;:before和:after非IE核心浏览器及IE8支持。
实例:
div:first-letter {color:#f00;}
<div>我是一只丑小鸭,伊啊伊啊哟</div>
div:first-line {color:#f00;}
<div>我是一只丑小鸭,伊啊伊啊哟</div>
div:before {content:"web";}
<div>前端开发</div>
div:after {content:"...";}
<div>大段的文字</div>
待修改完善。。。


猜你喜欢
- 当然还是要使用FileSystemObject(FSO)来创建了。不过在创建前,要先检查以下目录是否存在,如果存在,就不用创建了: 
- Python来进行查询和替换一个文本字符串?可以使用sub()方法来进行查询和替换,sub方法的格式为:sub(replacement, s
- 本文实例讲述了Go语言单链表实现方法。分享给大家供大家参考。具体如下:1. singlechain.go代码如下:////////////单
- 目录1. 初始化数组2. 数组求和、求最大值、最小值3. 过滤错误值4. 使用逻辑运算符5. 判断简化6. 清空数组7. 计算代码性能8.
- StringIO它主要是用在内存读写str中。主要用法就是:from io import StringIOf = StringIO()f.w
- 一、基础环境1、操作系统:CentOS 7.32、MySQL:8.0.13 链接: https://pan.baidu.com/s/13-j
- 在CentOS上安装MySQL数据库服务器后,系统出于安全性考虑,缺省不支持用户通过非本机连接上数据库服务器,如果想让用户通过另外一台机器连
- 密码强度是一个很普遍的功能,比较简单,主要是怎么制定这个强度规则。现在需要升级密码强度的验证,以前的验证比较简单,现在已经不能满足需求了,现
- 如下所示:# -*- coding:UTF-8 -*-__author__ = "zhangguodong"__time
- 一、实验内容 对于下面这幅图像,编程实现染色体计数,并附简要处理流程说明。二、实验步骤1.中值滤波2.图像二值化3.膨胀图像4.腐
- python中捕获键盘操作一共有两种方法第一种方法:使用pygame中event方法使用方式如下:使用键盘右键为例if event.type
- 最近朋友需要一个可以识别图片中的文字的程序,以前做过java验证码识别的程序;刚好最近在做一个python项目,所以顺便用Python练练手
- 我就废话不多说了,大家还是直接看代码吧~import kerasfrom sklearn.model_selection import tr
- 企业管理器中没有改数据库名的功能,如果一定要用企业管理器来实现,你可以备份数据库,然后还原,在还原时候可以指定另一个库名,然后再删除旧库就行
- 今天打算弄个爬虫,想来想去打算用python弄一个。之前了解到scrapy这个库是个不错的选择,于是开始折腾。可惜第一步就挂了。安装scra
- 前言新手程序员大概有如下特点if嵌套经常超过3层、经常出现重复代码、单个函数代码特别长。只会crud,对语言特性和语言的边界不了解。不懂面向
- 我的电脑环境是使用.net framework4.5.1,如果在调试过程中调不通请注意我用的是Visual studion 2017,pyt
- 一、问题代码如下,发现标题的中文显示的是方块import matplotlibimport matplotlib.pyplot as plt
- 一、百度百科1、MySQLMySQL声称自己是最流行的开源数据库。LAMP中的M指的就是MySQL。构建在LAMP上的应用都会使用MySQL
- 本文实例讲述了Python基于list的append和pop方法实现堆栈与队列功能。分享给大家供大家参考,具体如下:#coding=utf8