CSS入门5-选择器

(注1:如果有问题欢迎留言探讨,一起学习!转载请注明出处,喜欢可以点个赞哦!) (注2:更多内容请查看我的目录。)

1. 选择器简介

大家都参加过学校运动会开幕式吧,或者看过电视节目中的开幕式。不同的队伍有不同的穿着,不同的口号和队形,不同的人有不同的职责,站位也不一样。那么如果你作为开幕式的负责人,你该如何安排呢?让哪个队伍穿什么颜色的衣服,哪个人负责在前面举旗,哪些人喊什么口号,做什么动作。作为负责人,你会如何安排下去呢?比如,你准备了白色,蓝色,绿色的衣服,你得决定哪些人来穿什么颜色的衣服吧,你可能会安排说,一年级学生统一穿蓝色。这里,一年级学生就是你选择的对象,蓝色衣服就是他们的表现样式。同样你也可以说所有男生要穿黑裤子,每班班长要站出来扛大旗,这里你会发号各种指令,让队伍表现的如你所愿,但是每一种指令都会匹配到某个或者某一类人身上,这里你指派的对象就是选择器了。

而对于css来讲,它的选择器就是能帮他找到指定元素的方法。

2. 选择器分类

我们来回忆一下html元素,指的是从开始标签(start tag)到结束标签(end tag)的所有代码,它可以拥有属性和内容。如下所示:

<p>hi</p>
<p>hello</p>
<p>你好</p>
<ul>
    <li>第一行</li>
    <li>第二行</li>
    <li>第三行</li>
    ...
    <li>倒数第二行</li>
    <li>最后一行</li>
</ul>
<div>
    <p>hi</p>
    <p>hello</p>
    <p>你好</p>
</div>

2.1 唯一标识-id选择器

我们想找到如上所述代码的第一行的hi,让它显示成蓝色,也就是准确找到某一个元素给他匹配指定样式有什么办法呢?我们可以给他一个唯一识别的id,就像你入学时学校分配给你的学号,或者你的身份证号,这些是唯一的,只属于你的号码。所以找到某个元素,可以使用id选择器。

id选择器

用法说明:

选择器:#id
示例:#key
作用:选择“id=key”的元素
特征:#开头

用法示例:

<p id="sayHi">hi</p>

找到id并匹配样式的方法如下:

#sayHi {color:blue;}

请记住,id选择器是唯一能准确地找到某个元素的办法

2.2 基础标签类选择-元素选择器和类选择器

现在考虑一个需求,你想要所有的运动员穿运动服,长跑运动员穿白色运动服,田径运动员穿红色运动五,怎么办?喊出所有人的学号吗,显然不可能。我们得为这些人打一个标签。其实html就是这么干的,每一类元素都有自己的标签,就是元素名或者标签名,如果你想操作的这一类元素不是已经拥有某个标签名的元素,你也可以为他们专门定义一个类名。这就是我们的元素选择器和类选择器。

元素选择器:

用法说明:

选择器:element
示例:p
作用:选择所有p元素
特征:标签名

用法示例:

p {color: red;}
div {width: 100px;}

类选择器:

用法说明:

选择器:.class
示例:.val
作用:选择所有class="val"的元素
特征:.开头

用法示例:

<p class="blue">hi</p>
<p class="blue">hello</p>
.blue {color:blue;}

2.3 特征选择-属性选择器

每个人都有一些特征,比如身高。在队伍中,我们往往会让高的人站后面,魁梧的人举旗帜等等。html中的元素也拥有众多的特征-属性。其实id和class也属于属性,只不过他们是特殊的具有标识功能的属性。

属性选择器:

用法说明:

