资讯专栏INFORMATION COLUMN

CSS 小结笔记之选择器

番茄西红柿 / 3016人阅读

摘要:例如对于上面的伪元素选择器,想要改变第一个字母的颜色大小则需要增加一个标签层叠样式表英文全称是一种用来表现标准通用标记语言的一个应用或标准通用标记语言的一个子集等文件样式的计算机语言。

Css选择器主要分为以下几类

  • 类选择器
  • ID选择器
  • 通配符选择器
  • 标签选择器
  • 伪类选择器
  • 复合选择器

1、类选择器:通过.classname 来选择

例如

 .color2 {
            color: rebeccapurple;
        }

 

同一个标签可以通过多个类名来指定多个样式,但是若其中有重叠部分,则按权重值重叠,若在同一权重级别中,如都是内部样式表中的,则按照上下关系,下面的覆盖上面的。

例如:

  .classtest1 {
            font-size: 25px;
            color: blue;
        }
        
  .classtest2 {
            color: red;
        }
 <p class="classtest1 classtest2">classtestp>

则p标签内容显示红色,样式覆盖只与样式定义的顺序有关,与指定的循序无关,如果将上述的p标签中的class顺序调换,则结果不会改变。例如

 <p class="classtest2 classtest1">classtestp>

显示结果与上面的显示结果一致。

2、Id选择器通过#id来选择

例如

 #id1 {
            color: palegreen;
        }
 <p id="id1">idTestp>

在网页中一般来说一个id对应一个元素,多个元素使用同一id值虽然不会报错,并且可以使用同一样式,但是用js进行操作时会出现问题。

3、通配符选择器 * 

通配符选择器是选择所有元素。

 

*{
background-color:yellow;
}

 

4、标签选择器element 

例如 为所有的div设置样式:

 div {
            color: blue;
            font-size: 20px
        }

5、伪类选择器

(a)连接伪类选择器  :link |:visited |:hover |:active

     a:link {/* 链接的颜色 */
            color: blue;
        }
        
        a:visited {/* 已访问过的颜色 */
            color: green;
        }
        
        a:hover {/* 鼠标放上去的颜色 */
            color: red;
        }
        
        a:active {/*点击瞬间的颜色 */
       color: yellow; 
   }
<a href="#">a链接a>

连接伪类选择器的顺序尽量不要改变,因为hover放在link和visited后才有效,active再hover后才有效

(b)结构伪类选择器 

  • :first-child 选取第一个元素
  • :last-child 选取最后一个元素
  • :nth-chlid(n) 选取第n个元素(n从1开始,n小于等于0时没有匹配项)
  • :nth-last-child
        li:first-child {
            color: blue;
        }
        
        li:last-child {
            color: green;
        }
        
        li:nth-child(5) {
            color: red;
        }
        
        li:nth-last-child(5) {
            color: orange;
        }
        /* even、2n指定偶数项 odd、2n+1 奇数 */
        
        li:nth-child(odd) {
            font-size: 25px;
        }
        
        li:nth-last-child(2n+1) {
            font-size: 35px;
        }
 <ul>
        <li>li1li>
        <li>li2li>
        <li>li3li>
        <li>li4li>
        <li>li5li>
        <li>li6li>
    ul>

结果如下图所示

 上述的选择器是将父元素中所有的元素进行排序来计算n的,所以当目标元素中穿插了其他元素,此种方法会出现问题。需要用到以下选择器

  • :first-of-type            同种类型元素的第一个
  • :last-of-type            同种类型元素的最后一个
  • :only-of-type           同种类型元素的多带带的一个  
  • :nth-of-type(n)        同种类型元素的第n个
  • nth-last-of-type(n)  同种类型元素的倒数n个
span:nth-of-type(even) {
            color: blue;
        }
 <div>
        <span>span1span>
        <p>p1p>
        <span>span2span>
        <span>span3span>
        <p>p1p>
        <span>span4span>
        <span>span5span>
        <span>span6span>
    div>

