CSS3 基础(1)——选择器详解

CSS3选择器详解

一、 属性选择器

  在CSS3中,追加了三个属性选择器分别为:[att*=val]、[att^=val]和[att$=val],使得属性选择器有了通配符的概念。


选择器


示例


描述


[attribute^=value]


[src^="https"]


选择每一个src属性的值以"https"开头的元素


[attribute$=value]


[src$=".pdf"]


选择每一个src属性的值以".pdf"结尾的元素


[attribute*=value]


[src*="runoob"]


选择每一个src属性的值包含子字符串"runoob"的元素

示例:


代码


说明


div[class^="test"]{background:#ffff00;}


设置class属性值以"test"开头的所有div元素的背景颜色


[class^="test"]{background:#ffff00;}


设置class属性值以"test"开头的所有元素的背景颜色


div[class$="test"]{background:#ffff00;}


设置class属性值以"test"结尾的所有div元素的背景颜色


[class$="test"]{background:#ffff00;}


设置class属性值以"test"结尾的所有元素的背景颜色


div[class*="test"]{background:#ffff00;}


设置class属性值包含"test"的所有div元素的背景颜色


[class*="test"]{background:#ffff00;}


设置class属性值包含"test"的所有元素的背景颜色

二、结构性伪类选择器(一)


选择器


示例


描述


结构性伪元素选择器


:first-letter


p:first-letter


选择每一个<P>元素的第一个字母


:first-line


p:first-line


选择每一个<P>元素的第一行


:before


p:before


在每个<p>元素之前插入内容


:after


p:after


在每个<p>元素之后插入内容


结构性伪类选择器:共同特征是允许开发者根绝文档中的结构来指定元素的样式


:root


:root


选择文档的根元素


:not(selector)


:not(p)


选择每个并非p元素的元素


:empty


p:empty


选择每个没有任何子级的p元素(包括文本节点)


:target


#news:target


选择当前活动的#news元素(包含该锚名称的点击的URL)

     ①每个<p>元素之后插入内容: p:after{ content:"- Remember this"; }

     ②设置HTML文档的背景色: :root{ background:#ff0000; }

      :root选择器用匹配文档的根元素,在HTML中根元素始终是HTML元素。

     ③为每个并非<p>元素的元素设置背景颜色: :not(p) { background:#ff0000; }

     ④指定空的p元素的背景色: p:empty { background:#ff0000; }

      :empty选择器选择每个没有任何子级的元素(包括文本节点)。

     ⑤:target选择器可用于当前活动的target元素的样式,只能用id标识

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>菜鸟教程(runoob.com)</title>
 6     <style>
 7         :target{
 8         border: 2px solid #D4D4D4;
 9         background-color: #e5eecc;
10         }
11     </style>
12 </head>
13 <body>
14     <h1>This is a heading</h1>
15     <p><a href="#news1">Jump to New content 1</a></p>
16     <p><a href="#news2">Jump to New content 2</a></p>
17     <p>Click on the links above and the :target selector highlight the current active HTML anchor.</p>
18     <p id="news1"><b>New content 1...</b></p>
19     <p id="news2"><b>New content 2...</b></p>
20 </body>
21 </html>                

三、结构性伪类选择器(二)


选择器


示例


描述


:first-child


p:first-child


指定只有当<p>元素是其父级的第一个子级的样式。


:last-child


p:last-child


选择每个p元素是其父级的最后一个子级。


:nth-child(n)


p:nth-child(2)


选择每个p元素是其父级的第二个子元素


:nth-last-child(n)


p:nth-last-child(2)


选择每个p元素的是其父级的第二个子元素,从最后一个子项计数


:nth-of-type(n)


p:nth-of-type(2)


选择每个p元素是其父级的第二个p元素


:nth-last-of-type(n)


p:nth-last-of-type(2)


选择每个p元素的是其父级的第二个p元素,从最后一个子项计数

    ①指定父元素中最后一个p元素的背景色: p:last-child{ background:#ff0000; }

    ②指定每个p元素匹配同类型中的倒数第2个同级兄弟元素背景色: p:nth-last-child(2){ background:#ff0000; }

    ③:nth-child(n)选择器匹配父元素中的第n个子元素,n可以是一个数字,一个关键字(奇偶数等关键字),或者一个公式。该索引的第一个子节点是1。

    ④:nth-of-type(n)选择器匹配同类型中的第n个同级兄弟元素,n可以是一个数字,一个关键字,或者一个公式。该索引的第一个子节点是1。

     p:nth-of-type(odd){background:#ff0000;}

   p:nth-of-type(even){background:#0000ff;}

  ⑤使用公式(an+ b).描述:a代表一个循环的大小,N是一个计数器(从0开始),以及b是偏移量。 在这里,我们对所有索引是3的倍数的p元素指定了背景颜色: p:nth-child(3n+0){ background:#ff0000; }

  ⑥:only-child择器匹配属于父元素中唯一子元素的元素。 p:only-child{background:#ff0000; }

四、UI元素状态伪选择器

  在CSS3的选择器中,除了结构性伪类选择器外,还有一种UI元素状态伪类选择器。这类选择器的共同特征是:指定的样式只有当元素处于某种状态下时才起作用,在默认状态下不起作用。在CSS3中,共有17种UI元素状态伪类选择器。


选择器


示例


描述


:link


a:link


选择所有未访问链接


:active


a:active


选择活动链接


:hover


a:hover


选择鼠标在链接上面时


:focus


input:focus


选择具有焦点的输入元素(选中)


:checked


input:checked


选择每个选中的输入元素

:hover在鼠标移到链接上时添加的特殊样式。

提示: :hover 选择器器可用于所有元素,不仅是链接。

提示: :link 选择器设置了未访问过的页面链接样式, :visited 选择器设置访问过的页面链接的样式 :active选择器设置当你点击链接时的样式。

注意: 为了产生预期的效果,在 CSS 定义中,:hover 必须位于 :link 和 :visited 之后!

  ②:focus选择器用于选择具有焦点的元素。

    提示: :focus选择器接受键盘事件或其他用户输入的元素。

             一个输入字段获得焦点时选择的样式:input:focus{background-color:yellow;}

 1 <html>
 2 <head>
 3     <meta charset="utf-8">
 4     <title></title>
 5     <style>
 6         input:focus{
 7             background-color:yellow;
 8         }
 9     </style>
10 </head>
11 <body>
12     <p>点击文本输入框表单可以看到黄色背景:</p>
13     <form>
14         First name: <input type="text" name="firstname" /><br>
15         Last name: <input type="text" name="lastname" />
16     </form>
17     <p><b>注意:</b>  :focus 作用于 IE8,DOCTYPE 必须已声明</p>
18 </body>
19 </html>                            

    ③:checked 选择器匹配每个选中的输入元素(仅适用于单选按钮或复选框)。

    为所有选中的输入元素设置背景颜色:input:checked { height: 50px; width: 50px; }

 1 <html>
 2 <head>
 3     <meta charset="utf-8">
 4     <title></title>
 5     <style>
 6         input:checked {
 7             height: 50px;
 8             width: 50px;
 9         }
10     </style>
11 </head>
12 <body>
13     <form action="">
14         <input type="radio" checked="checked" value="male" name="gender" /> Male<br>
15         <input type="radio" value="female" name="gender" /> Female<br>
16         <input type="checkbox" checked="checked" value="Bike" /> I have a bike<br>
17         <input type="checkbox" value="Car" /> I have a car
18     </form>
19 </body>
20 </html>

选择器


示例


描述


:enabled


input:enabled


选择每一个已启用的输入元素


:disabled


input:disabled


选择每一个禁用的输入元素

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>菜鸟教程(runoob.com)</title>
 6     <style>
 7         input:enabled{
 8         background:#ffff00;
 9         }
10         input:disabled{
11         background:#dddddd;
12         }
13     </style>
14 </head>
15 <body>
16     <form action="">
17         First name: <input type="text" value="Mickey" /><br>
18         Last name: <input type="text" value="Mouse" /><br>
19         Country: <input type="text" disabled="disabled" value="Disneyland" /><br>
20         Password: <input type="password" name="password" />
21         <input type="radio" value="male" name="gender" /> Male<br>
22         <input type="radio" value="female" name="gender" /> Female<br>
23         <input type="checkbox" value="Bike" /> I have a bike<br>
24         <input type="checkbox" value="Car" /> I have a car
25     </form>
26 </body>
27 </html>

五、通用兄弟元素选择器:

  它用来指定位于一个父元素之中的某个元素之后的所有其他某个种类的兄弟元素所使用样式。

  如:同一div下的子p 元素,以“~”连接, div ~ p{background-color:gold}

时间: 2024-10-11 07:00:58

CSS3 基础(1)——选择器详解的相关文章

CSS3伪类选择器详解

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

CSS3属性选择器详解

上一章在<CSS3基本选择器>中主要介绍了CSS3选择器的第一部分,这节主要和大家一起来学习CSS3选择器的第二部分——属性选择器.属性选择器早在CSS2中就被引入了,其主要作用就是对带有指定属性的HTML 元素设置样式.使用CSS3属性选择器,你可以只指定元素的某个属性,或者你还可以同时指定元素的某个属性和其对应的属性值. 从上一节展示的CSS3选择器的图表中,我们可以知道,CSS3的属性选择器主要包括以下几种: E[attr]:只使用属性名,但没有确定任何属性值: E[attr="

CSS3基本选择器详解

CSS的选择器,我想大家并不会陌生吧,因为天天在使用,但对于CSS3的选择器,要运用的灵活到位,我想对很多朋友还是一定的难度,特别是CSS3中的:nth选择器.那么从现在开始我们先丢开他们版本的区别,从头一起来看看CSS选择器的运用. CSS是一种用于屏幕上渲染html,xml等一种语言,CSS主要是在相应的元素中应用样式,来渲染相对应用的元素,那么这样我们选择相应的元素就很重要了,如何选择对应的元素,此时就需要我们所说的选择器.选择器主要是用来确定html的树形结构中的DOM元素节点.我把CS

CSS3属性选择器详解 及 双色球实战开发

在前面的章节中,我们了解了,可以使用行内样式,ID选择器,类选择器,以及标签选择器来给一个元素应用样式. 如果我们想给定义了那些都定义了某一个属性的元素应用样式,这个时候我们该怎么做呢? 这一节中,我将使用 双色球案例 和 文档类型提示图标案例 来引入和应用属性选择器. 双色球案例: 大家都知道,双色球共有7个球,6个红球,1个蓝球.首先我们先在页面上面定义7个span标签: <!DOCTYPE html> <html> <head> <meta charset=

玩转CSS3,嗨翻WEB前端,CSS3伪类元素详解/深入浅出[原创][5+3时代]

1.博客背景 在我的上一篇博客中, 很多园友提出说对css3"画图"不是很理解, 在跟他们私聊了一段时间以后,加上自己在开始自学css3的时候的疑惑,我觉得大家之所以不是很理解主要是因为对伪元素不太了解,介于画图和CSS3里一些高大上的特效用的比较广泛的伪类元素就是::before 和 ::after, 写这篇博客主要也是为了起到一个敲门砖的作用,所以本篇博客主要是讲::before 和 ::after.那么就让我们一起来聊聊伪元素吧. 2.CSS历史 伪元素实际上在CSS1(CSS1

CSS选择器详解

CSS选择器详解 选择器是CSS的核心,从最初的元素.class/id选择器,演进到伪元素.伪类,以及CSS3中提供的更丰富的选择器,定位页面上的任意元素开始变得愈发的简单. 1.元素选择器 这是最基本的CSS选择器,HTML文档中的元素本身就是一个选择器: p {line-height:1.5em; margin-bottom:1em;} 2.关系选择器 E F:后代选择器,该选择器定位元素E的后代中所有元素F: ul li {margin-bottom:0.5em;} E > F:子选择器,

CSS3新增属性text-shadow详解及燃烧的字体实战开发

今天我们有很多程序员在给文本设置样式时,都感觉无从下手.一般有两种情况: 1) 不知道关于文本到底有哪些样式属性: 2) 即使借助开发工具的自动提醒,依然不清楚样式属性的具体意思,以及具体用法. 今天这篇文章,我将带领大家一起来领受CSS3在文本样式应用方面的超强能力.通过精彩的实例,来使大家重新认识CSS3文本样式,真心希望大家通过此篇文章,即使不能做到精通CSS3的文本样式的应用,也会做到熟练应用. 实例: 如何利用CSS3制作燃烧的字体? 以前,如果我们网页上想要显示一个燃烧着的文本,大家

Linux 程序设计学习笔记----终端及串口编程基础之概念详解

转载请注明出处,谢谢! linux下的终端及串口的相关概念有: tty,控制台,虚拟终端,串口,console(控制台终端)详解 部分内容整理于网络. 终端/控制台 终端和控制台都不是个人电脑的概念,而是多人共用的小型中型大型计算机上的概念. 1.终端 一台主机,连很多终端,终端为主机提供了人机接口,每个人都通过终端使用主机的资源. 终端有字符哑终端和图形终端两种. 控制台是另一种人机接口, 不通过终端与主机相连, 而是通过显示卡-显示器和键盘接口分别与主机相连, 这是人控制主机的第一人机接口.

CSS3中REM使用详解

在页面中设置字体,我们知道有常见的两种,px 和 em. px 在Web页面制作中,我们一般使用"px"来设置我们的文本,因为他比较稳定和精确.但是这种方法存在一个问题,当用户在浏览器中浏览我们制作的Web页面时,他改变了浏览器的字体大小(虽然一般人不会去改变浏览器字体大小),这时会使用我们的Web页面布局被打破,这时就提出了使用"em"来定义Web页面的字体. em 一般都是body的font-size为基准常用写法: 01 02 03 04 05 06 07 0