选择器的使用(first-child和last-child选择器)

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
        li:first-child {
        background-color:limegreen;
        }
        li:last-child {
        background-color:red;
        }
    </style>
</head>
<body>
    <h2>列表A</h2>
    <ul>
        <li>列表项目1</li>
        <li>列表项目2</li>
        <li>列表项目3</li>
        <li>列表项目4</li>
        <li>列表项目5</li>
    </ul>
    <hr  />
    <h2>列表B</h2>
    <ul>
        <li>列表项目1</li>
        <li>列表项目2</li>
        <li>列表项目3</li>
        <li>列表项目4</li>
        <li>列表项目5</li>
    </ul>
</body>
</html>

效果如下：

时间： 2024-10-05 20:45:23

选择器的使用(first-child和last-child选择器)的相关文章

css伪类选择器详细解析及案例使用-----伪类选择器（2）

结构伪类选择器: <div> <ul> /*ul:only-of-type*/ <li>one</li> /*li:first-child li:nth-child(2n+1)*/ <li>two</li> /*li:nth-child(2)*/ <li>three</li> /*li:last-child li:nth-child(2n+1)*/ </ul> <div>adc</

[ jquery 选择器 :not(selector) ] 此方法排除与selector选择器选取的页面元素

此方法排除与selector选择器选取的页面元素: 实例: <!DOCTYPE html> <html lang='zh-cn'> <head> <title>Insert you title</title> <meta http-equiv='description' content='this is my page'> <meta http-equiv='keywords' content='keyword1,keyword

css伪类选择器详细解析及案例使用-----伪类选择器（1）

动态伪类选择器:E:link :选择匹配的E元素,并且匹配元素被定义了超链接并未被访问过.E:visited :选择匹配的E元素,而且匹配的元素被定义了连接并已被访问过.E:active :选择匹配的E元素,且匹配的元素被激活.常用于锚点与按钮上.E:hover :选择匹配的E元素,且用户鼠标停留在元素上.E:focus :选择匹配的E元素,且元素获得焦点. 锚点伪类设置遵守“爱恨原则”,即LoVe/HAte,也就是“link-visited-hover-active”. 目标伪类选择器(此为动

CSS3中结构伪类选择器——root、not、empty、target选择器

1.root选择器 将样式绑定到页面的根元素中.根元素是指位于文档树中最顶层结构的元素,在HTML页面中就是指包含整个页面的<html>部分. <style type="text/css"> :root{ background:yellow; } body{ background:green; } </style> 注意:不使用root选择器来指定root元素的背景色,只指定body元素的背景色,则整个页面就全部变成了绿色. 2.not选择器 如果想

JS选择器querySelector和~All，三个原生选择器

比较高级的万能选择器,比较常用 定义: querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素. 注意: querySelector() 方法仅仅返回匹配指定选择器的第一个元素.如果你需要返回所有的元素,请使用 querySelectorAll() 方法替代. 语法 document.querySelector(CSS selectors) 参数值 参数 类型 描述 CSS 选择器 String 必须.指定一个或多个匹配元素的 CSS 选择器. 可以使用它们的 id,

[NHibernate]Parent/Child

系列文章 [Nhibernate]体系结构 [NHibernate]ISessionFactory配置 [NHibernate]持久化类(Persistent Classes) [NHibernate]O/R Mapping基础 [NHibernate]集合类(Collections)映射  [NHibernate]关联映射 引言 刚刚接触NHibernate的人大多是从父子关系(parent/child type relationship)的建模入手的.父子关系的建模有两种方法.比较简便.直观

2000行之mother、father、child

//child.h #ifndef CHILD_H #define CHILD_H #include <string> using namespace std; class Mother; class Father; class Child { public: Mother *mama; Father *baba; Child(); string name; void answer(); void callParent(); }; #endif // CHILD_H //child.cpp #

怎样实现动态加入布局文件（避免 The specified child already has a parent的问题）

首先扯点别的:我应经连续上了两个星期的班了,今天星期一.是第三个周.这个班上的也是没谁了.近期老是腰疼. 预计是累了.近期也没跑步.今天下班继续跑起. 这篇文章讲一讲怎样在一个布局文件里动态加在一个布局文件. 避免出现The specified child already has a parent. You must call removeView() on the child's parent first.的问题. 先看一看效果再说. 接下来是实现过程 首先是 activity_add_vie

如何实现动态添加布局文件（避免 The specified child already has a parent的问题）

首先扯点别的:我应经连续上了两个星期的班了,今天星期一.是第三个周.这个班上的也是没谁了.最近老是腰疼.估计是累了.最近也没跑步.今天下班继续跑起. 这篇文章讲一讲如何在一个布局文件中动态加在一个布局文件.避免出现The specified child already has a parent. You must call removeView() on the child's parent first.的问题.先看一看效果再说. 接下来是实现过程 首先是 activity_add_view.x

JQuery基础选择器

jQuery选择器类似css选择器,所以学习起来也更加容易1.基础选择器 1.All Selector("*") 描述:选择所有元素 语法:$("*") 注意:实践证明,由于使用*选择器获取的是全部元素,因此,有些浏览器将会比较缓慢,这个选择器也许谨慎使用 2.Class Selector(".class") 描述:选择给定样式类名的所有元素 语法:$(".class") 3.Element Selector("el