css之选择器

CSS(Cascading层叠 Style样式 sheets表),是用来为网页添加样式的代码。 css选择器的作用是用于选中元素,以便为其添加样式 1.基础选择器

  • 通用元素选择器(*),通常用于取消浏览器自带的样式,不常用
  • id选择器(#id)
  • class类选择器(.class)
  • 标签选择器(p)

2.组合选择器 组合选择器,E,F表示基础选择器 E,F 多元素选择器,用逗号分割。同时匹配元素E和元素F E F 后代选择器,用空格分割。选择E元素所有的后代中满足F选择器条件的元素(不只是子元素,子元素所有的后代) E>F "子元素选择器,用>分割。 选择E元素所有的直接子元素中满足F条件的元素" E+F "直接相邻选择器,用+分割。 选择E元素之后相邻的下一个兄弟元素F,但要处于同一个父元素内"

E~F "普通相邻选择器(弟弟选择器)。 选择E元素之后的元素F(无论直接相邻与否),但要处于同一个父元素内"

3.属性选择器 html由元素组成,元素由标签(p/div等标签),内容和属性(例如class属性,class="haha"表示class属性的值为haha)组成。

可以通过标签的属性来选择元素

<input type="password">
input[type=password]{
width:30px;}
[href^="http://"] {
  background-color: #f0ad4e;
}
[src$="gif"] {
  border: 1px solid #ccc;
}

4.伪类选择器 常用的

  • E:link 匹配E所有未被点击的链接
  • E:visited 匹配E所有已经被点击的链接
  • E:active 匹配鼠标已经其上按下,还没有释放的E元素
  • E:hover 匹配鼠标悬停其上的E元素
 //a标签设置伪类时的顺序比较重要,会产生样式覆盖。
//如果a:visited的样式,放在最后,a链接被点击之后,再hover或者active都不会生效。
            a{
                color:red;
            }
            a:visited{
                color:blue;
            }
            a:hover{
                color:green;
            }
            a:active{
                color:yellow;
            }
  • E:focus 匹配处于焦点的元素

点击输入框等元素当光标闪烁可以输入内容时,就说明输入框处于焦点状态

  • E:enabled 匹配表单中可用的元素
  • E:disabled 匹配表单中禁用的E元素
  • E:checked 匹配表单中,被选中的radio或者checkbox元素
  • E::selection 匹配用户鼠标当前选中的元素,注意这里是由两个冒号的
::selection{
color:red;
} //被鼠标选中的文字会变红
  • E:first-child 匹配其父元素E的第一个子元素
  • E:last-child 匹配父元素的最后一个子元素,等同于:nth-last-child(1)
  • E:nth-child(n) 匹配其父元素的第N个子元素,第一个标号为1,相当于E:first-child
  • E:nth-last-child(n) 匹配其父元素的倒数第N个子元素,第一个编号为1

小tip:先找到E的父元素,再选择它父元素下面第n个元素

  • E:nth-of-type(n) 选择满足E选择器的元素的父元素内,满足E选择器条件的子元素中不同种类型(类型是指标签,如p标签和div标签是不同种类型)第N个子元素

小tip:先找到E的父元素,再选择它父元素下面满足E条件的元素,再选择这些元素同种类型的第N个

  • E:nth-last-of-type(n) 与nth-of-type(n) 作用类似,但是倒着匹配的

小tip:先找到E的父元素,再选择它父元素下面满足E条件的元素,再倒着选择这些元素同种类型的第N个

  • E:first-of-type 匹配父元素下使用同种标签的第一个子元素,等同于:nth-of-type(1)
  • E:last-of-type 匹配父元素下使用同种标签的最后一个子元素,等同于:nth-last-of-type(1)

5.伪元素选择器 伪元素选择器前面有两个冒号(::),可以添加到选择器的末尾以选择元素的某个部分。

  • E::first-line 匹配E元素内容的第一行
  • E::first-letter 匹配E元素内容的第一个字母
  • E::before 在E元素内部首位生成一个伪元素,插入生成的内容

可用于清除浮动,主要是简化标签

div::before{
content:"aa";
width:0px;
}
  • E::after 在E元素内部最后生成一个伪元素,插入生成的内容

6.选择器优先级

  • 普通场景

1、在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式

.child{
color:red !important;
}

2、作为style属性写在元素标签上的内联样式

3、id选择器

4、类选择器

5、伪类选择器

6、属性选择器

7、标签选择器

8、通配符选择器

9、浏览器自定义

  • 复杂场景下:

标记为ABCD

           1.  行内样式:<div style="xxx"></div>     ==>a
           2.  id选择器:                            ==>b
           3.  类,属性选择器和伪类选择器              ==>c
           4. 标签选择器和伪元素选择器                ==>d

然后根据选择器去分类计算,最后先比较a的值,a相同就比较b,以此类推。数值更高,优先级更高!例如:

            *       {}  /a=0 b=0 c=0 d=1/-> /0,0,0,1/
            p       {}  /a=0,b=0,c=0,d=1/-> /0,0,0,1/
            a:hover {}  /a=0,b=0,c=1,d=1/-> /0,0,1,1/
            ul li   {}  /a=0,b=0,c=0,d=2/-> /0,0,0,2/
            h1+input[type=hidden]{} /a=0,b=0,c=1,d=2/-> /0,0,1,2/
            ul ol li.active  {}  /a=0,b=0,c=1,d=3/->/0,0,1,3/
            #ct .box p {}  /a=0,b=1,c=1,d=1/-> /0,1,1,1/
            div#header:after {}  /a=0,b=1,c=0,d=2/-> /0,1,0,2/
            style=""    /a=1,b=0,c=0,d=0/ ->/1,0,0,0/

7.例子

 <style>
        .box:first-child {
         color: red;
        /* 输出第一个div.box变红 */
       }
       .box:first-of-type {
         background: blue;
         /* 第一个div标签的div.box 、p.box变蓝背景 */
       }
       .box :first-child {
         font-size: 30px;
         /* .box后代第一个孩子div.item变成3opx */
       }
       .box :first-of-type {
         font-weight: bold;
         /* .box后代第一个div和p类型div.item和p.item变成粗体 */
       }
        </style>
         <div class="container">
           <div class="box">div.box</div>
           <p class="box">p.box</p>
           <div class="box">div.box</div>
           <div class="box">
             <div class="item">div.item</div>
             <p class="item">p.item</p>
           </div>
           <p class="box"></p>
         </div>
       
    
</body>

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • BFC

    BFC 全称 Block Formatting Context,翻译块级格式化上下文。BFC 可以看作是隔离了的独立容器(渲染区域),容器里面的元素不会在布局上...

    bamboo
  • jQuery选择器 和用jQuery 实现 Tab 切换效果(1)

    通过类数组下标的获取方式或者get方法获取指定index的DOM对象,也就是我们说的jQuery对象转DOM对象

    bamboo
  • css 元素居中

    前提:没有设置高度,高度由内容撑开。块级元素如果设置了高度,就不知道如何设置padding的数值 demo

    bamboo
  • css应知应会 第一集

    ================================================

    李才哥
  • CSS 基础系列:从清除浮动和margin塌陷问题谈BFC

    浮动的元素会影响其兄弟元素的位置,并可能导致父元素的高度塌陷(假如父元素没设置高度),因此需要清除浮动(带来的影响)。

    Chor
  • 前端学习自学笔记:day06

    今天是第六天的笔记,主要是HTML和CSS的,希望大家支持~ ? 在此之前先为大家显示下前端工程师的路线图: ? 第六天的笔记:HTML AND CSS: te...

    企鹅号小编
  • 惰性求值——lodash源码解读

    lodash受欢迎的一个原因,是其优异的计算性能。而其性能能有这么突出的表现,很大部分就来源于其使用的算法——惰性求值。 本文将讲述lodash源码中,惰性求值...

    我是leon
  • 想去Google Brain实习吗?如何申请?Jeff Dean等牛人很认真地回答了这些问题

    编译 | AI科技大本营(rgznai100) 参与 | 鸽子、Shawn 导语:昨晚谷歌大脑(Google Brain)在Reddit上举办了一年一度的在线...

    AI科技大本营
  • 八大排序算法稳定性分析,原来稳定性是这个意思...

    2、在一趟选择中,如果当前元素比一个元素小,而该小的元素又出现在一个和当前元素相等的元素后面,那么交换后稳定性就被破坏了;

    谭庆波
  • 来了,iOS的JSCore与H5的交互

    h5概念很热,咱们不多多说,但是在移动端的App中某些需要快速开发的地方也是很有好处--可以把一部分不想做的,不方便做的甩给web端去做,咱么只需要做好nati...

    大话swift

扫码关注云+社区

领取腾讯云代金券