有关于CSS 选择器的总结

樱花卍葬
169 阅读7分钟

CSS 选择器

选择页面上的某一个或某一类元素。因为自从CSS2.0后，提出来将HTML和CSS分离的思想。因为将标签和样式分开后，标签和样式失去了对应关系，导致样式和标签不匹配，所以用到了选择器，选择器就是给标签起来个名字，样式通过名字对应指定的标签。

简单选择器

优先级： 通配选择器 < 标签(元素)选择器 < 类选择器 < ID选择器 。

通配符选择器（* ）

语法：* {}

作用：选中页面中的所有的元素（会影响浏览器的性能）

标签(元素)选择器（tagname）

语法 : 标签名{}

作用 : 选中对应标签中的内容

例:

p{} , div{} , span{} , ol{} , ul{} ......

类(class)选择器（.class）

语法 : .class属性值{}

作用 : 选中对应class属性值的元素

例子 :

<p class="A">段落1</p>
<p class="B">段落1</p>   
<p class="C">段落1</p>
<style>
.A{} 
.B{}
.C{}
</style>

注意：class里面的属性值不能以数字开头,如果以符号开头,只能是'_'或者'-'这两个符号,其他的符号不可以,一个class里面可以有多个属性值

ID选择器（#id）

语法 : #id属性值{}

作用 : 选中对应id属性值的元素

例子 :

<p id="A">段落1</p>
<p id="B">段落1</p>
<p id="C">段落1</p>

<style>
#A{}
#B{}
#C{}
</style>

**注意 **: id的属性值只能给1个,可以重复利用,不能以数字开头

属性选择器[attr=v]

属性选择器一共有7种写法

  1. [name] 具有name属性的元素
  2. [att="val"] 具有att属性且属性值完全等于val的元素(一个字符都不能少，包括空格)
  3. [att~="val"] 具有att属性, 且多个用空格隔开的属性值里面, 其中一个等于val的元素
  4. [att^="val"] 具有att属性, 且属性值的整个字符串, 以val开头
  5. [att$="val"] 具有att属性, 且属性值的整个字符串, 以val结尾
  6. [att*="val"] 具有att属性, 且属性值的整个字符串, 含有val字符
  7. [att|="val"] 具有att属性, 且属性值的整个字符串, 以val开头用-连接其他字符, 或者属性值只有val

实例：

<style>
.demo {
    width: 300px;
    border: 1px solid #ccc;
    padding: 10px;
    overflow: hidden;
    margin: 20px auto;
}

.demo a {
    float: left;
    display: block;
    height: 50px;
    width: 50px;
    border-radius: 10px;
    text-align: center;
    background: #aac;
    color: blue;
    font: bold 20px/50px Arial;
    margin-right: 5px;
    text-decoration: none;
    margin: 5px;
}
/* 属性选择器的权重是0010	 */
/* 写法1 某某[属性] 选择到a标签且有title属性的变*/
/* a[title]{
    background: yellow;
} */
/* a[lang][target]{
    background: yellow;
} */
/*重点: 写法2: 某某[属性=属性值] 选择到有某某标签有指定属性且属性值必须一摸一样的也有的多一个空格都不行 */
/* a[lang="zh"]{
    background: yellow;
} */
/* a[title="this is a link"]{
    background: yellow;
} */
/* class名字是item的,且有属性lang且属性值必须一模一样是zh-cn的 */
/* .item[lang="zh-cn"]{
    background: yellow;
} */
/* id是last且有title属性且有class属性,属性值只能是links的变 */
/* #last[title][class="links"]{
    background: yellow;
} */

/* 写法3: 某某[属性^=属性值] */
/* a标签有class属性且属性值是li开头的 */
/* a[class^=" li"]{
    background-color: yellow;
} */
/* a[title^="this"][lang]{
    background-color: yellow;
} */
/* 写法4 某某[属性$=属性值] */
/* a标签有class属性且属性值结尾是t的变 */
/* a[class$="t"]{
    background-color: yellow;
}  */
/* a[href$=".pdf"]{
    background-color: yellow;
}
a[href$=".doc"]{
    background-color: red;
}
a[href$=".png"]{
    background-color: green;
} */

