这次给大家带来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 属性的元素添加样式。
运行如下代码，解析下输出样式的原因。
first-child vs first-of-child /选中.item1,该元素是它父亲的第一个孩子/.item1:first-of-type{background: red;}/选中.item1,该元素是它父亲所有的 .item1孩子中的第一个/.item1:first-child{color: blue;}item1ct-item2ct-item1ct-itmm1ct-item2-item1first-child vs first-of-child /选中.item1,该元素是它父亲的第一个孩子/.item1:first-of-type{background: red;}/选中.item1,该元素是它父亲所有的 .item1孩子中的第一个/.item1:first-child{color: blue;}item1ct-item2
ct-item1ct-itmm1ct-item2-item1
:first-child和:first-of-type的作用和区别?
:first-child 匹配的是某父元素的第一个子元素，可以说是结构上的第一个子元素。
:first-of-type 匹配的是某父元素下相同类型子元素中的第一个。
如果遇到一个属性想知道兼容性，在哪查看?
在caniuse.com中查看。
相信看了本文案例你已经掌握了方法，更多精彩请关注创想鸟其它相关文章！
相关阅读：
JavaScript数组-字符串-数学函数
简易的CSS3点击响应动画案列
jquery的DOM与事件
以上就是CSS的选择器有哪些常见问题的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1609053.html
微信扫一扫 
支付宝扫一扫 
