CSS的选择器有哪些常见问题-css教程-PHP中文网

CSS的选择器有哪些常见问题

php中世界最好的语言

发布： 2018-03-08 15:51:31

原创

2906人浏览过

这次给大家带来css的选择器有哪些常见问题，处理css的选择器常见问题的注意事项有哪些，下面就是实战案例，一起来看一下。

选择器常见的有哪几种？
1.标签选择器
p{ }/选择标签名为p的元素/
2.类选择器
.box{ }/选择class名为box的元素/
3.ID选择器
#header{ }/选择id名为header的元素/
1.4通配符选择器
{ }/选择页面中所有的元素/
1.5选择器前缀
div.bd{}/选中class名为bd且标签为div的元素/
1.6属性选择器
[disabled]{}/选择带有属性disabled的所有元素*/

选择器的优先级是怎样的?
！important>内联样式>ID 选择器>伪类>属性选择器>类选择器>元素(类型)选择器>通用选择器（*）>浏览器自定义

class 和 id 的使用场景?
id根据提供的唯一id号，快速获取标签对象。class把一些特定样式放到一个class类中，需要此样式的标签，可以在添加此类。

使用CSS选择器时为什么要划定适当的命名空间？
为了防止样式污染。

立即学习“前端免费学习笔记（深入）”；

以下选择器分别是什么意思?

#header{
}/选择id名为header的元素/
.header{
}/选择class名为header的元素/
.header .logo{
}/选择名为header元素内所有名为logo的元素/
.header.mobile{
}/选择class名为header且为mobile的元素/
.header p, .header h3{
}/选择class名为header内所有的p标签和h3标签/
#header .nav>li{
}/选择祖父元素id名为header内父元素class名为nav的标签下/
#header a:hover{
}/选择祖父元素id名为header内a标签被hover的元素/

登录后复制

列出你知道的伪类选择器
:active 向被激活的元素添加样式。
:focus 向拥有键盘输入焦点的元素添加样式。
:hover 当鼠标悬浮在元素上方时，向元素添加样式。
:link 向未被访问的链接添加样式。
:visited 向已被访问的链接添加样式。
:first-child 向元素的第一个子元素添加样式。
:lang 向带有指定 lang 属性的元素添加样式。

运行如下代码，解析下输出样式的原因。

<!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="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>
</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="ct">
<p class="item2">ct-item2</p>
<div class="item1">ct-item1</div>
<div class="item1">ct-itmm1</div>
<div class="item2">
<div class="item1">ct-item2-item1</div>
</div>
</div>
</body>
</html>

登录后复制

:first-child和:first-of-type的作用和区别?
:first-child 匹配的是某父元素的第一个子元素，可以说是结构上的第一个子元素。
:first-of-type 匹配的是某父元素下相同类型子元素中的第一个。

如果遇到一个属性想知道兼容性，在哪查看?
在caniuse.com中查看。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！