欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

css3笔记系列-3.css中的各种选择器详解,不看后悔系列

程序员文章站 2022-04-23 21:08:08
最详细的css3选择器解析 选择器是什么? 比较官方的解释:在 CSS 中,选择器是一种模式,用于选择需要添加样式的元素。 最常见的 CSS 选择器是元素选择器。换句话说,文档的元素就是最基本的选择器。 看代码,元素选择器就是这个: h1作为一个元素标签,是最基本的选择器,这样可以对h1标签设置属性 ......



 

最详细的css3选择器解析

 

选择器是什么?

  比较官方的解释:在 css 中,选择器是一种模式,用于选择需要添加样式的元素。

       最常见的 css 选择器是元素选择器。换句话说,文档的元素就是最基本的选择器。

       看代码,元素选择器就是这个:

       css3笔记系列-3.css中的各种选择器详解,不看后悔系列

      h1作为一个元素标签,是最基本的选择器,这样可以对h1标签设置属性。

选择器有哪些?

  常见的选择器:元素选择器,类选择器,id选择器,属性选择器,派生选择器。

  本文的思路就是先讲讲最常用的选择器,再讲讲用得比较少的选择器。

  如果你觉得能学到不少知识,点个关注哦,精彩美文第一时间为你奉上。

css3笔记系列-3.css中的各种选择器详解,不看后悔系列

 

选择器-元素选择器

  元素选择器,最常用的选择器之一,常用于html标签,p标签,h1-h6标签等的样式设定。具体怎么用就不详细介绍了,

上面开头已经举例说明了。在 w3c 标准中,元素选择器又称为类型选择器(type selector)。“类型选择器匹配文档语言

元素类型的名称。类型选择器匹配文档树中该元素类型的每一个实例。”

选择器-类选择器
  类选择器与元素选择器看起来很类似,但是还是有一些区别。类选择器允许以一种独立于文档元素的方式来指定样式

该选择器可以单独使用,也可以与其他元素结合使用。
提示:只有适当地标记文档后才能使用这些选择器,所以使用这种选择器通常需要先做一些构想和计划。要应用样式而不考

虑具体设计的元素,最常用的方法就是使用类选择器。类选择器怎么用,如下图:

        css3笔记系列-3.css中的各种选择器详解,不看后悔系列

  图中的body标签里面,有一个div,div有一个class属性,这就是所谓的类,但是这个类不同于java语言的类。然后我们

需要对这个div设置一些样式,看style里面,.select这个就是类选择器了,类选择器需要配合标签的class属性一起使用。
类选择器可以结合元素选择器来使用。这种选择器称为结合元素选择器。

  这里就将与类选择器相关的选择器详细介绍一下。
  例如:

        css3笔记系列-3.css中的各种选择器详解,不看后悔系列

  选择器会匹配class属性包含select的所有p标签,所以选择器p.select解释为:“其class属性值为select的所有段落”。
  还有一个多类选择器。怎么用呢?看下面

       css3笔记系列-3.css中的各种选择器详解,不看后悔系列

  具体是什么意思呢?就是说:本来我的一个select的样式是够用的,但是突然加了需求,需要再加一个字体的大小,

但是只想p标签使用,并且select又不是一个标签在使用,waring也不是只有一个p标签使用,这时候,多类选择器就出

现了,其实标签的style属性也可以,但是不推荐这么干。使用多类选择器之后,这个标签就同时结合了这两个选择器里

面的样式属性。class里面的类的先后顺序没关系。

选择器-id选择器

  在某些方面,id选择器类似于类选择器,但是也有一些重要的区别。语法:类选择器是在名称前面加一个.   id选择

器在前面加上一个#
  用法:类选择器可以多次使用,id选择器只能使用在一个元素标签上面,并且只能使用一次,不能重复使用(在一个

文档里面),原因是在一个文档里面,id是唯一的。

  示例:

       css3笔记系列-3.css中的各种选择器详解,不看后悔系列

       css3笔记系列-3.css中的各种选择器详解,不看后悔系列

  这样就为id为test的标签h1设置了字体颜色属性
  注意事项:

  1. id选择器在一个文档中只能使用一次
  2. 不能使用id词列表(意思是不能使用类选择器那样的结合,因为id属性不允许有一空格分隔的词列表)
  3. 一般情况下id选择器与类选择器都是区分大小写的。

 

选择器-属性选择器

  属性选择器相对上面两种选择器来说用得比较少,也很简单,来看看吧。

  属性选择器可以根据元素的属性以及属性值来选择元素。

  • 简单属性选择
    如果希望选择有某个属性的的元素,而不论属性值是什么,可以使用简单属性选择器

    如:

     

    css3笔记系列-3.css中的各种选择器详解,不看后悔系列

  意思就是说将所有带有href属性的元素设置字体属性为“微软雅黑”

