CSS3 选择器 基本选择器介绍

CSS是一种用于屏幕上渲染html,xml等一种语言,CSS主要是在相应的元素中应用样式,来渲染相对应用的元素,那么这样我们选择相应的元素就很重要了,如何选择对应的元素,此时就需要我们所说的选择器。选择器主要是用来确定html的树形结构中的DOM元素节点。我把CSS选择器分开成三部分,第一部分是我们常用的部分,我把他叫做基本选择器;第二部分我把他称作是属性选择器,第三部分我把他称作伪类选择器,这一部分也是最难理解和掌握的部分,今天我们先来看第一部分——基本选择器。我们先来看一个常用的选择器列表图

选择器例子例子描述CSS
.class.intro选择 class="intro" 的所有元素。1
#id#firstname选择 id="firstname" 的所有元素。1
**选择所有元素。2
elementp选择所有 <p> 元素。1
element,elementdiv,p选择所有 <div> 元素和所有 <p> 元素。1
element elementdiv p选择 <div> 元素内部的所有 <p> 元素。1
element>elementdiv>p选择父元素为 <div> 元素的所有 <p> 元素。2
element+elementdiv+p选择紧接在 <div> 元素之后的所有 <p> 元素。2
[attribute][target]选择带有 target 属性所有元素。2
[attribute=value][target=_blank]选择 target="_blank" 的所有元素。2
[attribute~=value][title~=flower]选择 title 属性包含单词 "flower" 的所有元素。2
[attribute|=value][lang|=en]选择 lang 属性值以 "en" 开头的所有元素。2
:linka:link选择所有未被访问的链接。1
:visiteda:visited选择所有已被访问的链接。1
:activea:active选择活动链接。1
:hovera:hover选择鼠标指针位于其上的链接。1
:focusinput:focus选择获得焦点的 input 元素。2
:first-letterp:first-letter选择每个 <p> 元素的首字母。1
:first-linep:first-line选择每个 <p> 元素的首行。1
:first-childp:first-child选择属于父元素的第一个子元素的每个 <p> 元素。2
:beforep:before在每个 <p> 元素的内容之前插入内容。2
:afterp:after在每个 <p> 元素的内容之后插入内容。2
:lang(language)p:lang(it)选择带有以 "it" 开头的 lang 属性值的每个 <p> 元素。2
element1~element2p~ul选择前面有 <p> 元素的每个 <ul> 元素。3
[attribute^=value]a[src^="https"]选择其 src 属性值以 "https" 开头的每个 <a> 元素。3
[attribute$=value]a[src$=".pdf"]选择其 src 属性以 ".pdf" 结尾的所有 <a> 元素。3
[attribute*=value]a[src*="abc"]选择其 src 属性中包含 "abc" 子串的每个 <a> 元素。3
:first-of-typep:first-of-type选择属于其父元素的首个 <p> 元素的每个 <p> 元素。3
:last-of-typep:last-of-type选择属于其父元素的最后 <p> 元素的每个 <p> 元素。3
:only-of-typep:only-of-type选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。3
:only-childp:only-child选择属于其父元素的唯一子元素的每个 <p> 元素。3
:nth-child(n)p:nth-child(2)选择属于其父元素的第二个子元素的每个 <p> 元素。3
:nth-last-child(n)p:nth-last-child(2)同上,从最后一个子元素开始计数。3
:nth-of-type(n)p:nth-of-type(2)选择属于其父元素第二个 <p> 元素的每个 <p> 元素。3
:nth-last-of-type(n)p:nth-last-of-type(2)同上,但是从最后一个子元素开始计数。3
:last-childp:last-child选择属于其父元素最后一个子元素每个 <p> 元素。3
:root:root选择文档的根元素。3
:emptyp:empty选择没有子元素的每个 <p> 元素(包括文本节点)。3
:target#news:target选择当前活动的 #news 元素。3
:enabledinput:enabled选择每个启用的 <input> 元素。3
:disabledinput:disabled选择每个禁用的 <input> 元素3
:checkedinput:checked选择每个被选中的 <input> 元素。3
:not(selector):not(p)选择非 <p> 元素的每个元素。3
::selection::selection选择被用户选取的元素部分。3

下面我们先看看上表中基本的选择器的使用方法和其所起的作用,为了更好的说明问题,先创建一个简单的DOM结构,如下:

