<body>
<div class="box">   
<p>0</p>
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <p>1</p>
    </div>
</body>

几个比较有用的伪类选择器:

选中第一个目标元素:

.box div:first-of-type{

        }#选中第一个div元素。无论div前面有多少个其他元素

选中最后一个目标元素:

.box div:last-of-type{

        }
#选中最后一个div元素。无论div前面有多少个其他元素

选中前几个目标元素:只需要将n改为负值,使用最后一个目标元素的位置加上   -n  就可以实现。

例如我们要选中前两个div元素,最后一个div的位置是3,那么就是

.box div:nth-child(-n+3){
font-size: 50px;
}

选择某个特定子元素其父类只有此子元素自身:

        div :only-child{# 选中的是div标签下只有一个子元素的此子元素
font-size: 50px;
} </style>
</head>
<body>
<div>1
<a href="">3</a>
</div>
<div>2
<a href=""></a>
<a href=""></a>
</div>
<div>
<a href="">3</a> </div>
<div>4
<p>4</p>
</div>
<div>5</div>
</body>

如果要广泛选择只有一个子元素的标签的子元素,则将分号前面的标签名字去掉即可。


选择器1:not(选择器2):选择选择器1除选择器2选择的元素之外的元素

css——伪类选择器的更多相关文章

  1. CSS伪类选择器

    一.CSS伪类选择器用于给某些选择器添加效果语法规则:选择器:伪选择器例:a:link {color: #FF0000} 未访问的链接 a:visited {color: #00FF00} 已访问的链 ...

  2. 关于CSS伪类选择器

    #CSS伪类选择器 ##使用css伪类选择器需要注意的 使用css的伪类选择器来选择某元素时,需要特别注意 :first-child 和 :nth-child(n) 等时, 网页渲染是从语句的后面开始 ...

  3. CSS伪类选择器 - nth-child(an+b):

    CSS伪类选择器 - nth-child(an+b): 第一种:简单数字序号写法:nth-child(number)直接匹配第number个元素.参数number必须为大于0的整数.li:nth-ch ...

  4. CSS伪类选择器active模拟JavaScript点击事件

    一.说明 设置元素在被用户激活(在鼠标点击与释放之间发生的事件)时的样式. IE7及更早浏览器只支持a元素的:active,从IE8开始支持其它元素的:active. 另:如果需要给超链接定义:访问前 ...

  5. css伪类选择器的查找顺序

    当伪类选择器last-child.first-child无效时,就是因为不了解css伪类选择器的查找顺序造成选中某一元素失败. 先给出一段dom <body> <div>第一个 ...

  6. css伪类选择器及伪元素选择器

    1.类选择器 在css中可以使用类选择器把相同的元素定义成不同的样式.比如: 结果如下: 标题背景未变 2.伪类选择器 类选择器和伪类选择器的区别在于,类选择器我们定义的,而伪类选择器是CSS中已经定 ...

  7. CSS伪类选择器和伪元素选择器

    CSS的伪类选择器常用的是link/visited/hover/active,分别对应未访问.已访问过.鼠标悬停.鼠标按下时的样式,常用于链接,使用时要按此顺序依次写CSS,不能乱 a:link{ba ...

  8. css伪类选择器详细解析及案例使用-----伪类选择器(1)

    动态伪类选择器:E:link :选择匹配的E元素,并且匹配元素被定义了超链接并未被访问过.E:visited :选择匹配的E元素,而且匹配的元素被定义了连接并已被访问过.E:active :选择匹配的 ...

  9. css 伪类选择器制作登录框表单

    使用伪类选择器 制作鼠标悬停时文本框出现橙色虚线边框 制作鼠标激活时出现背景颜色淡橙色 使用css制作文本框圆角矩形效果,制作文本框背景图片,及背景不重复效果 <!DOCTYPE html> ...

  10. 彻底搞懂CSS伪类选择器:is、not

    本文介绍一下Css伪类:is和:not,并解释一下is.not.matches.any之前的关系 :not The :not() CSS pseudo-class represents element ...

随机推荐

  1. 软件工程 实验一 Git版本管理

    实验目的: 1)了解分布式分布式版本控制系统的核心机理: 2)   熟练掌握git的基本指令和分支管理指令: 实验内容: 1)安装git 2)初始配置git ,git init git status指 ...

  2. C#对config.ini文件进行读取和修改

    C#对config.ini文件进行读取和修改: public partial class Patrolcar : Form之后可以加入如下类: #region public class IniFile ...

  3. Django REST framework快速入门(官方文档翻译翻译)

    开始 我们将创建一个简单的API来允许管理员用户查看和编辑系统中的用户和组. 项目设置 创建一个新的django项目,命名为:<tutorial>,然后创建一个新的应用程序(app),命名 ...

  4. sql server和eclipse连接问题

    最近学习java,需要用的数据库sql sever,这就有一个连接问题需要设置 首先需要下载sql server,可查看我的博客sql sever下载教程: 连接教程:eclipse连接sql ser ...

  5. spring(三):BeanFactory

  6. 数据库too many connections 解决方法

    问题:网站后台突然报错了,显示“too many connections........”这是咋回事? 解决: 先罗列几个有用的操作: ① mysql -u root -p  回车输入密码进入mysq ...

  7. Django_模板

    1. 模板变量 小插曲 2. 模板点语法和标签 2.1 获取属性 2.2 调用方法 2.3 获取索引 2.4 获取字典中的值 3. 模板中的标签 3.1 if 3.2 for 3.3 注释 乘除 整除 ...

  8. ABB 机器人 流水灯and跑马灯

    MODULE MainModule VAR signaldi signaldi14; PROC main() //di14_test 数字输入信号 WHILE di14_test = DO ycld; ...

  9. 刷题4. Median of Two Sorted Arrays

    一.题目 Median of Two Sorted Arrays,具体请自行搜索. 这个题目,我看了一下,经过一番思考,我觉得实现起来不是很复杂. 但要做到bug free也不难,最大的问题是性能问题 ...

  10. AcWing 847. 图中点的层次

    队列 #include <cstdio> #include <cstring> #include <iostream> #include <algorithm ...