css选择器有几种
id选择器,类选择器,元素选择器,派生选择器,属性选择器,分组选择器.通用选择器*
比较好的选择器分类是:
1.基础选择器(通用选择器*,id选择器#id,类选择器.class,标签选择器element,)
2.组合选择器(分组选择器E,F,后代选择器E F,子元素选择器E>F,直接相邻选择器E+F,普通相邻选择器E~F,).class1.class2,element#id
3.属性选择器
4.伪类选择器
5.伪元素选择器
选择器的优先级是怎样的?
css样式的优先级
从高到低分别是
1.在属性后面使用 !important会覆盖页面内任何位置定义的元素样式
2.作为style属性写在元素标签上的内联样式
3.id选择器
4.类选择器
5.伪类选择器
6.属性选择器
7.标签选择器
8.通配符选择器
9.浏览器自定义
class 和 id 的使用场景?
id知识：
在一个网页里ID只能使用一次。当然即使一个id在一个网页内被使用多次，其CSS样式仍然可以实现生效，但是一般规定W3C标准是使用一次。因为ID在html里可以赋予html标签特殊的属性如一下JS动作、表单传值等特性所以区别于一个class可以使用多少的次，而一个CSS 命名的id只能使用一次避免一些特定动作、传的表单值的兼容性特性错误即使没有其它JS脚本动作、表单传值特性但是我们也一定执行一个页面只能使用一次。一般id用于页面唯一的结构布置,
class知识：
与CSS ID不同特性是clsss类可以在一个网页内无限次引用。
Class 选择器定义以“.”来定义。定义css class选择器例子：.yangshi1{color:#F00;} 定义文字为红色.yangshi2{font-size:28px;}定义文字大小为18px
使用CSS选择器时为什么要划定适当的命名空间？
网页中功能相似的模块可能较多,比如导航,导航可能有页面主导航,侧边栏导航,甚至页脚导航,一般导航使用class类选择器写样式,这时导航就不能单纯的使用nav做class命名,要写做main-nav,sidebar-nav,footer-nav,这样不会造成样式的污染.
以下选择器分别是什么意思?
#header{} 选择id为header的元素
.header{} 选择元素中class有header的元素
.header .logo{} 选择class为header元素下有class为logo的元素
.header.mobile{} 选择同时有class为header和mobile的元素
.header p, .header h3{} 分别选择class有header且header下有p和h3的元素
#header .nav>li{} 选择id为header 下class有nav下的li元素
#header a:hover{} 选择id为header 下的a链接hover状态
列出你知道的伪类选择器
a链接的四个伪类 link visited hover active
:firdst-child ,:first-of-type
:first-child和:first-of-type的作用和区别
E:first-child
说明：
匹配父元素的第一个子元素E。
要使该属性生效，E元素必须是某个元素的子元素，E的父元素最高是body，即E可以是body的子元素
这里可能存在误解：
示例代码：
<ul>
<li>列表项一</li>
<li>列表项二</li>
<li>列表项三</li>
<li>列表项四</li>
</ul>
在上述代码中，如果我们要设置第一个li的样式，那么代码应该写成li:first-child{sRules}
，而不是ul:first-child{sRules}
。
来看这样一段代码：
示例代码：
p:first-child{color:#f00;}
<div>
<p>我是一个p</p>
</div>
我是一个p
这段代码你能看到p元素被命中变成了红色
假设将代码简单地修改一下：
示例代码：
p:first-child{color:#f00;}
<div>
<h2>我是一个标题</h2>
<p>我是一个p</p>
</div>
只是在p前面加了一个h2标签，你会发现选择器失效了，没有命中p，why?
E:first-child选择符，E必须是它的兄弟元素中的第一个元素，换言之，E必须是父元素的第一个子元素。与之类似的伪类还有E:last-child
，只不过情况正好相反，需要它是最后一个子元素。
E:first-of-type
说明：
匹配同类型中的第一个同级兄弟元素E。
要使该属性生效，E元素必须是某个元素的子元素，E的父元素最高是html，即E可以是html的子元素，也就是说E可以是body
该选择符总是能命中父元素的第1个为E的子元素，不论第1个子元素是否为E
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>结构性伪类选择符 E:first-of-type_CSS参考手册_web前端开发参考手册系列</title>
<meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" />
<style>
p:first-of-type {
color: #f00;
}
</style>
</head>
<body>
<div class="test">
<div>我是一个div元素</div>
<p>我是一个p元素</p>
<p>我是一个p元素</p>
</div>
</body>
</html>
运行如下代码，解析下输出样式的原因。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>first-child vs first-of-child</title>
<style>
/*选中.item1,该元素是它父亲的第一个孩子*/
.item1:first-of-type{
background: red;
}
/*选中.item1,该元素是它父亲所有的 .item1孩子中的第一个*/
.item1:first-child{
color: blue;
}
</style>
</head>
<body>
<div class="item1">item1</div>
<div class="item1">ct-item2-item1</div>
<div class="ct">
<div class="item2">ct-item2</div>
<div class="item1">ct-item1</div>
<div class="item1">ct-itmm1</div>
<div class="item2">
<div class="item1">ct-item2-item1</div>
<div class="item1">ct-item2-item1</div>
</div>
</div>
</body>
</html>
.item1:first-of-type,选择器匹配属于其父元素的有item1类名的首个子元素而不论item1是否为父元素的第一个子元素
.item1:first-child 选择器用于选取属于其父元素的有item1的所有首个子元素的
text-align: center的作用是什么，作用在什么元素上？能让什么元素水平居中
将文本或inline-block元素水平居中
如果遇到一个属性想知道兼容性，在哪查看?
can i use
网友评论