复制代码
代码如下:

<div class="demo">
<ul class="clearfix">
<li id="first" class="first">1</li>
<li class="active important">2</li>
<li class="important items">3</li>
<li class="important">4</li>
<li class="items">5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li id="last" class="last">10</li>
</ul>
</div>


给这个demo加上一些样式,让他好看一点

复制代码
代码如下:

.demo {
width: 300px;
border: 1px solid #ccc;
padding: 10px;
}
li {
float: left;
height: 20px;
line-height: 20px;
width: 20px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
text-align: center;
background: #f36;
color: green;
margin-right: 5px;
}


初步效果如下所示:

 

一、通配符选择器(*)
通配符选择器是用来选择所有元素,,也可以选择某个元素下的所有元素。如:

复制代码
代码如下:

*{
marigin: 0;
padding: 0;
}


上面代码大家在reset样式文件中看到的肯定不少,他所表示的是,所有元素的margin和padding都设置为0,另外一种就是选择某个元素下的所有元素:

复制代码
代码如下:

.demo * {border:1px solid blue;}


效果如下;

 

从上面的效果图看,只要是div.demo下的元素边框都加上了新的样式。所有浏览器支持通配符选择器。

二、元素选择器(E)
元素选择器,是css选择器中最常见而且最基本的选择器。元素选择器其实就是文档的元素,如html,body,p,div等等,比如我们这个demo:中元素包括了div,ul,li等。

复制代码
代码如下:
li {background-color: grey;color: orange;}


上在表示选择页面的li元素,并设置了背景色和前景色,效果如下:

 

所有浏览器支持元素选择器(E)。

三、类选择器(.className)
类选择器是以一独立于文档元素的方式来指定样式,使用类选择器之前需要在html元素上定义类名,换句话说需要保证类名在html标记中存在,这样才能选择类,如:

<li class="active important items">2</li>
共中“active,important, items”就是我们以类给li加上一个类名,以便类选择器能正常工作,从而更好的将类选择器的样式与元素相关联。

.important {font-weight: bold; color: yellow;}
上面代码表示是给有important类名的元素加上一个“字体为粗体,颜色为黄色”的样式,如

 

类选择器还可以结合元素选择器来使用,比如说,你文档中有好多个元素使用了类名“items”,但你只想在p元素这个类名上修改样式,那么你可以这样进行选择并加上相应的样式:
p.items {color: red;}
上面代码只会匹配class 属性包含important 的所有p 元素,但其他任何类型的元素都不匹配,包括有“items”这个类名的元素,上面也说过了“p.items”只会对p元素并且是其有一个类名叫“items”。不符合这两个条件的都不会被选择。

类选择器还有可以具备多类名,上面我们也看到了,我们li元素中同时有两个或多少类名,其中他们以空格隔开,那么选择器也可以使用多类连接在一起,如:

复制代码
代码如下:

