这次给大家带来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中文网其它相关文章!
相关阅读:
以上是CSS的选择器有哪些常见问题的详细内容。更多信息请关注PHP中文网其他相关文章!