CSS选择器

#id和.class的区别

#id定位到页面上唯一的元素,.class定位到页面上某一类的元素

常见的选择器

基础选择器

  • *通用元素选择器,匹配页面任何元素(这也就决定了我们很少使用)
  • #id id选择器,匹配特定id的元素
  • .class类选择器,匹配class包含(不是等于)特定类的元素
  • element 标签选择器

组合选择器

  • E,F 多元素选择器,用,分隔,同时匹配元素E或元素F
  • E F 后代选择器,用空格分隔,匹配E元素所有的后代(不只是子元素、子元素向下递归)元素F
  • E>F 子元素选择器,用>分隔,匹配E元素的所有直接子元素
  • E+F 直接相邻选择器,匹配E元素之后的相邻的同级元素F
  • E~F 普通相邻选择器(弟弟选择器),匹配E元素之后的同级元素F(无论直接相邻与否)
  • .class1.class2 id和class选择器和选择器连写的时候中间没有分隔符,. 和 # 本身充当分隔符的元素
  • element#id id和class选择器和选择器连写的时候中间没有分隔符,. 和 # 本身充当分隔符的元素

属性选择器

  • E[attr] 匹配所有具有属性为attr的元素(div[id]能选择所有具有id属性的div)
  • E[attr=value] 匹配所有属性为value的元素(div[type=text]匹配id=text的div)
  • E[attr~=value] 匹配所有属性attr具有多个空格分隔,其中一个值等于value的元素
  • E[attr ^=value] 匹配属性attr的值以value开头的元素
  • E[attr $=value] 匹配属性attr的值以value结尾的元素
  • E[attr *=value] 匹配属性attr的值包含value的元素

伪类选择器

  • E:link 匹配所有未被点击的链接
  • E:visited 匹配所有已被点击的链接
  • E:active 匹配鼠标已经其上按下、还没有释放的E元素
  • E:hover 匹配鼠标悬停其上的E元素
  • E:first-child 匹配元素E的第一个子元素
  • E:last-child 匹配元素e的最后一个子元素
  • E:nth-child(n) 匹配其父元素的第n个子元素,第一个编号为1
  • E:first-of-type 匹配父元素下使用同种标签的第一个子元素,等同于nth-of-type(1)

伪元素选择器

  • E::first-line 匹配E元素的第一行
  • E::first-letter 匹配E元素的第一个字母
  • E::before 在e元素之前插入生成的内容
  • E::after 在e元素之后插入生成的内容

选择器的优先级是怎样的?对于复杂场景如何计算优先级?

属性后+!important:li {background: #ddd!important;},所有li背景都是灰色
内联样式:<style></style>
id选择器: #id-height{}
类选择器: .slide{}
伪类选择器:li:nth-child(1){}
属性选择器:input[name=slide]{}
标签选择器:p{}
通用选择器:*{}
浏览器自定义:a{}

  • 计算优先级
    行内样式 <div style="xxx"></div> ==> a
    ID 选择器 ==> b
    类,属性选择器和伪类选择器 ==> c
    标签选择器、伪元素 ==> d
    按a>b>c>d的顺序来计算优先级,优先选择a再b再c再d。

a:link, a:hover, a:active, a:visited 的顺序是怎样的? 为什么?

a{
color: red;
}
a:visited{
color: blue;
}
a:hover{
color:green;
}
a:active{
color:pink;
}

样式从后依次向前覆盖,链接初始为红色,访问后为蓝色(停留在蓝色),鼠标放上去后为绿色(无论有没有被访问过),鼠标按下后变为粉色(无论有没有被访问过)。

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

CSS选择器识别.png

我所知道的伪类选择器

  • E:link 匹配所有未被点击的链接
  • E:visited 匹配所有已被点击的链接
  • E:active 匹配鼠标已经其上按下、还没有释放的E元素
  • E:hover 匹配鼠标悬停其上的E元素
  • E:first-child 匹配元素E的第一个子元素
  • E:last-child 匹配元素e的最后一个子元素
  • E:nth-child(n) 匹配其父元素的第n个子元素,第一个编号为1

div:first-child和div:first-of-type的作用和区别

div:first-child:匹配div块下第一个子元素
div:first-of-type:匹配div块下使用同一种标签的第一个子元素

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

CSS选择器child和type区分.png
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1.class 和 id 的使用场景? class:类选择器,一个标签可以有多个类且同一个类可以用到不同的标签上,...
    饥人谷_兔子君阅读 1,214评论 0 0
  • 1.class 和 id 的使用场景? 两者都能选取DOM节点并给DOM节点添加样式,但是W3C标准里规定页面中只...
    饥人谷_米弥轮阅读 426评论 0 1
  • class 和 id 的使用场景 class:一个标签可以有多个class且同一个class可以用到不同的标签上,...
    尾巴尾巴尾巴阅读 435评论 0 0
  • 1.class 和 id 的使用场景? 类选择器允许以一种独立于文档元素的方式来指定样式。该选择器可以单独使用,也...
    草鞋弟阅读 2,477评论 0 1
  • 1,class 和 id 的使用场景? 1.class是类选择器,用.class定义,定位到页面中有相同特征的一类...
    _思铭阅读 380评论 0 0