/* 写法5 某某[属性*=属性值] */
/* 选择到a标签且有href属性且只要有字母b就可以 */
/* a[href*="b"]{
    background-color: green;
} */
/* 写法6 某某[属性~=属性值] */
/* 选择到的是a标签且有class属性,且属性值有完整的itme词的变 */
/* a[class~="item"]{
    background-color: green;
} */
/* 写法7 某某[属性|=属性值] */
/* 这个是选择到有a标签,且有属性title,且属性值只有1个是link的或者属性值有多个但是得是link-开头的变 */
/* a[title|="link"]{
    background-color: green;
}*/
</style>
 
<div class="demo">
    <a href="http://www.baidu.com" target="_blank" class=" links item first" id="first" title="link">1</a>
    <a href="" class="links active item" title="test website" target="_blank" lang="zh">2</a>
    <a href="sites/file/test.html" class="links item" title="link-1 aa" lang="zh-cn">3</a>
    <a href="sites/file/test.png" class="links item" target="_balnk" lang="zh-tw">4</a>
    <a href="sites/file/image.jpg" class="links item" title="link-23 aa">5</a>
    <a href="mailto:baidu@hotmail" class="links item" title="website link" lang="zh">6</a>
    <a href="/a.pdf" class="links item" title="open the website" lang="cn">7</a>
    <a href="/abc.pdf" class="linksitem" title="close the website" lang="en-zh">8</a>
    <a href="abcdef.doc" class="links item" title="http://www.sina.com">9</a>
    <a href="abd.doc" class="linksitem last" id="last">10</a>
</div>

伪类

所有伪类(31个)

选择器例子例子描述
:activea:active选择活动的链接。
:checkedinput:checked选择每个被选中的 元素。
:disabledinput:disabled选择每个被禁用的 元素。
:emptyp:empty选择没有子元素的每个

元素。

:enabledinput:enabled选择每个已启用的 元素。
:first-childp:first-child选择作为其父的首个子元素的每个

元素。

:first-of-typep:first-of-type选择作为其父的首个

元素的每个

元素。

:focusinput:focus选择获得焦点的 元素。
:hovera:hover选择鼠标悬停其上的链接。
:in-rangeinput:in-range选择具有指定范围内的值的 元素。
:invalidinput:invalid选择所有具有无效值的 元素。
:lang(language)p:lang(it)选择每个 lang 属性值以 "it" 开头的

元素。

:last-childp:last-child选择作为其父的最后一个子元素的每个

元素。

:last-of-typep:last-of-type选择作为其父的最后一个

元素的每个

元素。

:linka:link选择所有未被访问的链接。
:not(selector):not(p)选择每个非

元素的元素。

:nth-child(n)p:nth-child(2)选择作为其父的第二个子元素的每个

元素。

:nth-last-child(n)p:nth-last-child(2)选择作为父的第二个子元素的每个

元素，从最后一个子元素计数。

:nth-last-of-type(n)p:nth-last-of-type(2)选择作为父的第二个

元素的每个

元素，从最后一个子元素计数

:nth-of-type(n)p:nth-of-type(2)选择作为其父的第二个

元素的每个

元素。

:only-of-typep:only-of-type选择作为其父的唯一

元素的每个

元素。

:only-childp:only-child选择作为其父的唯一子元素的

元素。

:optionalinput:optional选择不带 "required" 属性的 元素。
:out-of-rangeinput:out-of-range选择值在指定范围之外的 元素。
:read-onlyinput:read-only选择指定了 "readonly" 属性的 元素。
:read-writeinput:read-write选择不带 "readonly" 属性的 元素。
:requiredinput:required选择指定了 "required" 属性的 元素。
:rootroot选择元素的根元素。
:target#news:target选择当前活动的 #news 元素（单击包含该锚名称的 URL）。
:validinput:valid选择所有具有有效值的 元素。
:visiteda:visited选择所有已访问的链接。

