CSS(CSS3)选择器(1)

这篇文章主要用于存储CSS以及CSS3的选择器部分知识,以便日后查阅及记忆.

该内容分为两部分,第一部分为css选择器的一些基本知识。第二部分为CSS3新增加的选择器。

在开始之前,先简单介绍一下选择器,选择器的作用就是定位我们想要样式化的网页HTML元素。选择器可以分为以下几种类型。

1、简单选择器,通过元素类型,class或id匹配一个或多个元素。

2、属性选择器,通过属性/属性值 匹配一个或多个元素。

3、伪类,匹配处于确定状态的一个或多个元素。(比如鼠标指针悬停的元素、当前被选中或未被选中的复选框、元素是DOM树中一父节点的第一个子节点等)

4、伪元素,匹配处于相关的确定位置的一个或多个元素。(例如每个段落的第一个字,或者某个元素之前生成的内容)

5、组合器,这里不仅仅是选择器本身,还有以有效的方式组合两个或者更多的选择器用于非常特定的选择的方法。

6、多用选择器,这些也不是单独的选择器。这个思路是将以逗号分隔开的多个选择器放在一个CSS规则下面, 以将一组声明应用于由这些选择器选择的所有元素。

那么下面就具体的选择器来一一做一定的解释,有不足的地方还希望不吝赐教。嘿嘿。

一.基本选择器:

     1:*,通配符,匹配所有元素。

*{
  padding:0;
  margin:0;    
}

/*个人建议,请不要在你的CSS代码中出现通配符,通配符(*)是一种效率极低甚至会有在大型网站中使用导致页面渲染变慢的可能。所以,请尽可能的不要使用。*/

    2:#id,id选择器,匹配所有id属性为"id"的元素,id属性具有唯一性。

#text {
  font-size: 16px;
}
/*一个ID名称在文件中必须是唯一的,若是ID名称重复,则可能会出现不可预知的情况,所以一定要避免ID名称的重复*/

    3:.class,class选择器,匹配所有class属性中包含"class"的元素。文档中的多个元素可以具有相同的类名,而单个元素可以有多个类名(以空格分开多个类名的形式书写)

.demo{
    width: 100px;
    height: 100px;
    background: red;
}

    4:E(element),标签选择器,匹配所有使用E标签的元素。

span{
    color: red;
    background: pink;
    font-style: 20px;
}

二.多元素组合选择器:

    5:E,F,多元素选择器,匹配所有E元素和F元素,E和F之间用逗号(,)分隔。

span,p,div{
    color: red;
    background: pink;
    font-style: 20px;
}

    6:E F,后代元素选择器,匹配所有属于E元素后代的F元素,E和F之间用空格分隔。

.demo .text{
    color: gray;
}

    7:E > F,子元素选择器,匹配所有E元素的子元素F。

.demo>.text{
    color: gray;
}

    8:E + F,毗邻元素选择器,匹配所有紧随E元素之后的同级元素F。

.demo + .text{
    color: gray;
}

三.属性选择器:

    9:E[att],匹配所有具有att属性的E元素,不考虑它的值。(E在此处可以省略,如“[checked]”,下同)

[title]{
    color:red;
}

    10:E[att=val],匹配所有att属性等于"val"的元素。

[title=name]{
    border:5px solid blue;
}
img[title=bgimg]{
    width:100px;
    height:100px;        
}

    11:E[att~=val],匹配所有att属性具有多个空格分隔的值、其中一个值等于"val"的E元素。

[title~=hello]{
    color:red;
} 

    12:E[att |= val],匹配所有att属性具有多个连字号分隔(hyphen-separated)的值、其中一个值以"val"开头的E元素。(主要用于lang属性,比如"en"、"en-us"、"en-gb"等等)

[lang|=en] {
    color:red;
}

四.伪类选择器:

    13:E:first-child,匹配父元素的第一个子元素。

.demo:first-child{
    color: pink;
}

    14:E:link,匹配所有未被点击的链接。

