css3学习 之 css选择器(结构性伪类选择器)
同上篇：先说明下本机浏览器吧：opera 10 firefox 4.0 chrome 由于是公司机器xp的。。所以ie版本为 ie8 另外有一个ietest
所谓伪元素选择器，是指并不是针对真正的元素使用的选择器，而是针对css中已经定义好的伪元素使用的选择器，它的使用方法如下所示。
选择器:伪元素{属性:值}
伪元素选择器也可以与类配合使用，使用方法如下所示。
选择器 类名:伪元素{属性:值}
1：在css中，主要有如下四个伪元素选择器
first-line 、 first-letter 、before 、after
说明: first-letter:用于为某个元素中的文字的首字母(欧美文字)或第一个字(中文或者日文等汉字)使用样式(其实就是第一个字符)
其他的我就不说明了。。大家看字面意思就明白了。
2：选择器root、not、empty、target
root:
root选择器将样式绑定到页面的根元素中。所谓根元素是指位于文档树中最顶层结构的元素，在html页面中就是指包含着整个页面的<html>部分。
example:
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<style>
:root{
background-color:yellow;
}
body{
background-color:limegreen;
}
</style>
</head>
<body>
<h1>选择器概述</h1>
<p>在css3中，提倡使用选择器来将样式与元素直接绑定起来，这样的话，在样式表中什么样式与元素相匹配变得一目了然，修改起来也很方便。不仅如此，通过选择器，我们还可以实现各种复杂的指定，同时也能大量减少样式表的代码书写量，最终书写出来的样式也会变得简洁明</p>
</body>
</html>
运行效果:opera 和firefox起作用。ie与chrome不起作用
ps:这里有个好玩的现象：当root 与body同时出现的时候 body样式有效范围为页面body范围内。。但是当仅仅使用body样式的时候整个页面为body的有效范围
not:
如果相对某个结构元素使用样式，但是想排除这个结构元素下面的子结构元素，让它不使用这个样式时，可以使用not选择器。
example:
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<style>
body *:not(h1){
background-color:limegreen;
}
</style>
</head>
<body>
<h1>选择器概述</h1>
<p>在css3中，提倡使用选择器来将样式与元素直接绑定起来，这样的话，在样式表中什么样式与元素相匹配变得一目了然，修改起来也很方便。不仅如此，通过选择器，我们还可以实现各种复杂的指定，同时也能大量减少样式表的代码书写量，最终书写出来的样式也会变得简洁明</p>
</body>
</html>
运行效果：除了ie其他均能正常显示。。
empty：
使用empty选择器来指定当元素内容为空白时使用的样式
example:
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<style>
:empty{
background-color:limegreen;
}
</style>
</head>
<body>
<h1>选择器概述</h1>
<table border="1">
<tr><td>A</td><td>B</td><td>C</td></tr>
<tr><td>D</td><td>E</td><td></td></tr>
</table>
</body>
</html>
运行效果：同样除了IE其他都可以显示(PS:目前我没有在ie9中运行。所以没有资格在这里说明)
这里我有一个疑问：
:empty{
content:"no";
}
也就是说当为空的时候显示“no” 。。但是我发现content无法显示.这是为啥呢？
target
使用target选择器来对页面某个target元素(该元素的id被当做页面中的超链接来使用)指定样式，该样式只在用户点击了页面中的超链接，并且跳转到target元素后起作用
example:
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<style>
:target{
background-color:yellow;
}
</style>
</head>
<body>
<p id="menu">
<a href="#text1">示例文字1</a> |
<a href="#text2">示例文字2</a> |
<a href="#text3">示例文字3</a> |
<a href="#text4">示例文字4</a>
</p>
<div id="text1">
<h2>示例文字1</h2>
<p>...此处略去...</p>
</div>
<div id="text2">
<h2>示例文字2</h2>
<p>...此处略去...</p>
</div>
<div id="text3">
<h2>示例文字3</h2>
<p>...此处略去...</p>
</div>
<div id="text4">
<h2>示例文字4</h2>
<p>...此处略去...</p>
</div>
</body>
</html>
运行效果：除了ie其他均能够正常显示
其中说明: href="#text1" 是进行描点定位一旦去掉这个就不能满足“并且跳转到target元素后起作用” 故其样式也将不起作用
3：选择器first-child、last-child、nth-child、nth-last-child、nth-of-type、nth-last-of-type
first-child、last-child 这里我就不详细描述了。
nth-child、nth-last-child
针对一个父元素的第一个子元素开始起第多少个元素和最后一个子元素起第多少个元素起作用。
example:
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<style>
li:nth-child(2){
background-color:yellow;
}
li:nth-last-child(2){
background-color:skyblue;
}
</style>
</head>
<body>
<h2>列表A</h2>
<ul>
<li>列表项目1</li>
<li>列表项目2</li>
<li>列表项目3</li>
<li>列表项目4</li>
</ul>
</body>
</html>
同样ie不争气。。。
但是我想说明的是某些情况下会有问题：
比如某个div中有以下元素<h2>标题1</h2><p>正文1</p> <h2>标题2</h2><p>正文2</p> <h2>标题3</h2><p>正文3</p> 当我们设置h2:nth-child(odd){background-color:yellow;}
本来我们是希望所有奇数标题(h2)显示黄色。但是我们发现所有标题(h2)均显示黄色。这时为啥呢？
因为nth-child选择器在计算子元素是第奇数个元素，是连同所有父元素中所有子元素一起计算的这样<h2>永远都是奇数元素了。
nth-of-type能够有效的解决这个问题。
最后再举一个循环使用的例子:
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<style>
li:nth-child(2n+1){
background-color:yellow;
}
li:nth-child(2n+2){
background-color:skyblue;
}
</style>
</head>
<body>
<h2>列表A</h2>
<ul>
<li>列表项目1</li>
<li>列表项目2</li>
<li>列表项目3</li>
<li>列表项目4</li>
</ul>
</body>
</html>
原来可以这样的。。。css选择器真的很神奇
css3学习 之 css选择器(结构性伪类选择器)相关推荐
- CSS3学习笔记1：结构性伪类选择器
第2节.结构性伪类选择器 在学习结构性伪类选择器之前,先了解2个概念:sCSS中的伪类选择器&伪元素 伪类选择器:CSS中已经定义好的选择器,不能随便取名 常用的伪类选择器是使用在a元素上的几 ...
- CSS3选择器--结构性伪类选择器
在学习结构性伪类选择器之前,先了解2个概念:CSS中的伪类选择器和伪元素: 1.伪类选择器:CSS中已经定义好的选择器,不能随便取名 常用的伪类选择器是使用在a元素上的几种,如a:link|a:vis ...
- html伪类选择器代码,CSS3中结构性伪类选择器—:first-of-type实现名言标签（代码实例 ）...
本文目标: 1.掌握CSS中结构性伪类选择器-nth-child的用法 问题: 1.实现以下效果,且使用纯DIV+CSS,必须使用结构性伪类选择器-first-of-type 附加说明: 1.整体宽为 ...
- 谈谈一些有趣的CSS题目（十）-- 结构性伪类选择器
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- CSS3之伪元素选择器和伪类选择器
伪类选择器,和一般的DOM中的元素样式不一样,它并不改变任何DOM内容.只是插入了一些修饰类的元素,这些元素对于用户来说是可见的,但是对于DOM来说不可见.伪类的效果可以通过添加一个实际的类来达到. ...
- 【CSS 教程系列第 12 篇】什么是 CSS 中的伪类选择器
这是[CSS 教程系列第 12 篇],如果觉得有用的话,欢迎关注专栏. CSS 的选择器有很多,常用的有 元素选择器.id 选择器.class 选择器.后代选择器.子代选择器.并集选择器.交集选择器. ...
- 前端 CSS：锚伪类选择器:hover,:active，:visited；等用法总结
前端 CSS:锚伪类选择器:hover,:active,:visited;等用法总结 锚伪类选择器:hover,:active,:visited;等用法总结 一.什么是锚伪类 在支持 CSS 的浏览器 ...
- CSS3 选择器——笔记+实战案例(基本选择器、组合选择器、属性选择器、伪类选择器)...
使用CSS3 选择器--笔记 CSS通过选择器控制HTML元素,CSS选择器对网页对象可以实现一对一.一对多或者多对一的匹配. 一.CSS3选择器分类 CSS选择器在CSS2.1选择器的基础上新增了属 ...
- CSS复合选择器（后代选择器、子元素选择器、并集选择器、伪类选择器、:focus伪类选择器）
复合选择器是由两个或多个基础选择器,通过不同的方式组合而成的. 1. 后代选择器 后代选择器又称为包含选择器 作用:用来选择元素或元素组的子孙后代 其写法就是把外层标签写在前面,内层标签写在后面,中间 ...
最新文章
- 想要确保架构目标达成？适合度函数了解一下
- 偷天换日，逼真的天空置换算法
- 数据库被挂马的ASP处理方法
- QT的QSignalTransition类的使用
- pandas中apply与map的异同
- Linux 命令（101）—— bc 命令
- 呼叫中心IVR系统的介绍
- tensorflow之pd模型
- MFC SendMessage与PostMessage区别
- Docker tomcat 多版本环境搭建
- Jmeter性能测试脚本搭建与测试步骤流程
- Element DateTimePicker 日期时间选择器 今天日期设置，并获取value值
- 哲♂学【前排提醒非题解】
- git更换远程仓库和用户名密码
- Ubuntu18.04 没有有以太网连接的解决办法
- 周志华老师报告Boasting 25years
- HTML文本框样式大全
- Photoshopcs6 自学笔记三 画笔工具
- eclipse 快捷调整字体_一键就能调文字大小？Word当中你所不知的快捷键-eclipse字体大小设置...
- shell教程–4种常用的转义字符
热门文章
- 【Linux 内核】进程管理 ( Linux 内核中的进程状态 | TASK_RUNNING | TASK_INTERRUPTIBLE | __TASK_STOPPED | EXIT_ZOMBIE )
- 【C 语言】数组 ( 指针数组用法 | 菜单选择 )
- 【错误记录】Mac 中 IntelliJ IDEA 运行 Python 程序报错 ( pip 21.0 will drop support for Python 2.7 in January 20 )
- [debian]use ISO as debian apt source / 使用ISO文件作为apt源
- Java并发程序设计（四）JDK并发包之同步控制
- 安卓开发：关于适配的问题
- Junit内部解密之四： Junit单元测试最佳实践
- 8条腾讯的产品管理方式
- 云计算之路-试用Azure：数据库备份压缩文件在虚拟机上的恢复速度测试
- Oracle 不同用户之间 大量数据转移的方法测试