CSS3中only-child伪类选择器

<body>

//只对li1设置样式

li:nth-child(1):nth-last-child(1){

background:yellow;

}

</style>

<ul>

</ul>

<ul>

</ul>

</body>

另外：可以直接使用

li:only-child{

background:yellow;

}

来达到相同的目的。

时间： 2024-10-29 19:10:40

CSS3中only-child伪类选择器的相关文章

如何使用CSS3中的结构伪类选择器和伪元素选择器

原文:如何使用CSS3中的结构伪类选择器和伪元素选择器结构伪类选择器介绍# 结构伪类选择器是用来处理一些特殊的效果. 结构伪类选择器属性说明表属性描述 E:first-child 匹配E元素的第一个子元素. E:last-child 匹配E元素的最后一个子元素. E:nth-child(n) 匹配E元素的第n个子元素. E:nth-child(2n)或者E:nth-child(even) 匹配E元素的偶数子元素. E:nth-child(2n+1)或者E:nth-child(odd) 匹配

CSS3新增加的伪类选择器

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>CSS3新增加的伪类选择器</title> <style type="text/css"> /*root所有的元素*/ :root{ color: pink;

css3 :enabled与:disabled伪类选择器

css :enabled和:disabled伪类选择器在Web表单中,有些表单元素(如输入框.密码框.复选框等)有"可用"和"不可用"这2种状态.默认情况下,这些表单元素都处在可用状态. 在CSS3中,我们可以使用:enabled选择器和:disabled选择器来分别设置表单元素的可用与不可用这两种状态的CSS样式. 语法: :disabled { style properties } :enabled { style properties } 如:我们为&quo

CSS3(各UI元素状态伪类选择器受浏览器的支持情况)

选择器 Firefox Safari Opera IE Chrome E:hover Y Y Y Y Y E:active Y Y Y N Y E:focus Y Y Y Y Y E:enabled Y Y Y N Y E:disabled Y Y Y N Y E:read-only Y Y Y N Y E:read-write Y Y Y N Y E:checked Y Y Y N Y E:selection Y Y Y N Y E:default Y N Y N N E:indetermin

css3 巧用结构性伪类选择器

最近在国外的一个网站上看到的一个关于结构性伪类选择器的用法,觉得十分实用,就自己尝试了一下,并把它给记录下来: 这是最基本的样式: 1 <style type="text/css"> 2 li{ 3 list-style-type: none; 4 float: left; 5 width: 60px; 6 height: 60px; 7 background-color: #979698; 8 margin-left: 10px; 9 text-align: center

css3系列选择器之伪类选择器

Pseudo-Classes Selectors(伪类选择器) E:not(s) E:root E:target E:first-child E:last-child E:only-child E:nth-child(n) E:nth-last-child(n) 这一行的选择器,都会考虑其他元素的的影响. E:first-of-type E:last-of-type E:only-of-type E:nth-of-type(n) E:nth-of-last-type(n) 这一行的选择器

css3基础 :target 目标伪类选择器简单示例

礼悟: 公恒学思合行悟,尊师重道存感恩.叶见寻根三返一,江河湖海同一体. 虚怀若谷良心主,愿行无悔给最苦.读书锻炼养身心,诚劝且行且珍惜. ide:visual studio 2017 browser:Chrome os:win7 学习链接: http://blog.csdn.net/atleks/article/details/38966691 代码 <!DOCTYPE html>

CSS3 新怎的伪类选择器

:first-of-type p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素. :last-of-type p:last-of-type 选择属于其父元素的最后 <p> 元素的每个 <p> 元素.:only-of-type p:only-of-type 选择属于其父元素唯一的 <p> 元素的每个 <p> 元素.:only-child p:only-child 选择属于其父元素的唯一子元素的每个

CSS3 选择器——伪类选择器

前面花了两节内容分别在<CSS3选择器--基本选择器>和<CSS3选择器--属性选择器>介绍了CSS3选择器中的基本选择器和属性选择器使用方法,今天要和大家一起学习CSS3选择器中的第三部分,也是最后一部分--伪类选择器.伪类选择器对于大家来说最熟悉的莫过于:link,:focus,:hover之类的了,因为这些在平时中是常用到的伪类选择器,那么先和大家一起简单总结一下CSS中常用的伪类选择器的使用方法,最后把重心放到CSS3新增加的":nth-child"选择

CSS3 01. CSS3现状、属性选择器、伪类选择器、

CSS 3 现状兼容性差,需添加私有前缀/移动端优于PC端/不断改进中/渐进增强原则/考虑用户群体/遵照产品的方案 : CSS3手册需要阅读其--阅读及使用指引 []表示全部的可选项 || 或者 | 表示多选一 ? 表示 0个或1个 * 表示 0个或多个 {}表示范围 {A}代表出现A次 ,{A,B}代表出现A次以上B次以下 ,B可以省略,{A,} 代表至少出现A次,无上限 # 出现1次以上,以逗号隔开,可以选择后面跟大括号的方式精确表示重复次数:<length>#{1,4}. !代表