*{ 
     font-size:12px; 
 }

 

  这是通配符选择器,css系列第一篇有说明!

  示例中,*可以换成标签名,如

       css3笔记系列-3.css中的各种选择器详解,不看后悔系列

  意思是设置所有的name属性的input标签的字体大小为20px。

  • 根据具体属性值选择

    除了选择拥有某些属性的元素外,还可以选择某些拥有特定属性值的元素。

    示例

    css3笔记系列-3.css中的各种选择器详解,不看后悔系列

   意思是选择input标签中,name属性为username的input标签,再为它设置样式。

  • 属性与属性值完全匹配

        属性与属性值完全匹配与上面的根据具体值属性有什么区别呢?还记得我们之前在类选择器里面讲解的多类选择器吧。

当我们要选择这类标签的时候,就需要属性与属性值完全匹配了,当然这只是一个示例。
        css3笔记系列-3.css中的各种选择器详解,不看后悔系列

  这里面,如果我们用这个选择器来代替是否可行?

       css3笔记系列-3.css中的各种选择器详解,不看后悔系列

  答案是不行的,这时候我们需要知道属性与属性值完全匹配了,看看下面

      css3笔记系列-3.css中的各种选择器详解,不看后悔系列

        这样就可以精准的找到这个p标签了,并且可以为他设置一些样式,其实这样看,你是不是觉得这个没有什么用?

其实这是有实际作用的,比如说在动态改变这个元素的样式,是很方便的。

属性选择器这一块还有一些需要了解的,但是不是很常用,这里就只解释一下怎么个用法就行了。

 

选择器 描述
[attribute] 用于选取带有指定属性的元素。
[attribute=value] 用于选取带有指定属性和值的元素。
[attribute~=value] 用于选取属性值中包含指定词汇的元素。
[attribute|=value] 用于选取带有以指定值开头的属性值的元素,该值必须是整个单词。
[attribute^=value] 匹配属性值以指定值开头的每个元素。
[attribute$=value] 匹配属性值以指定值结尾的每个元素。
[attribute*=value] 匹配属性值中包含指定值的每个元素。


选择器-后代选择器

   后代选择器又称为包含选择器,后代选择器可以选择作为某元素后代的元素

  • 根据上下文选择元素

     

    css3笔记系列-3.css中的各种选择器详解,不看后悔系列

 

  以上代码的意思是选择test里面的所有的p标签,然后将他们的背景颜色改成红色。是不是很简单,效率高。

如果你一个一个的设置p标签也是可以的,但是效率太低了,人工效率哈。

 

选择器-子元素选择器

  子元素选择器与后代选择器相比,子元素选择器只能选择作为元素子元素的元素

       css3笔记系列-3.css中的各种选择器详解,不看后悔系列

  这里的代码,就只能将class为test里面的子元素h1的背景变成红色,class为test2,以及class为test1

里面的都不是class为test的子元素,这一点要注意。

  • 结合后代选择器和子选择器
    后代选择器还可以与子选择器共同使用

     

    css3笔记系列-3.css中的各种选择器详解,不看后悔系列

    这样的效果是在h1下面的a标签的下划线会被取消掉

选择器-相邻兄弟选择器

  如果需要选择紧接在另一个元素后的元素,而二者有相同的元素,可以使用相邻兄弟选择器。
  示例:

       css3笔记系列-3.css中的各种选择器详解,不看后悔系列

  这个选择器读作“选择紧接在div1后面的h1标签,并且是一个”,这个选择器也一样,可以和前面的子元素选择器一起使用。
伪类css伪类是用于向某些选择器添加特殊的效果。什么意思呢?看看代码你就知道了。

       css3笔记系列-3.css中的各种选择器详解,不看后悔系列

  这段代码是说当鼠标移动到p标签的时候,给p标签添加一些样式。类似的还有很多。

a:link {color: #ff0000}        /* 未访问的链接 */
a:visited {color: #00ff00}    /* 已访问的链接 */
a:hover {color: #ff00ff}    /* 鼠标移动到链接上 */
a:active {color: #0000ff}    /* 选定的链接 */

 


        具体的用法视情况而定。

  这期的选择器笔记就到这里了,如果你觉得不错,请关注我哦!
css3笔记系列-3.css中的各种选择器详解,不看后悔系列

  ●css3系列-2.css中常见的样式属性和值

  ●css3系列-1.css基础知识入门

 

 

  扫描二维码 获取更多精彩

css3笔记系列-3.css中的各种选择器详解,不看后悔系列

 



 

点“在看”你懂得 

css3笔记系列-3.css中的各种选择器详解,不看后悔系列