粗谈伪类选择器

伪类选择器是添加到选择器的关键字,用于指定要选择的元素的特殊状态。以:单冒号开始。分为动态伪类选择器、结构伪类选择器、否定伪类选择器。

动态伪类选择器:

:link{ }【元素未访问时的状态】

:visited{ }【元素已访问后的装态】

:focus{ }【被选中时会发生的装态】

:hover{ }【鼠标悬停在元素时的会发生的状态】

:active{ }【鼠标点击时元素发生的状态】

注:该顺序不能改变,link和visited为静态伪类选择器,可不分先后顺序

结构伪类选择器:用于选中某个元素

1、

:first-child  选中第一个元素

:last-child  最后一个元素

:nth-child(n)  选中第n个元素

示例:section>p:nth-child(3)表示:section下的第3个元素,如果是p则选中

2、选中同元素名相同标签的第几个元素

:nth-of-type(n)

示例:section>p:nth-of-type(3)  表示:选中section下的第3个p

3、选中倒数第n个元素

:nth-last-child(n)

否定伪类选择器

格式:   :not()  除了某个元素,其他添加样式

示例:section>p:not(:nth-child(3))  除了第3个p其他添加样式

格式:除了某几个元素,其他添加样式

:not(  ):not()

原文地址:https://www.cnblogs.com/freeland/p/11830855.html

时间: 2024-08-05 01:59:06

粗谈伪类选择器的相关文章

CSS3 选择器——伪类选择器

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

CSS3 结构性伪类选择器(2)

CSS3 结构性伪类选择器-first-child ":first-child"选择器表示的是选择父元素的第一个子元素的元素E.简单点理解就是选择元素中的第一个子元素,记住是子元素,而不是后代元素. 示例演示 通过":first-child"选择器定位列表中的第一个列表项,并将序列号颜色变为红色. HTML代码: <ol> <li><a href="##">Link1</a></li>

CSS3的状态伪类选择器

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>CSS3的状态伪类选择器</title> 6 <style type="text/css"> 7 :enabled{ 8 background-color: blue; 9 }; 10 :disabled{

CSS3新增加的伪类选择器

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

背景图+列表+伪类选择器

Background-color|image|position|repeat 颜色图片位置重复 图片优先 CSS Sprites雪碧图:减少http请求,减小服务器压力.一张大图,通过背景偏移position截取小图. Li列表 list-style list-style-image list-style-position list-style-type <a>标签伪类选择器 link 未访问 visited 已访问 hover 悬停 可用于其他元素 active 点击 可用于其他元素

伪类选择器 E:nth-child(n)、E:nth-of-type(n)

结构伪类是css3新增的类型选择器. E:nth-child(n).E:nth-of-type(n)就是其中之二.搞懂了这两个,基本上跟他俩一家的其他几个兄弟伙基本上也可以弄懂了. 首先先用文字语言来描述一下这俩:      E:nth-child(n): 选择父元素下的第n个子元素,并且这第n个子元素的类型为E,    还是语言描述了之后用例子比较好       上面这个例子很简单,来简单分析一下样式表中的span:nth-child(2)这条语句(实际写代码不会这么随便啦,这里只是为了说明问

css选择器2——伪类选择器

一.伪元素选择器 1. E:first-letter/E::first-letter(css3时代两个冒号) 设置元素内的第一个字符的样式. 例如: p::first-letter{font-size:50px;} 2. E:first-line/E::first-line 设置元素内的第一行的样式. 例如: p::first-line{color:green;} 3. E:before/E::before在每个E元素的内容之前插入内容.用来和content属性一起使用. 例如: a::befo

H5与CS3权威下.19 选择器(2)结构性伪类选择器

1.CSS中的伪类选择器及伪元素 (1)与自定义的class类选择器不同,伪类选择器是CSS中已经定义好的选择器. eg:a:link{color:#ff0000;} (2)伪元素的使用方法: 选择器:伪元素{属性:值} 选择器.类名:伪元素{属性:值} 2.css中常用的伪元素选择器 (1)first-line:向某元素中的第一行文字使用样式. eg: 1 <p>伪元素选择器 <br>类选择器</p> 1 p:first-line{background: pink;}

CSS3 nth 伪类选择器

考察下面的 HTML 代码片段: <div> <section>section 1</section> <section>section 2</section> <ul> <li>item 1</li> <li> <ul> <li>sub item 1</li> <li>sub item 2</li> <li>sub item