结构伪类

  1. 以child结尾的是在所有元素中选择

    • :first-child 第一个子元素

    • :last-child 最后一个子元素

    • :nth-child() 选中第n个元素

      关于:nth-child()的特殊值(括号内的内容可以填写以下几种)

      • n 第n个 n的范围0到正无穷（全选）
      • even或2n 选中偶数位的元素
      • odd或2n+1 选中奇数位得到元素

  2. 以type结尾的是在相同元素中选择

    • :first-of-type 第一个子元素

    • :last-of-type 最后一个子元素

    • :nth-of-type() 选中第n个元素

否定伪类

  • :not() 将符号条件的元素去除

动态伪类

  1. 超链接所独有的
  • :link 表示未访问过的a标签
  • :visited 表示访问过的a标签 **注意:**由于隐私的问题，所以visited这个伪类只能修改链接的颜色
  1. 所有标签都可以使用
  • :hover 鼠标移入后元素的状态
  • :active 鼠标点击后，元素的状态
  • :focus 指当前拥有输入焦点的元素（能接收键盘输入）

动态伪类编写顺序建议为 :link、:visited、:focus、:hover、:active

伪元素

同伪类一样，伪元素也是不存在的元素，表示元素的特殊状态

  • ::first-letter 表示第一个字母
  • ::first-line 表示第一行
  • ::selection 表示选中的元素
  • ::before 元素开始的位置前
    • 一定要与content：一起使用
    • content： 内容, content 可以未空, 但必须要有
  • ::after 元素结束的位置后
    • 一定要与content：一起使用
    • content： 内容, content 可以未空, 但必须要有
    • 用来存放 只有装饰作用, 没有交互作用的小图标

关系（组合）选择器

  1. 子代选择器：父元素>子元素{ }
  2. 后代选择器（空格隔开）：祖先元素 后代元素{ }
  3. 相邻选择器：+ 选中某个元素之后的 相邻下一个元素
  4. 兄弟选择器：~ 选中某个元素之后的 其他的兄弟元素

示例：

选择器示例示例描述
element elementdiv p选择
元素内的所有

元素。

element>elementdiv > p选择其父元素是
元素的所有

元素。

element+elementdiv + p选择所有紧随
元素之后的

元素。

element1~element2p ~ ul选择前面有

元素的每个

    元素。

复合选择器

  1. 并集（分组）选择器：

    语法 :选择器1，选择器2，....,选择器n { }

    作用 : 几个选择器选中的元素 共用一套样式

  2. 交集选择器：

    语法 :交集选择器由两个选择器构成，其中第一个为标签选择器，第二个为 class 选择 器，两个选择器之间不能有空格。

    作用 : 两者之中相同的

    注意：在实际开发中，用的相对较少，而且也不推荐使用，仅需了解

CSS的优先级规则

优先级

CSS优先级有着不可逾越的等级制度，可将其分为0~5这6个等级，其中前4个由CSS选择器决定，后两个由书写形式及特定语法决定

规则

计算规则：优先值越大，优先级越高出现一个0级选择器优先值+0；出现一个1级选择器优先级+1；出现一个2级选择器优先级+10；出现一个3级选择器优先级+100；

0级：优先数值+0

  • 通配选择器：写作 星号（*）

  • 选择符：+ > ~ ||

  • 逻辑组合伪类: :not() :is() :where 等，其本身不影响CSS优先级，影响优先级的是括号内的选择器

    注意：只有逻辑组合伪类的优先级是0

1级：优先数值+1

  • 标签选择器

2级：优先数值+10

  • 类选择器
  • 属性选择器
  • 伪类

3级：优先数值+100

  • ID选择器

4级

  • Style属性内联

5级

  • !import 为顶级优先级，请勿滥用

256个选择器的越级现象

注意：此现象只在IE浏览器中可见，Chrome与Firefox浏览器与2015年修复

<span id='foo'  class='f'>
颜色是？
</span>

<style>
    #foo{
        color: #000;
        background: #eee;
    }
    .f{
        color: #fff;
        background: #333;
    }
   /*256个类选择器*/ .f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f.f{
        color: #fff;
        background: #333;
    }
</style>
avatar
文章
阅读
粉丝