css选择器总结

最新推荐文章于 2022-11-05 22:01:04 发布

陌上烟雨寒

最新推荐文章于 2022-11-05 22:01:04 发布

阅读量246

点赞数

分类专栏： css 文章标签： css css3 html

本文链接：https://blog.csdn.net/weixin_47180815/article/details/127364681

版权

css 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

类别选择器 .myclass
标签选择器 p
id选择器 #myId
后代选择器 .father .child
子元素选择器 div>p （仅指直接后代）
伪类选择器

a:link{
color:#999999;
}
a:visited{
color:#FFFF00;
}
a:hover{
color:#006600;
}
input:focus{
background:# E0F1F5;
}

通用选择器 *
群组选择器

#main p, #sider span {
color:#000;
line-height:26px;
}

相邻同胞选择器 h1 + p {color:blue}
通用兄弟选择器 h1 ~ p {color:blue}
属性选择器

[attr]
[title] {margin-right:10px}

[attr=val]
[title = 'this'] {margin-right: 10px}
/* 选择属性 title 的值等于 this 的所有元素 */

[attr^=val]
[title ^= 'this'] {margin-left: 15px}
/*选择属性title的值以this开头的所有元素*/

[attr$=val]
[title $= 'this'] {margin-right: 15px}
/*选择属性title的值以this结尾的所有元素*/

[attr*=val]
[title *= 'this'] {margin: 10px}
/*选择属性title 的值包含 this 的所有元素*/

[attr~=val]
[title ~= 'this'] {margin-top: 10px}
/* 部分属性选择器 属性以空格进行分割时*/

[attr|=val]
[title |= 'this'] {margin-bottom: 10px}
/*选择属性 title 的值等于this，或值以 this- 开头的所有元素*/

伪元素选择器

:first-letter 设置块元素首字母样式
:first-line 设置第一个文本行样式
:before  设置之前的样式，可以插入生成的内容，并设置其样式；
:after  设置之后的样式，可以插入生成的内容，并设置其样式；

结构性伪类选择器

:first-of-type，选择相对父元素里同类型子元素中的第一个，!lte8
　 #box1 :first-of-type {
      color: #f00
    }
    
    #box2 .ft:first-of-type {
      color: #ff0
    }

:last-of-type，选择相对父元素里同类型子元素中的最后一个，!lte8
　  #box3 :last-of-type {
      color: #f00
    }

:only-of-type，选择相对父元素里同类型子元素中只有一个的元素，!lte8
　 #box4 :only-of-type {
      color: #f00
    }

    #box5 .ft:only-of-type {
      color: #f00
    }

:only-child，选择的元素相对于其父元素是唯一的子元素，!lte8
   #box6 :only-child {
      color: #f00
    }

#box7 :nth-child(3) {color: #f00}
　　//匹配第三个子元素即这里的4
#box8 :nth-child(odd) {color: #f00} 等价于 .box :nth-child(2n + 1) {color: #f00}
　　//匹配奇数即这里的2.4.6以及4里的strong和6里的第一个span
#box9 :nth-child(even) {color: #f00} 等价于 .box :nth-child(2n + 2) {color: #f00}和.box :nth-child(2n)
　　//匹配偶数即这里的3.5以及6里的第二个span
#box10 :nth-child(n + 3) {color: #f00}
　　//匹配 n + 3开始的所有子元素即.box里所有的子元素以及子孙元素
#box11 :nth-last-child(3) {color: #f00}
　　//匹配倒数第三个子元素即这里的4

:nth-of-type(n)，选择父元素的第n个或多个同类型的子元素，!lte8
　 #box12 :nth-of-type(2) {
      color: #f00
    }

:nth-last-of-type(n)，同上，只是从最后开始往前数，!lte8
　 #box13 :nth-last-of-type(2) {
      color: #f00
    }

:first-child，选择父元素里的第一个子元素，!ie6
　　.box :first-child {color: #f00}
　　//匹配2和4里的strong以及6里的第一个span
　　
:last-child，选择父元素里的最后一个子元素，!lte8
　　.box :last-child {color: #f00}
　　//匹配6和6里的最后一个span以及4里的strong
　　
:root，选择文档的根元素，在HTML中就是指<html>标签，!lte8

:empty，选择没有任何内容的元素，那怕是有一个空格也不行，!lte8
　　table td:empty {background-color: #ffc}
　　//匹配表格里没有内容的td
　　
:target，选择当前活动的元素，指锚点点击后跳转到的那一个元素，!lte8

:not(selector)，选择排除selector以外的其他所有元素，!lte8
　　.box *:not(div) {background-color: #ffc}
　　//选择box里除div以外的所有后代元素，如果div里有其他非div元素，也会选择上，如上的HTML CODE就会选择上div里面的span和strong

<div class="box" id="box1">
    <span>First span</span>
    <p class="ft">First p</p>
    <div>First div<strong class="ft">Strong text</strong></div>
    <p class="ft">Second p</p>
    <div class="ft">Second div
      <span>Second span</span>
      <span>Third span</span>
    </div>
  </div>

在这里插入图片描述
14. UI元素状态伪类选择器

:enabled，指定元素处于可用状态时的样式，一般用于input，select和textarea
:disabled，指定元素处于不可用状态时的样式，一般用于input，select和textarea
:read-only，指定元素为只读状态时的样式，FF为-moz-read-only，一般用于input和textarea
:read-write，指定元素为只可写状态时的样式，FF为-moz-read-write，一般用于input和textarea
:checked，指定元素被选中状态时的样式，FF为-moz-checked一般用于checkbox和radio
:default，指定元素默认选中的样式，一般用于checkbox和radio
:indeterminate，指定默认一组单选或复选都没被选中的样式，只要有一个被选中则样式被取消，一般用于checkbox和radio
::selection，指定元素处理选中状态时的样式，可用于所有元素，上面的几个基本上只用于表单元素；
FF为::-moz-selection，不能用群组选择器来写；
::selection {background-color: #ffc; color: #fff}
::-moz-selection {background-color: #ffc; color: #fff}