1.CSS选择器常见的有几种?
-
id选择器
-
类选择器
-
属性选择器:以某个元素的属性作为选择依据
input[type="text"] 用于调整输入框的样式
input[type="button"] 用于调整按钮的样式 -
分组选择器:可以对选择器分组,相当于同时选中两个元素,用逗号隔开.
h1, .p1{ color: red; } hi 和class=p1的类同时被选中. -
派生选择器:选择某个元素下的子元素，通常用于作用域隔离分为两种:
h1 p1{} h1中的所p1标签
h1>p1{} 选中p1 但不包括p1中的其他元素 -
伪类选择器
一般用于向选择器添加特殊效果.
先来说一下语法:
E:pseudo-class {property:value}
其中E为元素;pseudo-class为伪类名称;property是css的属性;value为css的属性值
其中,伪类一般应用在两个地方: -
动态伪类:因为这些伪类并不存在于HTML中,而只有当用户和网站交互的时候才能体现出来，分为两种
1 锚点demo a:link {color:gray;} 链接没有被访问时前景色为灰色 demo a:visited{color:yellow;} 链接被访问过后前景色为黄色 demo a:hover{color:green;} 鼠标悬浮在链接上时前景色为绿 demo a:active{color:blue;} 鼠标点中激活链接那一下前景色为蓝色
2 用户行为伪类
:hover用于当用户把鼠标移动到元素上面时的效果；
:active用于用户点击元素那一下的效果（正发生在点的那一下，松开鼠标左键此动作也就完成了）
:focus**用于元素成为焦点，这个经常用在表单元素上。
- UI元素状态伪类:这些主要是针对于HTML中的Form元素操作.
input[type="text"]:disabled{} 作用在于对想要禁止的输入框添加其他效果便于区别
input[type="radio"]:checked 表示页面上所有选中的radio按钮
2.选择器的优先级是怎样的?
优先级就是分配给指定的CSS声明的一个权重，它由 匹配的选择器中的 每一种选择器类型的 数值 决定。而当优先级与多个CSS声明中任意一个声明的优先级相等的时候，CSS中最后的那个声明将会被应用到元素上。当同一个元素有多个声明的时候，优先级才会有意义。因为每一个直接作用于元素的CSS规则总是会接管/覆盖（take over）该元素从祖先元素继承而来的规则。
优先级强度由高到低:
!important规则>元素的内联样式<style="">>ID选择器>类选择器,属性选择器,伪类选择器>元素类型选择器,伪元素选择器.
注意!
- 通用选择器）
(*), 和 否定伪类:not()不会影响优先级（但是，在:not()内部声明的选择器是会影响优先级的） - 怎样覆盖 !important?只需再添加一条 带!important 的CSS规则，要么给这个给选择器更高的优先级（添加一个标签，ID或类）；或是添加一样选择器，把它的位置放在原有声明的后面（总之，最后定义一条规则比胜）
- 一个基本原则,谁越具体谁起作用;同一级谁举例元素最近,谁起作用.
3.class 和 id 的使用场景?
id一般用于构建页面的框架,同时大多数情况是开放给后端人员用于使用的;而calss用来给我结构中的内容添加样式.
4.使用CSS选择器时为什么要划定适当的命名空间？
通常，一个项目我们只引用一个CSS，但是对于较大的项目，我们需要把CSS文件进行分类。我们按照CSS的性质和用途，将CSS文件分成“公共型样式”、“特殊型样式”、“皮肤型样式”.
一般在选择器的名称以一个功能单词的首字母+下划线+ 内容的介绍 来组合选择器的名称.
提供一个不错的链接以供继续学习 网易nec css
5.以下选择器分别是什么意思?
#header{} 选中id=header的元素
.header{} 选中class=header的元素
.header .logo{} header和logo中的元素
.header.mobile{} header中的mobile的元素
.header p, .header h3{} 选中header中的p和h3元素
#header .nav>li{} header类中的nav标签里面的li元素(不包含li内部元素)
#header a:hover{} header中的a元素添加用户行为伪类
6.列出你知道的伪类选择器
css2部分详见第一题答案.
css3中介绍两个相似的伪类选择器:
:first-child 父级中的第一个元素是...才选中
:first-of-type 父级中的某个元素的第一个...
举例说明:
任务8.png
7.:first-child和:first-of-type的作用和区别?
见第六题!
8.运行如下代码，解析下输出样式的原因。
任务8-2.png
.item1:first-child{ color: red;}这段代码作用:选中第一个是类名为item1的元素,并改字体颜色为红色.item1:first-of-type{ background: blue; 选中同类标签中的第一个元素.所以选中了<p>和<h3>
8.text-align: center的作用是什么，作用在什么元素上？能让什么元素水平居中?
作用在块级区域中使内部的行内元素居中.一般结合display:inline-block 来使元素居中.
9.如果遇到一个属性想知道兼容性，在哪查看?
caniuse
:nth-child(n)
p:nth-child(2)
选择属于其父元素的第二个子元素的每个 <p> 元素。
Paste_Image.png
网友评论