.demo:link{
    font-weight: 900;
}

    15:E:visited,匹配所有已被点击的链接。

.demo:visited{
    font-weight: 900;
}

    16:E:active,匹配鼠标已经在其上按下,还没有释放的E元素。

.demo:active{
    font-weight: 900;
}

    17:E:hover,匹配鼠标悬停其上的E元素。

.demo:hover{
    color: orange;
    font-weight:900;      
}

    18:E:focus,匹配获得当前焦点的E元素。

input:focus{
    color:red;
}

    19:E:lang(c),匹配lang属性等于c的元素。

html:lang(zh){
    color:lime;
    background:red;
}
:lang(en) > span{
    color:pink;
}

五.伪元素选择器:

    20:E:first-line,匹配E元素的第一行。

.demo:first-line{
    color:red;
}

    21:E:first-letter,匹配E元素的第一个字母。

.demo:first-letter{
    font-weight: border;
}

    22:E:before,在E元素之前插入生成的内容。

.num:before{
  content:"(" attr(href) ")",
          
}

    23:E:after,在E元素之后插入生成的内容。

.clearfix:after {
    content: "";
    display: block;
    height: 0;
    clear: both;
}
/*after清除浮动,这里只对after和before的选择器写法做一个简单说明,并不具体涉及属性及其用法*/

最后想说,这些东西只是简单的罗列和解释,算是方便在使用的时候快速查找,如果想要更深入的了解还需要的更多的练习和代码量,就算是最基本的选择器知识,其实也要比这些多得多。只是还有很多用处并不是特别多,比如上面的E:lang(c),E:visited,E:active等,还有很多未写在文章内的,如果想要更深入的学习,大家可以去下面的相关链接查看。

参考:css选择器笔记30个你必须熟记的css选择器MDN-docs-选择器介绍,HTML5和CSS3权威指南(第3版下册-庐陵牛)第十九章,before和after伪元素的用法

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端布道

Angular开发实践(七): 跨平台操作DOM及渲染器Renderer2

在《Angular开发实践(六):服务端渲染》这篇文章的最后,我们也提到了在服务端渲染中需要牢记的几件事件,其中就包括不要使用window、 document、...

4039
来自专栏向治洪

android之View绘制

Android系统的视图结构的设计也采用了组合模式,即View作为所有图形的基类,Viewgroup对View继承扩展为视图容器类,由此就得到了视图部分的基本...

1609
来自专栏GreenLeaves

JavaScript之Style属性学习

当CSS使用伪类开始侵入DOM和JavaSCript所控制着的行为层时,DOM和JavaScript也使用他们的一系列样式去控制表现层,这篇随笔主要说的就是利用...

2198
来自专栏HTML5学堂

一个setInterval的小问题

一个setInterval的小问题 HTML5学堂:在制作页面动画效果中,很多情况都会用到定时器,setInterval则是计时器的一种,可按照指定的周期,不停...

3589
来自专栏编程思想之路

Android6.0源码分析之View(二)--measure Android6.0源码分析之View(一)

接着上一篇 Android6.0源码分析之View(一) 紧接着来学习view的measure,(注,开始写博客之后,很明显我的学习效率高多了,研究了俩星期硬是...

2689
来自专栏有趣的django

21.jQuery

简介 jQuery是一个快速、简洁的JavaScript框架,jQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情...

3429
来自专栏程序员的知识天地

H5学习从0到1-H5的块标签的使用(9)

703
来自专栏smy

css控制标题长度超出部分显示省略号

width: 50px; overflow:hidden;white-space:nowrap; text-overflow:ellipsis; 设置或...

34012
来自专栏HTML5学堂

详析设置样式的方法

上一期文章当中,小编与大家详细的总结了获取标签的方法,能够便于大家灵活的去获取网页中的标签。如果想具体了解详析获取标签,可以回复“获取标签”到“HTML5学堂”...

3227
来自专栏WebDeveloper

使用css3属性处理单词的换行和断词

1413

扫码关注云+社区

领取腾讯云代金券