- CSS选择器常见的有几种?基础选择器
- 基础选择器：
a.id选择器:可以为标有特定 id 的 HTML 元素指定特定的样式,以''#''来定义；
b.class选择器:选择有相同class的元素指定特定样式，以''.''显示；
c.element选择器：可以为某类标签指定特定样式。 - 组合选择器：
a.多元素选择器(E,F):用'',''分隔，同时匹配元素E或元素F;
b.后代选择器(E F):用空格分隔，匹配E元素所有的后代(不只是子元素、子元素向下递归）元素F;
c.子元素选择器(E>F):用>分隔，匹配E元素的所有直接子元素;
d.直接相邻选择器(E+F):匹配E元素之后的相邻的同级元素F;
e.普通相邻选择器(E~F):匹配E元素之后的同级元素F(无论直接相邻与否);
f.'.class1.class2/element#id' :id和class选择器和选择器连写的时候中间没有分隔符，''. ''和 ''#''本身充当分隔符的元素; - 属性选择器：
a. E[attr]匹配所有具有属性attr的元素，div[id]就能取到所有有id属性的div;
b. E[attr = value]匹配属性attr值为value的元素，div[id=test],匹配id=test的div;
c. E[attr ~= value]匹配所有属性attr具有多个空格分隔、其中一个值等于value的元素;
d. E[attr ^= value]匹配属性attr的值以value开头的元素;
e. E[attr $= value]匹配属性attr的值以value结尾的元素;
f. E[attr *= value]匹配属性attr的值包含value的元素; -
伪类选择器:
Paste_Image.png
-
伪元素选择器
Paste_Image.png
- 基础选择器：
- 选择器的优先级是怎样的?
!important>内联样式>id选择器>类选择器>伪类选择器>属性选择器>标签选择器>通配符选择器>浏览器自定义
-
class 和 id 的使用场景?
- 同一个class可以用于多个标签属性的设置，id只适用于某一个标签属性的设置；
- class在css样式中以“.”来开头命名，而id在CSS样式定义的时候 以“#”来开头命名；
- 出现重复定义时id的优先级高于class。
对于页面上一个仅出现一次的标记，使用id会更合适。对于页面中出现次数较多又可以统一设置样式的标签可以用class。
-
使用CSS选择器时为什么要划定适当的命名空间？
增加代码的可读性，便于后期维护修改。 -
以下选择器分别是什么意思?
#header{}：选择id为header的元素；
.header{}：选择class为header的元素；
.header .logo{}：选择class为header元素下面所有后代中的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标签的hover状态。 -
列出你知道的伪类选择器:
E:first-child:匹配元素E的第一个子元素;
E:link:匹配所有未被点击的链接;
E:visited：匹配所有已被点击的链接；
E:active：匹配鼠标已经其上按下、还没有释放的E元素；
E:hover：匹配鼠标悬停其上的E元素；
E:focus：匹配获得当前焦点的E元素；
E:checked：匹配表单中被选中的radio或checkbox元素；
E::selection：匹配用户当前选中的元素；
E:first-of-type：匹配父元素下使用同种标签的第一个子元素，等同于:nth-of-type(1)；
E:last-of-type：匹配父元素下使用同种标签的最后一个子元素，等同于:nth-last-of-type(1)。 -
first-child和:first-of-type的作用和区别？
:first-child:选择父元素下第一个子元素；
:first-of-type:选择父元素下使用同种标签的第一个子元素。
-
运行如下代码，解析下输出样式的原因。
Paste_Image.png
:first-child定义class为item1的 元素第一个子元素字体颜色为红色；
:first-of-type：定义class为item1的元素中p标签和h3标签中各自第一个子元素背景色为蓝色。
- text-align: center的作用是什么，作用在什么元素上？能让什么元素水平居中？
定义元素文本居中，只运用于块级元素中。
- 如果遇到一个属性想知道兼容性，在哪查看?
可以使用Can I use查询
网友评论