CSS选择器详解-优快云博客

css选择器

选择器就是为样式规则指定一个应用范围

元素选择器

p {color: red; font-size: 10px;}

通配选择器

* {color: red;}

*号只能在class / id / 属性选择器中省略

注意：

* 性能有点低，因为对于一些比如meta / base等元素也会去检查，所以效率不高
开发时浏览器的默认样式可能会给我们带来多浏览器兼容性问题，影响开发效率。
现在很流行的解决方式是一开始就将浏览器的默认样式全部覆盖掉，这就是css reset。
使用css reset重置比*效率更高。
https://meyerweb.com/eric/tools/css/reset/

类选择器

.类名 {color: red;}
当然类选择器可以结合其他选择器一起使用，

p.warning {color: red;}    表示将class属性<包含>warning的p段落的颜色改为red

*.warning == .warning，通配符*可以省略

多类选择器
<p class="warning urgent"> xxx </p>，类名与类名之间以空格分隔，并且区分大小写

.warning {font-size: 16px} # class属性包含warning的所有元素的大小为16px

.urgent {color: red;} # class属性包含urgen的所有元素的颜色为red

.urgent.warning {font-weight: bold;} # 选择class包含urgent和warning的所有元素的字体为bold

注意类名的顺序不限，尽管class="warning urgent"，但是**.urgent.warning以及.warning.urgent**都能选择上。

id选择器

1. 为标签元素设置一个id属性以及值
2. #ID名 {color: red;}
注意：
    1. 全文档唯一
    2. 不能有多个ID值
    3. id选择器尽量少写，用的话一般跟JS有关，尽可能用类选择器

属性选择器

简单属性选择

h1[class] {color: red;}，表示将有class属性的h1元素的颜色设为red
a[href][title] {font-weight: bold}，将同时有href和title属性的HTML超链接的文本设置为bold

根据具体属性值选择

[href="https://www.baidu.com/"] {color: red;}

a[href="https://www.baidu.com/"][title="W3C Home"] {font-size: 16px;}

注意： 这种格式要求必须与属性值完全匹配

对于class="urgent warning"，来说，写法为p[class="urgent warning"]才会正确选择，相当于就是完全串匹配。

子串匹配属性选择器

如果属性值接受词列表（词与词之间以空格分隔），可以根据其中任意一个词进行选择只能接受一个词

p[class~="warning"] {color: red;}

选择foo属性值以“bar”开头的所有元素

[foo^="bar"] {color: red;}

选择foo属性值以“bar”结尾的所有元素

[foo$="bar"] {color: red;}

选择foo属性值中包含"bar"子串的所有元素

[foo*="bar"] {color: red;}

选择lang属性为en或者以en-开头的所有元素

[lang|="en"] {color: red;}

交集选择器

由两个选择器构成，选中二者的交集，两个选择器之间不能由空格分隔，第一个必须为元素选择器，第二个必须为类或者id选择器

p.warning {color: red;}等形式的，就是一个名称而已

分组(并集)选择器

em, p {color: red; font-size: 10px;}
表示em和p元素的颜色都为red,以及字体都为10px
通常为了清晰：
    em,
    p {
        color: red;
        font-size: 10px;
    }

后代选择器

在一个后代选择器中，规则左端的选择器包含两个或多个空格，空格称为结合符

 h1 em {color: gray;}
 将作为h1元素后代的所有em元素文本设置为gray

子元素选择器

> 称为子结合符
h1 > strong {color:gray;}
将作为h1元素子元素的所有strong元素文本设置为gray

table.summary td > p
选择作为td元素子元素的所有p元素，并且td元素作为table元素的后代，该table元素的class属性值要为summary

相邻兄弟选择器

+ 称为相邻兄弟结合符
h1 + p {margin-top: 0;}
选择紧接在h1元素后出现的第一个p元素，并且h1 和 p要有共同的父类

html > body table + p {margin-top: 1.5em;}
选择紧接在table元素后出现的第一个p元素，并且table和p要有共同的父类，父类是body的后代，body是html的子元素

PS：

有以下结构
<div>
    <ol>
        <li>List item 1</li>
        <li>List item 1</li>
        <li>List item 1</li>
    </ol> This is some text that is part of the 'div'.
    <ul>
        <li>A lit item</li>
        <li>Another list item</li>
        <li>Yet another lst item</li>
    </ul>
    <ul>
        <li>A lit item</li>
        <li>Another list item</li>
        <li>Yet another lst item</li>
    </ul>
</div>
    
尽管中间多了一行文本，ol + ul {color: gold;}，仍然能选择第一个ul元素。
因为文本并不包含在兄弟元素中，而是div的一部分

后续兄弟选择器

ol ~ ul {color: gold;}
选择ol元素后所有同级的ul元素，肯定也要有相同的父类

伪类选择器

类：无需用户或者浏览做什么动作就可以显示效果
伪类： 需要用户或浏览器做出某种动作才显示效果
伪元素： 对元素内容进行操作，比伪类更深层次但动态性低，本身在文档中并不存在，是一个抽象元素

伪类选择器
    1. :link
    2. :visited
    3. :focus
    4. :hover
    5. :active
    6. :first-child
    7. :last-child
    8. :nth-child
    8.1 :nth-last-child
    9. :only-child
    10. :first-of-type
    11. :last-of-type
    12. :nth-of-type
    12.1 :nth-last-of-type
    13. :only-of-type
    14. :root
    15. :target
    16. :lang
    17. :empty
    18. :not
    19. :required
    20. :optional
    21. :checked
    22. :read-only
    23. :read-write
    24. :disabled
    25. :enabled
    26. :in-range
    27. :out-of-range
    28. :valid
    29. :invalid
    30. ::selection, 仅支持color / background / cursor / outline

伪元素选择器

伪元素选择器：对元素内容进行操作，比伪类更深层次但动态性低，本身在文档中并不存在，是一个抽象元素
    1. :after
    2. :before
    3. :first-line
    4. :first-letter
CSS3中 伪元素以::开头，但是为了兼容平常还是以:开头

CSS学习之css选择器

目录