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

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

选中第一个目标元素：

  1. .box div:first-of-type{
  2.  
  3.         }#选中第一个div元素。无论div前面有多少个其他元素

选中最后一个目标元素：

  1. .box div:last-of-type{
  2.  
  3.         }
  1. #选中最后一个div元素。无论div前面有多少个其他元素
  1.  

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

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

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

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

  1.         div :only-child{# 选中的是div标签下只有一个子元素的此子元素
  2.             font-size: 50px;
  3.         }
  4.  
  5.     </style>
  6. </head>
  7. <body>
  8.     <div>1
  9.         <a href="">3</a>
  10.     </div>
  11.     <div>2
  12.         <a href=""></a>
  13.         <a href=""></a>
  14.     </div>
  15.     <div>
  16.         <a href="">3</a>
  17.  
  18.     </div>
  19.     <div>4
  20.         <p>4</p>
  21.     </div>
  22.     <div>5</div>
  23. </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. java基础(五)之static关键词的作用

    static关键词的作用 1.静态成员变量的语法特定2.静态函数的语法特定3.静态代码块的语法特定 定义静态成员变量 Person.java class Person{ static int a; } ...

  2. flask入门（一）

    flask是一个轻量级的框架,据说跟django跟比是真的轻. 首先要先配置一个虚拟环境,flask项目需要在那个虚拟环境里运行,这里需要用的venv库实在python3里的标准库,不过有的linux ...

  3. 我写的UI自动化框架

    ---------------------------------------------------------------------------------------------------- ...

  4. JavaScript 运算，流程控制和循环

    算数运算符 算术运算符 描叙 运算符 实例 加 + 10 + 20 = 30 减 - 10 – 20 = -10 乘 * 10 * 20 = 600 除 / 10 / 20 = 0.5 取余数 % 返 ...

  5. PLSQL Developer12注册码

    product code: 4vkjwhfeh3ufnqnmpr9brvcuyujrx3n3le serial Number:226959 password: xs374ca 绝对靠谱

  6. SaltStack常用的模块

    目录 1. SaltStack模块介绍 2. SaltStack常用模块 2.1 SaltStack常用模块之network 2.1.1 network.active_tcp 2.1.2 networ ...

  7. MySQL数据库 | 数据表的增删改查

    MySQL数据的增删改查(crud) 本文结构 一.增加 create 二.修改 update 三.查询 retrieve(简单查询,下篇详细展开) 四.删除 delete 首先,创建简单的class ...

  8. 请求响应状态status为canceled

    发出ajax请求之后 发现status状态是canceled 1. 和form冲突 我的提交代码是这样的 $.ajax({ //几个参数需要注意一下 type: "POST",// ...

  9. Jenkins Pipeline waitForQualityGate pending 超时

    请参考链接:http://www.iotxing.com/2019/06/12/258/jenkins-pipeline-waitforqualitygate%E8%B6%85%E6%97%B6/ 主 ...

  10. winform学习（8）RichTextBox控件

    RichTextBox控件允许用户输入和编辑文本的同时提供了比普通的TextBox控件更高级的格式特征. RichTextBox的控件标识符.SelectionColor = Color.Blue;  ...