选择器:[attribute]
示例:[target]
作用:选择所有带有target属性的元素
特征:中括号包围
选择器:[attribute=value ]
示例:[target="_blank“]
作用:选择所有target="_blank"属性的元素
特征:中括号包围,=链接
选择器:[attribute~=value ]
示例:[title~="_flower“]
作用:选择所有title属性包含单词“flower”的元素
特征:中括号包围,~=链接,属性中包含独立的单词为value
选择器:[attribute|=value ]
示例:[lang|="en“]
作用:选择所有lang属性以“en”单词开头的元素
特征:中括号包围,|=链接,属性中必须是完整且唯一的单词,或者以-分隔开
选择器:[attribute^=value ] 
示例:[src^="http“]
作用:选择所有src属性以“http”字符串开头的元素
特征:中括号包围,^=链接
选择器:[attribute$=value ]
示例:[src$=".jpg“]
作用:选择所有src属性以“.jpg”字符串结尾的元素
特征:中括号包围,$=链接
选择器:[attribute*=value ]
示例:[src*="abc“]
作用:选择所有src属性包含“abc”字符串的元素
特征:中括号包围,*=链接

用法示例:

<p otitle="sayhi">hi</p>
<p otitle="sayhi">hello</p>
[otitle] {color:blue;}

2.4 隐藏标签类选择-伪类和伪元素

前面提到了基础标签类选择,就是元素选择器,和类选择器,这些都是在html的结构中注明的选择器。css还为我们提供了特殊的选择器,能够帮助我们像类和元素一样去做出更复杂的选择。

2.4.1伪类选择器

效果就像给某些特定的元素添加一个类,当然该元素是已存在的。伪类的种类众多,可以参考这两篇文章CSS选择器深入理解CSS伪类。(因为这节主要是概念内容,从定义和示例去理解记忆即可,或者在使用中多学习留意,不必刻意解读和记忆,也不必做流水账的罗列,大家有兴趣可以多看看文档亦可)。下面这段对于伪类的区分很有意思,大家可以参考一下:

伪类顺序:link-visited-focus-hover-active

1、静态伪类(只应用于超链接)   [注意]visited伪类只能设置字体颜色、边框颜色、outline颜色的样式

:link       未访问
:visited    已访问
a:link{color: red;}
a:visited{color: green;}

2、动态伪类(可应用于任何元素)

:focus     拥有焦点(IE7-不支持)
:hover     鼠标停留(IE6-不支持给<a>以外的其他元素设置伪类)
:active    正被点击(IE7-不支持给<a>以外的其他元素设置伪类)

3、目标伪类:target(IE8-不支持) 匹配锚点对应的目标元素

:target{color: red;}
#test :target{color: red;}//id为test的目标元素

4、UI元素伪类(IE8-不支持)

:enabled    可用状态
:disabled    不可用状态
:checked    选中状态

示例

input:enabled{color: red}
[注意]input和:和enabled之间都不可以有空格

5、结构伪类(IE8-不支持)

E:first-child(IE6-不支持) 父元素的第一个子元素,且该子元素是E,与E:nth-child(1)等同
E:last-child(IE6-不支持) 父元素的最后一个子元素,且该子元素是E,与E:nth-last-child(1)等同
:root 选择文档的根元素,即<html>元素
E F:nth-child(n) 选择父元素的第n个子元素,父元素是E,子元素是F
E F:nth-last-child(n) 选择父元素的倒数第n个子元素,父元素是E,子元素是F
E F:nth-of-type(n) 选择父元素的具有指定类型的第n个子元素,父元素是E,子元素是F
E F:nth-last-of-type(n) 选择父元素的具有指定类型的倒数第n个子元素,父元素是E,子元素是F
E:first-of-type 选择父元素中具有指定类型的第1个子元素,与E:nth-of-type(1)相同
E:last-of-type 选择父元素中具有指定类型的最后1个子元素,与E:nth-last-of-type(1)相同
E:only-child 选择父元素中只包含一个子元素,子元素是E
E:only-of-type 选择父元素中只包含一个同类型的子元素,子元素是E
E:empty 选择没有子元素的元素,而且该元素也不包含任何文本节点
  [注意]n可以是整数(从1开始),也可以是公式,也可以是关键字(even、odd)

示例:

p:first-child    代表的并不是<p>的第一个子元素,而是<p>元素是某元素的第一个子元素
p > i:first-child    匹配所有<p>元素中的第一个<i>元素
p:first-child i 匹配所有作为第一个子元素的<p>元素中的所有<i>
元素
6、:lang 相当于|=属性选择器(IE7-不支持)
p:lang(en) 匹配语言为"en"的<p>

2.4.2 伪元素选择器

效果就像专门创造一个虚拟的元素并选中,每个选择器只能有一个伪元素且必须放在最后。

选择器::first-letter
示例:p:first-letter
作用:选择每个p元素的首字母
选择器::first-line
示例:p:first-line
作用:选择每个p元素的首行
选择器::first-child
示例:p:first-child
作用:选择属于父元素的第一个子元素的每个 <p> 元素。
选择器::before
示例:p:befor
作用:在每个p元素的内容之前插入内容
选择器::after
示例:p:after
作用:在每个p元素的内容之后插入内容
选择器:::selection
示例:::selection
作用:选择被用户选取的元素部分

注意:css3为了区分伪类和伪元素,引入了::来标记伪元素。

2.3 关系选择-社群关系,亲戚关系

2.3.1 社群关系-分组选择器

分组选择器:

选择器:element, element
示例:div, p
作用:选择所有div元素和所有p元素
特征:,连接,可以翻译成“和”

2.3.2 亲戚关系-后代选择器,子代选择器,通用兄弟选择器和相邻兄弟选择器

后代选择器:

选择器:element element
示例:div p
作用:选择所有div元素后代的所有p元素
特征:空格连接,可以翻译成“后代的”

子代选择器:

选择器:element>element
示例:div>p
作用:选择所有div元素子代的所有p元素
特征:">"连接,可以翻译成“子代的”

通用兄弟选择器:

选择器:element~element
示例:div~p
作用:选择所有div元素兄弟的所有p元素
特征:~连接,可以翻译成“兄弟的”

相邻兄弟选择器:

选择器:element+element
示例:div+p
作用:选择所有div元素相邻后一个兄弟的所有p元素
特征:+连接,可以翻译成“相邻后一个兄弟”

2.5 通配选择器

就好像教官在喊:“全体都有”,选择所有的元素

通配选择器:

选择器:*
示例:*
作用:选择所有元素

参考

CSS选择器 CSS Selectors 深入理解伪元素 深入理解CSS伪类 W3school-CSS 选择器参考手册 css属性选择器=,|=,^=,$=,=的区别 (学习笔记) CSS3伪类和伪元素的特性和区别 详解 CSS 属性 - 伪类和伪元素的区别

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏葡萄城控件技术团队

HTML5 & CSS3初学者指南(4) – Canvas使用

介绍 传统的HTML主要用于文本的创建,可以通过<img>标签插入图像,动画的实现则需要第三方插件。在这方面,传统的HTML极其缺乏满足现代网页多媒体需求的能力...

22460
来自专栏进击的君君的前端之路

CSS理解之Float

17540
来自专栏前端技术总结

CSS基础:block,inline和inline-block

css的display属性是前端开发中非常常见的属性,本文简单介绍下其中比较常用的属性值,即block、inline和inline-block。

3.1K1050
来自专栏菜鸟计划

css渲染(二) 文本

一、文本样式 首行缩进  text-indent   首行缩进是将段落的第一行缩进,这是常用的文本格式化效果。一般地,中文写作时开头空两格。[注意]该属性可以...

38070
来自专栏不会写文章的程序员不是好厨师

全栈第一步-CSS基础前言CSS基础总结

作为一名后端狗,也有一个全栈梦。前端工程师第一步,CSS的基础得打好。本文仅用于记录上周学习CSS的过程,文中对于CSS知识点可能存在理解错误之处。

10220
来自专栏听雨堂

在Mapx中设置单个图元的样式

        前几天研究了一下,感觉都快忘了。虽然去啃帮助仍然可以把这些东西啃出来,但有点烦。把记忆的东西零星整理一下: Mapx4不支持具体到图元的样式的指...

19870
来自专栏前端说吧

css布局 - 常规上中下分左右布局的一百种实现方法(更新中...)

左侧nav栏目,要固定也要用fixed。不过固定定位的元素要想高度百分百,可以使用top+bottom对应方位值的拉伸效果:

46220
来自专栏葡萄城控件技术团队

深入CSS,让网页开发少点“坑”

 通常我们在学习CSS的时候,感觉语法很容易掌握,实际应用中却碰到各式各样难以填补的“坑”,为避免大家受到同样的困惑与不解,本文详细讲解了CSS中优先级和Sta...

20490
来自专栏cnblogs

CSS3新特性应用之字体排印

一、插入换行 ~:表示同辈元素之后指定类型的元素,如;elm1 ~ elm2表示,elm1之后的所有elm2元素,且elm1与elm2都是在同一个父级元素。 +...

21770
来自专栏编程

深入CSS,让网页开发少点“坑”

问题:我怎么才能收到你们公众号平台的推送文章呢? 通常我们在学习CSS的时候,感觉语法很容易掌握,实际应用中却碰到各式各样难以填补的“坑”,为避免大家受到同样的...

201100

扫码关注云+社区

领取腾讯云代金券