资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/css之选择器

css之选择器

tinysun1234 / 1902人阅读

摘要：同时匹配元素和元素后代选择器，用空格分割。选择元素所有的直接子元素中满足条件的元素直接相邻选择器，用分割。选择元素之后相邻的下一个兄弟元素，但要处于同一个父元素内普通相邻选择器弟弟选择器。

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]{
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.  行内样式:
     ==>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.例子

 
         

           
div.box

           
p.box

           
div.box

           

             
div.item

             
p.item
云服务器 GPU云服务器 css选择器 基础选择器css css选择 js css 加载器

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

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

相关文章

  • CSS入门之引用、选择器、属性（六分之三）

    摘要：入门教程六分之三篇没办法，我直播教小伙伴入门，属性讲完，准备说定位的时候，他们就喊停，不住了。。。选择器表达式如下相关效果见表达式关键词特性属性属性即样式定制的具体样式，比如定制宽高，分别为与等。 CSS 入门教程六分之三篇 没办法，我直播教小伙伴CSS入门，属性讲完，准备说定位的时候，他们就喊停，hold不住了。。。所以先写到六分之三，23333333 要点 解释 引用 如...

    baishancloud 评论0 收藏0

  • HTML & CSS之小白初入江湖

    摘要：之小白初入江湖超文本标记语言简称是一种用于创建网页的标准标记语言。描述了一个网站的结构语义随着线索的呈现，使之成为一种标记语言而非编程语言。是块级元素，是行内元素。层叠样式表简称是一种用来为结构化文档如添加样式的工具。 HTML & CSS之小白初入江湖 1. HTML 超文本标记语言(HyperText Markup Language, 简称HTML)是一种用于创建网页的标准标记语言...

    fai1017 评论0 收藏0

  • HTML & CSS之小白初入江湖

    摘要：之小白初入江湖超文本标记语言简称是一种用于创建网页的标准标记语言。描述了一个网站的结构语义随着线索的呈现，使之成为一种标记语言而非编程语言。是块级元素，是行内元素。层叠样式表简称是一种用来为结构化文档如添加样式的工具。 HTML & CSS之小白初入江湖 1. HTML 超文本标记语言(HyperText Markup Language, 简称HTML)是一种用于创建网页的标准标记语言...

    crossoverJie 评论0 收藏0

  • 前端笔记之CSS（上）

    摘要：宋体注意使用某种特定的字体系列宋体完全取决于用户机器上该字体系列是否可用这个属性没有指示任何字体下载。但是记住，最终选择上的是最后的那个后代元素。 层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对...

    番茄西红柿 评论0 收藏0

  • 前端（二）之 CSS

    摘要：前端之前端之前言前言昨天学习了标记式语言，也就是无逻辑语言。今天学习，被称之为网页的化妆师。为前端页面的样式，由选择器作用域与样式块组成。年初，组织负责的工作组开始讨论第一版中没有涉及到的问题。其讨论结果组成了年月出版的规范第二版。前端之 CSS 前言 昨天学习了标记式语言，也就是无逻辑语言。了解了网页的骨架是什么构成的，了解了常用标签，两个指令以及转义字符；其中标签可以分为两大类： 一类...

    张率功 评论0 收藏0

  • CSS之选择器的运用

    摘要：相邻同胞选择器使用隔开两个选择器。例如表示选择为元素的所有兄弟元素。选择器的分类选择器元素属性简介以上就是我关于选择器的理解与运用，后续有任何补充或修改均会在此基础上添加，有任何问题欢迎指出，谢谢 CSS选择器和规则：在css声明块前添加一个选择器，用来指明将css声明应用在哪些元素上。如图所示：showImg(https://segmentfault.com/img/bV6NYt?w...

    BlackMass 评论0 收藏0

发表评论

登陆后可评论

0条评论

tinysun1234

男|高级讲师
我要私信

TA的文章

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