css选择器

class 和 id 的使用场景?

id选择器,使用id="name"定义,使用#name调用来设置此id的css,其优先级高于类选择器,一个标签只能有一个id且每个id只能使用一次,常常用于建立派生选择器;
class类选择器,使用.name定义,使用class="name"调用,一个标签可以有多个类且同一个类可以用到不同的标签上,多用于多个标签样式相似或完全相同时;


CSS选择器常见的有几种?

通用选择器 *{}
类选择器 .class{}
id选择器 #id{}
标签选择器 element{}
伪类选择器 a:hover{}
伪元素选择器 a::before{}

选择器的优先级是怎样的?对于复杂场景如何计算优先级?

!important为样式设置最高权限 > 元素标签上的内联样式 > id选择器#id > 类选择器.class > 伪类选择器a:hover > 属性选择器 > 标签选择器p a h1 > 通配符选择器* > 浏览器自定义
同级选择器,后写的会覆盖之前写的样式

a:link, a:hover, a:active, a:visited 的顺序是怎样的? 为什么?

a:link(未被点击)
a:visited(已被点击)
a:hover(鼠标悬停其上)
a:active(鼠标已经按下,还没有释放)
*visited写在active后面,当a标签被点击之后,visited的样式会覆盖其他样式,导致其他样式都不生效


以下选择器分别是什么意思?

#header{  id为header的选择器
}
.header{ class为header的选择器
}
.header .logo{  header类中后代名为logo的类选择器
}
.header.mobile{  类名同时含有header和mobile的选择器
}
.header p, .header h3{ header类中的后代p标签选择器 和header类中的后代h3标签选择器
}
#header .nav>li{ id为header的选择器中的后代nav类的直接子元素li标签
}
#header a:hover{id为header的选择器中的后代a在hover状态下的样式
}
#header .logo~p{  id为header的选择器中后代名为logo类之后同级的p标签
}
#header input[type="text"]{  id为header的选择器中属性为type="text"的input标签
}

列出你知道的伪类选择器:

--- ---
E:first-child 匹配元素E的第一个子元素
E:nth-child 匹配元素E的第n个子元素
E:enabled和E:disabled 匹配元素E的状态为可用/不可用
E:checked和E:selection 匹配元素E的状态为单选框选中/复选框选中
a:link 未被点击的链接
a:visited 已被点击的链接
a:hover 鼠标悬停其上的链接
a:active 鼠标已经按下,但没有释放的链接

div:first-child、div:first-of-type、div :first-child和div :first-of-type的作用和区别 (注意空格的作用)

div:first-child:匹配作为长子(第一个子元素)的div
div:first-of-type:匹配父级元素中第一个div子元素
div :first-child:匹配每个父元素为div元素的第一个子元素
div :first-of-type: 在父元素为div的后代元素中寻找不同类型的第一个标签


运行如下代码,解析下输出样式的原因。

<style>
.item1:first-child{� 选取作为父元素第一个子元素的class为item1的元素
  color: red;
}
.item1:first-of-type{  选取作为父元素第一个出现的各类class为item1的元素,aa所在的p元素第一次出现,bb所在的h3元素第一次出现,都被选中,cc所在的h3在bb后面,因为h3标签出现过一次,所以不再被选中。
  background: blue;
}
</style>
 <div class="ct">
   <p class="item1">aa</p>
   <h3 class="item1">bb</h3>
   <h3 class="item1">ccc</h3>
 </div>
输出样式
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 其实平时用得多的选择器无非也就是那么几个,时间久了,许多不常用的选择器就慢慢忘记了。为了不让自己忘记这些选择器,今...
    盛夏晚清风阅读 1,878评论 0 5
  • 1.class 和 id 的使用场景? class:类选择器,一个标签可以有多个类且同一个类可以用到不同的标签上,...
    饥人谷_兔子君阅读 1,221评论 0 0
  • 一,class 和 id 的使用场景? id选择器,匹配特定id的元素。class是类选择器,匹配class包含(...
    DeeJay_Y阅读 388评论 0 0
  • 1、class和id的使用场景分别是什么? 首先,一个HTML文件中class名字可以有多个相同的,但是id的名字...
    李博洋li阅读 958评论 0 1
  • 1.class 和 id 的使用场景? 类选择器允许以一种独立于文档元素的方式来指定样式。该选择器可以单独使用,也...
    草鞋弟阅读 2,494评论 0 1