这时用nth-of-type(n)没有问题而使用 nth-child(n)会出现问题,可以自己试一下。

(c)目标选择器 :target

只对当前目标有效

 :target {
            color: blue;
            font-size: 30px;
        }

 

    <a href="#div1">div1的链接a>
    <a href="#div2">div2的链接a>
    <div id="div1">div1Textdiv>
    <div id="div2">div2Textdiv>

点击div1的链接则div1处于活动状态,此时div1的样式改变

 

6、复合选择器

 (1)交集选择器

交集选择器是标签选择器+类选择器(中间没有空格!)。

 p.pred {
            color: red;
        }
 <span class="pred">spanText span>
 <p class="pred">Ptextp>

对于上面的例子中,只有p标签改变了颜色

(2)并集选择器 element,element 

当多个标签需要设置同种样式时,使用并集选择器,并集选择器用逗号隔开,如:

 

 div,
 span,
 .cla1{
            color:pink;
        }

 

<div>divtextdiv>
<span>spantextspan>
<h3 class="cla1">h3texth3>

上面三中结果显示样式一致。

(3)后代选择器 element element 

后代选择器用空格隔开,例如

 div span {
            color: orange;
        }

 

指定div下面的span标签是橙色

<div>divTextdiv>
<span>SpanTextspan>
<div>
    <span>divspanTextspan>
div>

只有 divspanText 文本变成橙色

(4)子元素选择器 element>element

 后代选择器只要是满足前一个标签内的子孙元素都可以,而子元素选择器只有子元素才可以。

 div>p {
            color: hotpink
        }
  <div>
        <p>divpTextp>
        <h1>
            <p>h1pTextp>
         h1>
    div>

只有divptext颜色改变,而h1ptext颜色不变。

(5) 下一级选择器 element+element

选择紧接着在上一个元素之后的元素

 

 div+p {
            color: green;
        }

 

   <div>
     <p>divpTextp>
      <h1>
          <p> h1pTextp>
      h1>
    div>
    <p>ptextp> 

只有ptext颜色改变。

 (6)属性选择器 E[attr] 

具体用法在下例给出

    div[class=cla] {
            color: pink;
        }
        
        div[class^=div] {
            /*以div开头的class*/
            color: blue;
            font-size: 15px;
        }
        
        div[class$=div] {
            /*以div结尾的class*/
            color: orange;
            font-size: 15px;
        }
        
        div[class*=Text] {
            /*包含Text的class*/
            color: green;
            font-size: 15px;
        }

 

    <div class="cla">claTextdiv>
    <div class="div1">div1Textdiv>
    <div class="div2">div2Textdiv>
    <div class="div3">div3Textdiv>
    <div class="1div1Text">1div1Textdiv>
    <div class="1div1Text">2div1Textdiv>
    <div class="1div1Text">3div1Textdiv>
    <div class="1div">1divTextdiv>
    <div class="2div">2divTextdiv>
    <div class="3div">3divTextdiv>

(7)伪元素选择器 

  • ::first-letter 首字母
  • ::first-line  首行
  • ::selection 选中的元素
  • ::brfore     在元素开始添加内容与content一起使用
  • ::after       在元素结尾添加内容与content一起使用
      p::first-letter {
            color: red;
            font-size: 30px;
        }
        
        p::first-line {
            color: palegreen;
            font-size: 25px;
        }
        
        p::selection {
            color: blue;
            font-size: 25px;
        }
        
        P::after {
            content: -结尾
        }
        
        p::before {
            content: 开头:;
        }
 <p>层叠样式表(英文全称:Cascading Style Sheets) 是一种用来表现HTML(标准通用标记语言的一个应用) 或XML(标准通用标记语言的一个子集) 等文件样式的计算机语言。 CSS不仅可以静态地修饰网页, 还可以配合各种脚本语言动态地对网页各元素进行格式化。
    p>

伪元素与伪类选择器的区别:

首先,在Css3标准中伪元素选择器使用两个冒号::,而伪类选择器使用一个冒号‘ : ’。再就是如果不使用伪元素选择器,想要达成相同的效果需要多添加元素才能实现,而不使用为例选择器想要达成相同的效果需要增加一个类来实现。

例如对于上面的伪元素选择器,想要改变第一个字母的颜色大小则需要增加一个标签:

        span {
            color: red;
            font-size: 30px;
        }
 <p><span>span>叠样式表(英文全称:Cascading Style Sheets) 是一种用来表现HTML(标准通用标记语言的一个应用) 或XML(标准通用标记语言的一个子集) 等文件样式的计算机语言。 CSS不仅可以静态地修饰网页, 还可以配合各种脚本语言动态地对网页各元素进行格式化。
    p>

而不使用伪类选择器想要改变第一个元素的样式需要增加一个类,例如

 .first {
            color: blue;
        }
<li class="first">li1li>

 

 

 

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/1959.html

相关文章

  • CSS 小结笔记三种样式表

    摘要:内部样式表内部样式表一般写在头部,在标签内用标签括起来。外部样式表外部样式表是单独将样式写到一个文件中,并在头部引用。使用外部样式表时要注意如果出现多重样式时样式覆盖带来的问题。CSS 引入共有三种方式:内部样式表,内联样式(行内样式)表,外部样式表,当然也可以使用多重样式 内联样式 内联样式表 内联样式 直接把样式卸载html代码行内,一般仅仅在此样式仅仅只在当前元素上应用时使用,其他...

    李文鹏 评论0 收藏0
  • CSS 小结笔记图标字体(IconFont)

    摘要:本篇主要介绍一种非常好用的图标大法图标字体。图标字体可以非常便捷的去解决以上问题,使用起来也非常简单。并且改变图标大小只需要改变字体大小就可以了。  本篇主要介绍一种非常好用的图标大法——图标字体(IconFont)。   什么是图标字体?顾名思义,它是一种字体,只不过这个字体显示的并不是具体的文字之类的,而是各种图标。   网站上经常会用到各种图标,之前网页上使用图...

    番茄西红柿 评论0 收藏0
  • sass笔记-2|Sass基础语法让样式表更具条理性和可读性

    摘要:这个时候小明如果仅仅引入不想改,那么就是这个值,如果他想改,就可以在任何一处重新声明这个变量,那么就会变成小明的值。 这一篇主要详述保持sass条理性和可读性的3个最基本方法——嵌套、导入和注释。 零. 变量 变量本身的作用是为了保持属性值的可维护性,把所有需要维护的属性值放在同一个地方,快速更改,处处生效,可谓售后无忧。 1.变量声明 变量用$符号开头进行声明,任何可以用作CSS属性...

    CloudDeveloper 评论0 收藏0
  • sass笔记-3|Sass基础语法样式复用和保持简洁

    摘要:区别在于,类是在中运用的,混合器是在样式表中使用的。基本用法选择器继承,用去继承一个选择器定义的所有样式。继承背后的基本实现思路背后最基本的想法是,如果继承了,那么样式表中的任何一处选择器都会用这一选择器组进行替换和打开。 上一篇详述了Sass如何嵌套、导入和注释这3个基本方式来保持条理性和可读性,这一篇更进一步地阐述sass保持样式复用和简洁的方式——混合器和选择器继承——这两种方式...

    SmallBoyO 评论0 收藏0
  • CSS 小结笔记滑动门技术

    摘要:所谓的滑动门技术,就是指盒子背景能够自动拉伸以适应不同长度的文本。大多数应用于导航栏之中,如微信导航栏具体实现方法如下首先每一块文本内容是由标签与标签组成标签只指定高度,而不指定宽度。所谓的滑动门技术,就是指盒子背景能够自动拉伸以适应不同长度的文本。即当文字增多时,背景看起来也会变长。 大多数应用于导航栏之中,如微信导航栏: 具体实现方法如下: 1、首先每一块文本内容是由a标签与span标签...

    lykops 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<