.important {font-weight: bold;}
.active {color: green;background: lime;}
.items {color: #fff;background: #000;}
.important.items {background:#ccc;}
.first.last {color: blue;}


正如上面的代码所示,".important.items"这个选择器只对元素中同时包含了"important"和"items"两个类才能起作用,如图所示:

 

 

有一点大家需要注意,如果一个多类选择器包含的类名中其中有一个不存在,那么这个选择器将无法找到相匹配的元素 比如说下在这句代码,他就无法到找相对应的的元素标签,因为我们列表中只有一个li.first和一个li.last,不存在有一个叫li.first.last的列表项:

复制代码
代码如下:

.first.last {color: blue;}


所有浏览器都支持类选择器,但多类选择器(.className1.className2)不被ie6支持。

四、id选择器(#ID)
ID选择器和上面说的类选择器是很相似的,在使用ID选择器之前也需要先在html文档中加注ID名称,这样在样式选择器中才能找到相对应的元素,不同的是ID选择器是一个页面中唯一的值,我们在类使用时是在相对应的类名前加上一个“.”号(.className)而id选择器是在名称前使用"#"如(#id),

复制代码
代码如下:

#first {background: lime;color: #000;}
#last {background: #000;color: lime;}


上在的代码就是选择了id为"first"和"last"的列表项,其效果如下

 

 

ID选择器有几个地方需要特别注意的,第一:一个文档中一个id选择器只充许使用一次,因为id在页面中是唯一的;第二,id选择器不能像类选择器一样多个合并使用,一个元素只能命名一个id名;第三,可以在不同的文档中使用相同的id名,比如说在“test.html”中给h1定了“#important”,也可以给“test1.html”中定义p的id为"#important",但前提是不管在test.html还是test1.html中只充许有一个id叫"#important"的存在。

所有浏览器都支持ID选择器。

那么什么时候采用id命名?什么时候采用类命名呢?我个人认为就是关键的一点就是具有唯一性使用id选择器;公用的,类似的使用类选择器。使用这两个选择器时,最好区别大小写。

五、后代选择器(E F)

后代选择器也被称作包含选择器,所起作用就是可以选择某元素的后代元素,比如说:E F,前面E为祖先元素,F为后代元素,所表达的意思就是选择了E元素的所有后代F元素,请注意他们之间需要一个空格隔开。这里F不管是E元素的子元素或者是孙元素或者是更深层次的关系,都将被选中,换句话说,不论F在E中有多少层关系,都将被选中:

.demo li {color: blue;}
上面表示的是,选中div.demo中所有的li元素

 

所有浏览器都支的后代选择器。

六、子元素选择器(E>F)

子元素选择器只能选择某元素的子元素,其中E为父元素,而F为子元素,其中E>F所表示的是选择了E元素下的所有子元素F。这和后代选择器(E F)不一样,在后代选择器中F是E的后代元素,而子元素选择器E > F,其中F仅仅是E的子元素而以。
ul > li {background: green;color: yellow;}
上在代码表示选择ul下的所有子元素li。如:

 

IE6不支持子元素选择器。

七、相邻兄弟元素选择器(E + F)

相邻兄弟选择器可以选择紧接在另一元素后的元素,而且他们具有一个相同的父元素,换句话说,EF两元素具有一个相同的父元素,而且F元素在E元素后面,而且相邻,这样我们就可以使用相邻兄弟元素选择器来选择F元素。

复制代码
代码如下:
li + li {background: green;color: yellow; border: 1px solid #ccc;}


上面代码表示选择li的相邻元素li,我们这里一共有十个li,那么上面的代码选择了从第2个li到 10 个li,一共九个,请看效果:

 

 

因为上面的li+li其中第二li是第一li的相邻元素,第三个又是第二个相邻元素,因此第三个也被选择,依此类推,所以后面九个li都被选中了,如果我们换过一种方式来看,可能会更好的理解一点:

复制代码
代码如下:

.active + li {background: green;color: yellow; border: 1px solid #ccc;}


按照前面所讲的知识,这句代码很明显选择了li.active后面相邻的li元素,注意了和li.active后面相邻的元素仅只有一个的。如图:

 

 

IE6不支持这个选择器

八、通用兄弟选择器(E 〜 F)

通用兄弟元素选择器是CSS3新增加一种选择器,这种选择器将选择某元素后面的所有兄弟元素,他们也和相邻兄弟元素类似,需要在同一个父元素之中,换句话说,E和F元素是属于同一父元素之内,并且F元素在E元素之后,那么E ~ F 选择器将选择中所有E元素后面的F元素。比如下面的代码:

复制代码
代码如下:
.active ~ li {background: green;color: yellow; border: 1px solid #ccc;}


上面的代码所表示的是,选择中了li.active 元素后面的所有兄弟元素li,如图所示:

 

 

通用兄弟选择器和相邻兄弟选择器极其相似,只不过,相邻兄弟选择器仅选择是元素的仅与其相邻的后面元素(选中的仅一个元素);而通用兄弟元素选择器,选中的是元素相邻的后面兄弟元素,这样说起来可能会有迷糊,大家可以仔细看看其相邻兄弟的效果图。

IE6不支持这种选择器的用法。

九、群组选择器(selector1,selector2,...,selectorN)

群组选择器是将具有相同样式的元素分组在一起,每个选择器之间使用逗号“,”隔开,如上面所示selector1,selector2,...,selectorN。这个逗号告诉浏览器,规则中包含多个不同的选择器,如果不有这个逗号,那么所表达的意就完全不同了,省去逗号就成了我们前面所说的后代选择器,这一点大家在使用中千万要小心加小心。我们来看一个简单的例子:

 

复制代码
代码如下:
.first, .last {background: green;color: yellow; border: 1px solid #ccc;}


因为li.first和li.last具有相同的样式效果,所以我们把他们写到一个组里来:

 

 

所有浏览器都支持群组选择器。

上面九种选择器是CSS3中的基本选择器,而我们最常用的是元素选择器、类选择器、ID选择器、后代选择器、群组选择器,同时大家可以在实际应用中把这些选择器结合起来使用,达到目的就行了。那么关于CSS3选择器的第一部分——基本选择器就介绍到这里,有点简单,希望对初次接触CSS的同学有所帮助,下节将介绍CSS3选择器的第二部分——属性选择器,感兴趣的朋友请观注本站的更新。

如需转载烦请注明出处:W3CPLUS

 

http://www.jb51.net/css/41450.html

转载于:https://www.cnblogs.com/losesea/p/4394338.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/459511.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

逆水寒7月19服务器维护,逆水寒7月19日更新维护公告 更新内容汇总

3. 战斗体验优化&#xff1a;1) 优化了动作模式下Alt数字快捷键选择队友的操作&#xff0c;我们已经安排大量策划专注使用3D模式和动作模式&#xff0c;后续将继续优化部分技能在3D模式下的易用性。2) 大幅提升部分日常副本的可视距离&#xff0c;现在可看到更远处的…

Linux下ejabberd安装配置

为什么80%的码农都做不了架构师&#xff1f;>>> Linux下ejabberd安装配置 1、下载Ejabberd安装包 wget http://www.process-one.net/downloads/ejabberd/2.1.13/ejabberd-2.1.13-linux-x86_64-installer.run 也可以在直接在官网上下载 ejabberd-15.11-linux-x86…

unity5, custom PBS shader

unity5中引入了基于物理着色(PBS)的Standard shader。由于这种着色器通过调节参数和贴图可逼真模拟各种硬质表面&#xff0c;所以不必再像unity4时代那样需要对各种质感材质单独编写着色器&#xff0c;而且能得到更好的效果(参考&#xff1a;http://docs.unity3d.com/Manual/sh…

win服务器文件夹权限设置密码,win服务器 文件夹权限设置

win服务器 文件夹权限设置 内容精选换一换开发过程中&#xff0c;您有任何问题可以在github上提交issue&#xff0c;或者在华为云对象存储服务论坛中发帖求助。接口参考文档详细介绍了每个接口的参数和使用方法。在OBS中&#xff0c;用户操作的基本数据单元是对象。OBS PHP SDK…

Java定时任务以及ScheduledThreadPoolExecutor需要注意的问题

Java提供Timer和ScheduledThreadPoolExecutor两个类实现定时任务&#xff0c;其中Timer简单易用&#xff0c;但所有任务都是由同一个线程来调度&#xff0c;任务串行执行&#xff0c;任务之间存在互相干扰&#xff0c;一是前一个任务的延迟会导致后面的任务延迟&#xff0c;二是…

重启php-fpm的方法

ps -ef|grep "php-fpm: master process"|grep -v grep|awk {print $2}|xargs kill -USR2 优点&#xff1a;简单&#xff0c;无需写脚本。无需依赖其他工具缺点&#xff1a;不能区分池子&#xff0c;不够精准转载于:https://www.cnblogs.com/yaoyi/p/4398636.html

手机文件管理ftp服务器,ftp工具手机版(ftp文件传输管理工具)V1.0.2 手机版

ftp工具手机版(ftp文件传输管理工具)是一款非常实用的ftp文件管理应用工具。主要作用是将手机ftp上的文件数据快速传输到电脑上&#xff0c;或者将电脑上的文件传输到手机上&#xff0c;实现双向传输&#xff0c;并且传输速度十分快&#xff0c;ftp工具是一款很专业的传输软件&…

Android 获得ImageView中Image的绘制大小

2019独角兽企业重金招聘Python工程师标准>>> ImageView在显示图片的时候&#xff0c;受限于屏幕大小&#xff0c;和图片宽高。通常图片是被缩放过&#xff0c;且不是宽和高都充满ImageView的。 此时&#xff0c;我们如何获得Image被实际绘制的宽高呢&#xff1f; //…

Quartz2D指定显示范围

在qq中&#xff0c;可以看到头像是圆形显示的&#xff0c;通过CGContextClip可以设置 CGContextRef contextUIGraphicsGetCurrentContext();CGContextAddEllipseInRect(context, CGRectMake(100, 100, 100, 100));CGContextClip(context);UIImage *img[UIImage imageNamed:&quo…

当前系统时间与服务器时间,操作系统时间和服务器时间

操作系统时间和服务器时间 内容精选换一换文章目录计算机操作系统(一)1 操作系统的目标和作用1.1 操作系统的目标 1.2 操作系统的目标 2 操作系统的发展历程2.1 未配置操作系统的计算机2.2 单道批处理系统2.3 多道批处理系统2.4 分时系统2.5 实时系统 3 操作系统的基本特性3.1 …

【学神-RHEL7】1-3-Linux基本命令和配置服务器来电后自动开机

本节所讲内容&#xff1a;Linux终端介绍Shell提示符Bash Shell基本语法基本命令的使用&#xff1a;ls、pwd、cd查看系统和BIOS硬件时间Linux如何获得帮助Linux关机命令&#xff1a;shutdow、init等Linux 7个启动级别创建一个方便快捷实验环境快照设置服务器在来电后自动开机Lin…

服务器节点信息管理,华为云管理节点服务器

华为云管理节点服务器 内容精选换一换不想看文字&#xff0c;请直接戳视频链接。可以不做备案吗&#xff1f;根据《互联网信息服务管理办法》等相关规定&#xff0c;使用中国大陆节点服务器开办的网站&#xff0c;必须先办理网站备案&#xff0c;备案成功并获取通信管理局下发的…

C/C++心得-结构体

先说句题外话&#xff0c;个人认为&#xff0c;基本上所有的高级语言被设计出来的最终目的是降低软件开发难度&#xff0c;提升软件开发人员素质和团队协作能力&#xff0c;降低软件维护的难度。在学习语言的时候&#xff0c;可以从这么方面来推测各种语言语法设计的原因&#…

全国小学四则运算1.0

程序&#xff1a;全国小学四则运算1.0 源代码&#xff1a; import javax.swing.*; import java.awt.*; import java.awt.event.*; //一开始的界面 public class Menu extends JFrame implements ActionListener{JButton enter;public Menu(){super("小学生四则运算大考验&…

Chrome开发者工具详解

作为一名前端开发者&#xff0c;打交道最多的可能是和浏览器。市面上各种浏览器多不胜数&#xff0c;主流的有Chrome&#xff0c;Firefox&#xff0c;Safari&#xff0c;IE&#xff0c;Opera&#xff0c;非主流的如360&#xff0c;遨游&#xff0c;QQ浏览器&#xff0c;搜狗浏览…

SRAM与SDRAM的区别

http://www.cnblogs.com/spartan/archive/2011/05/06/2038747.html SDRAM SDRAM(Synchronous Dynamic Random Access Memory)同步动态随机存取存储器&#xff0c;同步是指Memory工作需要步时钟&#xff0c;内部的命令的发送与数据的传输都以它为基准&#xff1b;动态是指存储阵…

redis学习笔记-安装与入门

Linux下安装redis mkdir /usr/local/redis && cd /usr/local/redis 下载&#xff1a;wget http://download.redis.io/releases/redis-3.0.5.tar.gz 解压&#xff1a;tar xzf redis-3.0.5.tar.gz 安装到指定目录&#xff1a; cd redis-3.0.5 make PREFIX/usr/local/red…

python多列排序

python的sort()和sorted()函数可以进行多列排序。在一个文本或者列表有多列时&#xff0c;这是一个很好用的技巧。 首先&#xff0c;看一下待排序的数据 这是一个csv文件&#xff0c;它有6列&#xff0c;我们需要首先对第一列排序&#xff0c;再对第六列排序 46896961,19210048…

asp.net下用js实现弹出子窗口选定值并返回

对应上一篇博客代码&#xff1a; 父页面&#xff1a; 1 <head runat"server">2 <meta http-equiv"X-UA-Compatible" content"IE9" >3 <title></title>4 <script type"text/javascript">5 …

靠能力赚大钱,是最最可笑的谎言

很多人其实到现在也没弄明白他们是怎么赚钱的&#xff0c;很多人都会把自己成功归结为能力的结果&#xff0c;事实上这个是最大的可悲……靠能力赚钱&#xff0c;是一个弥天大谎&#xff01;我自己一直在反思这些年里的很多事情&#xff0c;突然发现所有的成功失败&#xff0c;…