1.css选择器常见的有几种？
css选择器常见的有5种。
1.基础选择器
基础选择器有id选择器、类选择器、通用元素选择器、标签选择器。
- id选择器，匹配特定的id元素。
写法举例：
#header {
font-size: 16px;
}```
* 类选择器，匹配特定的class元素。
写法举例：
```css
.nav {
font-size: 20px;
}
- 通用元素选择器，匹配页面任何元素，很少使用。
写法举例：
* {
font-family: "微软雅黑"；
}
- 标签选择器，匹配对应的标签。
写法举例：
p {
color: red;
}
2.组合选择器
| 选择器 | 含义 |
|---|---|
| E,F | 多元素选择器，用，分隔符，同时匹配E和F |
| E>F | 直接子元素选择器，匹配E元素的所有直接子元素F |
| E F | 后代选择器，选择E的所有后代元素F（包括子元素，子元素的后代等等） |
| E+F | 直接相邻选择器，匹配E元素之后的同级的相邻的子元素F |
| E~F | 普通相邻选择器，匹配E元素之后的所有同级的子元素 |
| E.element | 匹配class名是element的E元素 |
| E#element | 匹配id名是element的E元素 |
组合选择器可以避免给标签加上过多的属性值，利用现有标签和属性为目的标签定义样式。
举例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>组合选择器</title>
<style>
h1,p {
color: red;
}
div p {
font-size: 20px;
}
div>p {
background-color: #ccc;
}
h1+p {
font-weight: bold;
}
h1~p {
font-style: italic;
}
p.pa {
border:1px solid red;
}
p#content {
border:1px solid #333;
}
</style>
</head>
<body>
<p>段落</p>
<div id="header">
<h1>这是一级标题</h1>
<div class="box">
<h1>这也是一级标题</h1>
<p>段落1</p>
<p class="pa">段落2</p>
<p id="content">段落3</p>
<p>段落4</p>
</div>
</div>
</body>
</html>
效果：
3.属性选择器
| 选择器 | 含义 |
|---|---|
| E[attr] | 匹配所有具有属性attr的元素，div[id]就可以取到所有有id属性的div |
| E[attr=value] | 匹配属性attr值为value的元素，div[id=test],匹配id=test的div |
| E[attr~=value] | 匹配所有属性attr具有多个空格分隔、其中一个值等于value的元素 |
| E[attr^=value] | 匹配属性attr的值以value开头的元素 |
| E[attr$=value] | 匹配属性attr的值以value结尾的元素 |
| E[attr*=value] | 匹配属性attr的值包含value的元素 |
属性选择器把标签的属性值取出来做匹配。title,type,alt,src等属性都能匹配得到。可以用到的是E[attr=value]，可以用于<input>标签，设置type类型相同的表单元素有相同的样式。也可以用于统一设置<img>,<a>标签，或者当需要特别设置一个<img>或者<a>标签时，取它们的地址属性，不用再单独设置class或者id名。
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>属性选择器</title>
<style>
input[type="text"] {
border: 1px solid blue;
}
*[rel] {
text-decoration: none;
}
img[src="1.jpg"] {
width: 10px;
height: 10px;
}
</style>
</head>
<body>
<form action="a.php">
姓名：<input type="text" name="name"><br/>
生日：<input type="text" name="birthday"><br/>
</form>
<img src="eg_submit.jpg" alt="图片1">
<a href="#" rel="链接">这是超链接
</a>
<div>
<img src="1.jpg" alt="图片2">
<a href="#">链接</a>
</div>
</body>
</html>
效果：
如上所示，
img[src="1.jpg"]可以单独把1.jpg图像拿出来设置属性。4.伪类选择器
| 选择器 | 含义 |
|---|---|
| E:first-child | 匹配元素E的第一个子元素 |
| E:link | 匹配所有未被点击的链接 |
| E:visited | 匹配所有已被点击的链接 |
| E:active | 匹配鼠标已经其上按下、还没有释放的E元素 |
| E:hover | 匹配鼠标悬停其上的E元素 |
| E:focus | 匹配获得当前焦点的E元素 |
| E:lang(c) | 匹配lang属性等于c的E元素 |
| E:enabled | 匹配表单中可用的元素 |
| E:disabled | 匹配表单中禁用的元素 |
| E:checked | 匹配表单中被选中的radio或checkbox元素 |
| E::selection | 匹配用户当前选中的元素 |
| E:root | 匹配文档的根元素，对于HTML文档，就是HTML元素 |
| E:nth-child(n) | 匹配其父元素的第n个子元素，第一个编号为1 |
| E:nth-last-child(n) | 匹配其父元素的倒数第n个子元素，第一个编号为1 |
| E:nth-of-type(n) | 与:nth-child()作用类似，但是仅匹配使用同种标签的元素 |
| E:nth-last-of-type(n) | 与:nth-last-child() 作用类似，但是仅匹配使用同种标签的元素 |
| E:last-child | 匹配父元素的最后一个子元素，等同于:nth-last-child(1) |
| E:first-of-type | 匹配父元素下使用同种标签的第一个子元素，等同于:nth-of-type(1) |
| E:last-of-type | 匹配父元素下使用同种标签的最后一个子元素，等同于:nth-last-of-type(1) |
| E:only-child | 匹配父元素下仅有的一个子元素，等同于:first-child:last-child或 :nth-child(1):nth-last-child(1) |
| E:only-of-type | 匹配父元素下使用同种标签的唯一一个子元素，等同于:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1) |
| E:empty | 匹配一个不包含任何子元素的元素，文本节点也被看作子元素 |
| E:not(selector) | 匹配不符合当前选择器的任何元素 |
关于伪类选择器，E:hover可以用于所有的元素，使它们在鼠标滑过时有动态的效果。
5.伪元素选择器
| 选择器 | 含义 |
|---|---|
| E::first-line | 匹配E元素内容的第一行 |
| E::first-letter | 匹配E元素内容的第一个字母 |
| E::before | 在E元素之前插入生成的内容 |
| E::after | 在E元素之后插入生成的内容 |
E::before/E::after设置在对象前/后（依据对象树的逻辑结构）发生的内容。用来和content属性一起使用，并且必须定义content属性。IE8以下不支持这两个选择器。
CSS3将伪元素选择符前面的单个冒号(:)修改为双冒号(::)用以区别伪类选择符，但以前的写法仍然有效。即E:after可转化为E::after。
参考css选择器
2.选择器的优先级是怎样的?
选择器优先级，从高到低：
- 在属性后面使用!important会覆盖页面内任何位置定义的元素样式
- 作为style属性写在元素标签上的内联样式
- id选择器
- 类选择器
- 伪类选择器
- 属性选择器
- 标签选择器
- 通配符选择器
- 浏览器自定义
一般如果由多个选择器组成，可以按id选择器的权值为1000，class选择器为100，标签选择器为10，做一下运算。如果算出来权值一样，看哪个选择器作用的更具体，就用哪个。还有一种情况
div {
font-size:12px;
}
p {
color: red;
}
div {
font-size:18px;
}
像上面这样设置了两次同样的选择器，后面的样式会覆盖前面的。
3.class 和 id 的使用场景?
class用于设置一类有相同样式的标签时，可以给它们加上同样的class名，用class选择器设置样式。这样在以后添加类似样式的标签时，直接给标签添加一个应用过的class名就可以解决。而且一个标签可以用class="xxx xxx xxx"的方式加多个class名，有助于简化代码。
id主要用于主要外结构，如一个页面的导航区，内容区，页脚等。还可以应用在页面中有独一无二的样式的标签上。因为同样的id名在一个页面中只能出现一次，所以一般编写内容时按照页面的样式展现规律，使用class，更方便。
4.使用CSS选择器时为什么要划定适当的命名空间？
实现页面时，不同的css文件如果一起加载，这样就会有命名冲突。比如a.css和b.css中都有.memu,.content这两种class选择器，这样它们一起加载时就会产生命名冲突。为了避免冲突，要划定适当的命名空间。
5.以下选择器分别是什么意思?
#header{
}
.header{
}
.header .logo{
}
.header.mobile{
}
.header p, .header h3{
}
#header .nav>li{
}
#header a:hover{
}
- 设置id属性为header的元素的样式。
#header{
}```
2. 设置class属性为header的元素的样式。
```css
.header{
}```
3. class属性是header的元素的子元素中，class属性是logo的元素的样式设置。
```css
.header .logo{
}```
4. class属性既是headr又是mobile的元素的样式设置。
```css
.header.mobile{
}
- class属性是header的元素的子元素中，标签p和h3的样式设置。
.header p, .header h3{
}
- id属性是head的元素的子元素中，class属性是nav的元素的直接子元素为li的元素的样式设置
#header .nav>li{
}
- id属性是header的元素的子元素中，鼠标悬停在a链接上时的样式设置。
#header a:hover{
}
6.列出你知道的伪类选择器
- 我知道的伪类选择器
- :hover, :active, :link. :visited
- :first-child, :last-child
- :first-of-type, :last-of-type
7.:first-child和:first-of-type的作用和区别
E:first-child匹配的是E是它的父元素的第一个子元素的情况。
E:first-of-type匹配的是E作为子元素第一次出现的情况。
区别在于E:first-child如果E这个子元素不是第一个出现的就匹配不到，而E:first-of-type只要出现E元素就可以匹配得到。
举例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>伪类选择器</title>
<style>
p:first-child {
border: 1px solid red;
}
p:first-of-type {
color: red;
}
</style>
</head>
<body>
<div id="header">
<p class="content" href="#">段落1</p>
<div class="nav">
<h3>三级标题2</h3>
<p>段落2</p>
<p>段落3</p>
<p>段落4</p>
</div>
</div>
</body>
</html>
效果图：
p元素是id为header的元素的第一个子元素，所以
p:first-child {
border: 1px solid red;
}
设置对段落1是有效的，而作为class是nav的div元素的子元素，p并不是第一个，所以上面的设置无效。段落2没有边框。
p:first-of-type {
color: red;
}
对两个div中的第一次出现的p元素都有效，段落1、段落2字体变为红色。
8.运行如下代码，解析下输出样式的原因。
<style>
.item1:first-child{
color: red;
}
.item1:first-of-type{
background: blue;
}
</style>
<div class="ct">
<p class="item1">aa</p>
<h3 class="item1">bb</h3>
<h3 class="item1">ccc</h3>
</div>
输出结果：
由输出结果看，class属性是item1的p元素作为div的子元素，是同级元素中的第一个，所以
.item1:first-child有效，匹配到p，所以aa字体颜色变为红色。class属性是item1的元素有p、h3。
.item1:first-of-type匹配到的分别是同级的第一个p元素和同级的第一个h3元素。这两个元素的背景色设为蓝色。对于class属性而言，
.class:first-child和E:first-child类似，只看父元素的第一个子元素是否匹配。而.class:first-of-type则匹配属性相同的不同元素中的第一个元素。
9.text-align: center的作用是什么，作用在什么元素上？能让什么元素水平居中
text-align的作用是让行内元素水平居中，作用在块级元素上，使块级元素内的行内元素（如文本和图片）水平居中。
10.如果遇到一个属性想知道兼容性，在哪查看?
在can i use网站查看。
本文版权归作者和饥人谷所有，转载请注明出处
网友评论