CSS选择器常见的有几种?
- 全局选择器：例如*{margin:0;padding:0}
- id选择器：例如#box{margin:0;padding:0}
- 类选择器：例如.box{margin:0;padding:0}
- 标签选择器：例如a{text-decoration:none;}
- 组合选择器：例如 a，p{color:red;}
- 属性选择器：例如input[type=“text”]{color:blue;}
- 伪类选择器:例如 a:hover{color:red;}
- 继承选择器:例如 li a{color:red}
- 子元素选择器：例如 ul > li{border:1px solid red;}
- !important选择器：例如 p{color:red； !important}
选择器的优先级是怎样的?
- 优先级是由选择器组成的匹配规则决定的。
!important > 内联样式 > id选择器 > 类选择器 > 伪类选择器 > 属性选择器 > 标签选择器 > 全局选择器
class 和 id 的使用场景?
- class： 指定标签的类名，用于书写结构样式。
把多次重用的CSS样式放到一个class类中,方便日后需要。 - id： 指定标签的唯一标识，多使用于主要块级元素
根据提供的唯一的id号，获取对应的元素对象。
使用CSS选择器时为什么要划定适当的命名空间？
主要是为了使自己定义的样式只对当前区块生效，避免与他人产生冲突。
以下代码表示
#header{
/*匹配id为header的元素*/
};
.header{
/*匹配class为hearder的所有元素与*/
};
.header .logo{
/*匹配class为header元素class为logo的所有元素*/
};
.header.mobile{
/*匹配class为header和mobile的元素*/
};
.header p, .header h3{
/*匹配class为header的元素下的p和h3元素*/
};
#header .nav>li{
/*匹配id为header下的class为nav的直接子元素li*/
};
#header a:hover{
/*匹配id为header的元素下的a元素的鼠标悬浮效果*/
};
列出你知道的伪类选择器
:active /*选择器用于选择活动链接*/
:focus /*向拥有键盘输入焦点的元素添加样式*/
:hover /* 当鼠标悬浮在元素上方时，向元素添加样式*/
:link /*未访问链接的效果*/
:visited /*向已被访问的链接添加样式*/
a:first-child /*向元素的第一个子元素添加样式*/
a:last-child /*向父元素下最后一位元素添加样式*/
a:nth-child(n) /*向父元素下第n位元素添加样式*/
a:nth-child(2n) /*向父元素下n为偶数时候的a元素添加样式*/
a:first-of-type /*父元素下第一个为a的元素*/
a:last-of-type: /*父元素下最后一个为a的元素*/
a:nth-of-type(n) /*父元素下第n个为a的元素*/
:before /*在元素之前添加内容*/
:after /*在元素之后添加内容*/
:checked /*默认勾选的元素*/
:disabled /*不能输入的元素*/
:first-child和:first-of-type的作用和区别
- :first-child 匹配的是某父元素的第一个子元素，可以说是结构上的第一个子元素。
- :first-of-type 匹配的是某父元素下相同类型子元素中的第一个，比如 p:first-of-type，就是指所有类型为p的子元素中的第一个。这里不再限制是第一个子元素了，只要是该类型元素的第一个就行了。
运行如下代码，解析下输出样式的原因
<div class="ct">
<p class="item1">aa</p>
<h3 class="item1">bb</h3>
<h3 class="item1">ccc</h3>
</div>
以上类元素均为item1，且子元素有p和h3，而:first-child 匹配的是某父元素的第一个子元素。这里以下这段代码符合，所以aa为红色。
.item1:first-child{
color: red;
}
:first-of-type 匹配的是某父元素下相同类型子元素中的第一个。p和第一个h3符合，所以aa和bb的背景呈现为蓝色。
.item1:first-of-type{
background: blue;
}
text-align: center的作用是什么，作用在什么元素上？能让什么元素水平居中
- 有居中的作用
- 作用于块级元素或内联块元素内
- 能让块级元素或内联块元素内的文字居中
如果遇到一个属性想知道兼容性，在哪查看？
可以在Can I Use网站查看
网友评论