CSS选择器大全案例

Language 2021-12-14 17:19:03 views: null

前言

写这个博客的想法很简单，主要目的正在学习css选择器，一些比较偏门的选择器没有讲，自己网上查过很多一些不常用的但是又怕之后会忘记，在掘金上参考了一些选择器的博客，发现部分选择器只有描述对基础差的只有描述又看不懂，寻思着参考之后做一次总结吧，所有选择器案例集合的大全，以后需要的时候随时查阅，不足的地方请大家指出，多多包涵。

选择器优先级：这个写在最前面，希望每次看这个博客的小伙伴进来第一眼就看到这个，重要的事情说三次，切记、切记、切记。

!important > 行内样式 > ID选择器 > 类、伪类、属性 > 元素、伪元素 > 继承 > 通配符

css选择器分类

  1. 简单选择器

    • 通配符选择器

    示例：*

    * 代表所有元素。

    *{
    padding: 0;
    margin: 0;
}
div{
    width: 200px;
    height: 200px;
    background-color: red;
}
<body>
    <div>哈哈</div>
</body>
复制代码

    • ID选择器

    示例：id=”demo”

    匹配 id=”demo” 的元素(id唯一)

     注意：
 1、id值必须是唯一的，在一个页面中只能出现一次。如果出现重复的id值是不符合规范的。
 2、所有标签都有id属性，id起名规范：字母、下划线、中划线、数字组成不能以数字开头。
 3、名字要带其含义，不要胡乱起名称。
 4、驼峰写法：SearchButton（大驼峰）searchButton（小驼峰，推荐写法）
 5、下划线写法：Search_button，多个单词，从第二个单词开始，每个单词的前面添加一条下划线。
 6、选择器尽量不要在css中使用，而是配合js使用。
复制代码
    #demo{
    color:red;
}
<body>
    <div id="demo"></div>
</body>
复制代码

    • 类选择器

    示例：.demo

    匹配 class 属性值包含 demo 的元素。

     注意：
 1、class值可以不唯一，类选择器选中的是拥有相同class值的标签元素。
 2、一个标签可以拥有多个class值。
 3、命名规则与id相同。
 4、类写样式，id写行为。
复制代码
    .demo{
    color:red;
}
<body>
    <div class="demo"></div>
</body>
复制代码

    • 元素选择器

    示例：h1

    匹配所有 h1 元素。

    h1{
    color:red;
}
<body>
    <h1>哈哈</h1>
</body>
复制代码

    • 包含/后代选择器

    示例：div span

    匹配所有被div包含的span元素

    div span{
    width: 100px;
    height: 100px;
    background: skyblue;
}
<div>
    <span>1</span>
    <span>2</span>
    <p><span>3</span></p>
</div>
复制代码

    • 子代选择器

    示例：div>span

    匹配 div 元素的所有一级子元素 span。

    div > span {
    color: pink;
}
<div>
    <span>1</span>
    <span>2</span>
    <p><span>3</span></p>
</div>
复制代码

    • 相邻兄弟选择器

    示例：div+p

    匹配紧跟在 div 同级元素之后的第一个 p 元素。

    div+p {
    color:red;
}
<body>
    <div>h1</div>
    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
</body>
复制代码

    • 一般兄弟选择器

    示例：div~p

    匹配div元素后面的所有兄弟元素p。

    div~p{
    color:red;
}
<body>
    <div>1</div>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <span><p>5</p></span>
</body>
复制代码

    • 组合选择器

    示例：div,p

    匹配所有div元素和p元素。

    div,p {
    color: red;
}
<div>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <p>4</p>
    <div><span>5</span>6</div>
</div>
复制代码

  2. 动态伪类选择器

    • :link

    示例:a:link

    匹配未访问过的链接a。

    • :visited

    示例:a:visited

    匹配访问过的链接a

    • :hover

    示例:a:hover

    设置元素在鼠标悬停时的样式。

    • :active

    示例:a:active

    匹配被激活的元素

    • :focus

    示例:a:focus

    匹配获取焦点的指定元素

    • :focus-within

    示例:a:focus-within

    匹配当前获取焦点的元素或者其父辈元素（类似于JavaScript事件冒泡）。此选择器扩展了获取焦点生效范围

  3. UI元素伪类选择器

    • :default

    匹配被默认选中的表单元素，比如复选框、单选按钮或者select下拉菜单。

    • :checked

    匹配处于选中状态(checked)的元素。

    • :enabled

    匹配处于可用状态的元素。

    • :disabled

    匹配处于禁用状态的元素。

  4. 结构性伪类选择器

    • :root

    示例：:root

    :root匹配文档的根元素，一般来讲就是HTML,对于 HTML 来说，:root表示<html>元素，除了优先级更高之外，与html选择器相同。

        :root{
        background-color:yellow;
    }
复制代码

    • :not()

    示例：li:not(.demo)

    匹配所有的li元素，然后通过:not将class属性值为"demo"的元素筛选掉。

    li{
    font-size: 30px;
}
li:not(.demo) {
    color: #ff0000;
}
<ul>
    <li>1</li>
    <li class="demo">2</li>
    <li>3</li>
</ul>
复制代码

    • :nth-child(n)

    示例：ul > li:nth-child(n)

    匹配父元素中正数第n个的类型为li的子元素。

     li{
    width: 50px;
    height: 50px;
    background-color: yellow;
    margin-left: 10px;
    list-style: none;
    float: left;
}
ul > li:nth-child(1){
    background-color: red;
}
 <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
复制代码

    image.png

    • :nth-of-type(n)

    示例：ul > li:nth-of-type

    匹配同级type标签类型元素集合中的第n个元素。

    li{
    width: 50px;
    height: 50px;
    background-color: yellow;
    margin-left: 10px;
    list-style: none;
    float: left;
}
ul > li:nth-of-type(1){
    background-color: red;
}
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
复制代码

    image.png

    • :first-child

    示例：ul > li:first-child

    匹配父元素中第一位类型为li的子元素。

    li{
    width: 50px;
    height: 50px;
    background-color: yellow;
    margin-left: 10px;
    list-style: none;
    float: left;
}
ul > li:first-child{
    background-color: red;
}
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
复制代码

    image.png

    • :last-child

    示例：ul > li:last-child

    匹配父元素中最后一位类型为li的子元素。

    li{
    width: 50px;
    height: 50px;
    background-color: yellow;
    margin-left: 10px;
    list-style: none;
    float: left;
}
ul > li:last-child{
    background-color: red;
}
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
复制代码

    image.png

    • :first-of-type

    示例：ul > li:first-of-type

    匹配父元素下li类型子元素集合中，处于同标签类型第一位的元素。

    li{
    width: 50px;
    height: 50px;
    background-color: yellow;
    margin-left: 10px;
    list-style: none;
    float: left;
}
ul > li:first-of-type{
    background-color: red;
}
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
复制代码

    image.png

    • :last-of-type

    示例：ul > li:last-of-type

    匹配父元素下li类型子元素集合中，处于同标签类型最后一位的元素。

    li{
    width: 50px;
    height: 50px;
    background-color: yellow;
    margin-left: 10px;
    list-style: none;
    float: left;
}
ul > li:last-of-type{
    background-color: red;
}
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
复制代码

    image.png

    • :only-child

    示例：ul > li:only-child

    匹配父元素中唯一的类型为li的子元素。

    ul{
    overflow: hidden;
}
li{
    width: 50px;
    height: 50px;
    background-color: yellow;
    margin-left: 10px;
    list-style: none;
    float: left;
}
ul > li:only-child{
    background-color: red;
}
<ul>
    <li>ul1-1</li>
    <li>ul1-2</li>
    <li>ul1-3</li>
    <li>ul1-4</li>
</ul>
<ul>
    <li>ul2-1</li>
</ul>
复制代码

    image.png

    • :only-of-type

    示例：ul > li:only-of-type

    ul > li:only-of-type匹配父元素下唯一存在的li类型子元素。

     ul{
     overflow: hidden;
 }
 li{
     width: 50px;
     height: 50px;
     background-color: yellow;
     margin-left: 10px;
     list-style: none;
     float: left;
 }
 ul > li:only-of-type{
     background-color: red;
 }
 <ul>
     <li>ul1-1</li>
     <li>ul1-2</li>
     <li>ul1-3</li>
     <li>ul1-4</li>
 </ul>
 <ul>
     <li>ul2-1</li>
 </ul>
复制代码

    image.png

    • :empty

    示例：li:empty

    匹配内容为空的li元素

    li{
    width: 50px;
    height: 50px;
    background-color: yellow;
    margin-left: 10px;
    list-style: none;
    float: left;
}
li:empty{
    background-color: red;
}
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li></li>
</ul>
复制代码

    image.png

    • :nth-last-child(n)

    示例：ul > li:nth-last-child

    匹配父元素中倒数第n个类型为li的子元素。

    li{
    width: 50px;
    height: 50px;
    background-color: yellow;
    margin-left: 10px;
    list-style: none;
    float: left;
}
ul > li:nth-last-child(2){
    background-color: red;
}
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
复制代码

    image.png

    • :nth-last-of-type(n)

    示例：ul > li:nth-last-of-type

    匹配同级type标签类型元素集合中的倒数第n个元素。

    li{
    width: 50px;
    height: 50px;
    background-color: yellow;
    margin-left: 10px;
    list-style: none;
    float: left;
}
ul > li:nth-last-of-type(2){
    background-color: red;
}
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
复制代码

    image.png

  5. 属性选取器

    • [key]

    示例：div[class]

    匹配具有class属性的div元素。

    先设置了全部 div 的背景颜色为red，然后给包含 class 属性名的 div 选中背景颜色设置为 gold，具体看代码和浏览器显示结果。

    div{
    width: 50px;
    height: 50px;
    display: inline-block;
    background-color: red;
}
div[class]{
    background-color: gold;
}
<body>
    <div class>0</div>
    <div class="text1">1</div>
    <div class="text2" id="text">2</div>
    <div id="text3">3</div>
</body>
复制代码

    image.png

    • [key = value]

    示例：div[class="text"]

    匹配具有class属性，且属性值是text的div元素。

    先设置了全部 div 的背景颜色为 red，然后给包含 class = "text" 的 div 选中背景颜色设置为 gold，具体看以下代码和浏览器显示结果。

    div{
    width: 50px;
    height: 50px;
    display: inline-block;
    background-color: red;
}
div[class="text"]{
    background-color: gold;
}
<body>
    <div class>0</div>
    <div class="text">1</div>
    <div class="text2" id="text">2</div>
    <div id="text3">3</div>
</body>
复制代码

    image.png

    • [key ~= value]

    示例：div[class~="text"]

    匹配具有class属性，且属性值为一个用空格分隔的字词列表，并且列表中的某个字词等于text的div元素。

    先设置了全部 div 的背景颜色为 red，然后给包含 class ~= "text" 的 div 选中背景颜色设置为 gold，具体看以下代码和浏览器显示结果。

    div{
    width: 50px;
    height: 50px;
    display: inline-block;
    background-color: red;
}
div[class~="text"]{
    background-color: gold;
}
<body>
    <div class="text">1</div>
    <div class="text text2">2</div>
    <div class="text3">3</div>
    <div id="text4">4</div>
</body>
复制代码

    image.png

    • [key $= value]

    示例：div[class$="text"]

    匹配具有class属性，且属性值以text开头的div元素。

    先设置了全部 div 的背景颜色为 red，然后给包含 class $= "text" 选中背景颜色设置为 gold，具体看以下代码和浏览器显示结果。

    div{
    width: 50px;
    height: 50px;
    display: inline-block;
    background-color: red;
}
div[class$="text"]{
    background-color: gold;
}
<body>
    <div class="text1">1</div>
    <div class="text2">2</div>
    <div class="red-text3">3</div>
    <div class="4text">4</div>
</body>
复制代码

    image.png

    • [key *= value]

    示例：div[class*="text"]

    匹配具有class属性，且属性值为以text结尾的div元素。

    先设置了全部 div 的背景颜色为 red，然后给包含 class *= "text" 选中背景颜色设置为 gold，具体看以下代码和浏览器显示结果。

    div{
    width: 50px;
    height: 50px;
    display: inline-block;
    background-color: red;
}
div[class*="text"]{
    background-color: gold;
}
<body>
    <div class="text">1</div>
    <div class="text colorRed">2</div>
    <div class="textRed">3</div>
    <div class="red_text">4</div>
    <div id="text">5</div>
</body>
复制代码

    image.png

    • [key |= value]

    示例：div[class*="text"]

    匹配具有class属性，且属性值是以"text"开头并用"-"分割的div元素。

    div{
    width: 50px;
    height: 50px;
    display: inline-block;
    background-color: red;
}
div[class|="text"]{
    background-color: gold;
}
<body>
    <div class="text">1</div>
    <div class="text colorRed">2</div>
    <div class="textRed">3</div>
    <div class="red_text">4</div>
    <div class="text-red">4</div>
</body>
复制代码

  6. 伪元素选择器

    • ::selection

    示例：::selection

    匹配被选中的文本部分。

    ::selection {
    color:#ff0000;
}
<div>
    <p>尝试选择本页的一些文本</p>
    <span>这是一些文本</span>
    <div>这是div元素中的一些文本.</div>
    <a href="//www.baidu.com/" target="_blank">链接baidu!</a>
</div>
复制代码

    image.png

    • ::after

    示例：p::after

    设置在对象后（依据对象树的逻辑结构）产生的内容。

    p::after {
    content:"台词：";
    background-color:yellow;
    color:red;
    font-weight:bold;
}
<body>
    <p>我是个帅哥。</p>
    <p>我住在 家里。</p>
    <p><b>注释：</b>对于在 IE8 中工作的 :after，必须声明 DOCTYPE。</p>
</body>
复制代码

    image.png

    • ::before

    示例：p::before

    设置在元素内部前面（依据对象树的逻辑结构）产生的内容。

    p::before {
    content:"台词：";
    background-color:yellow;
    color:red;
    font-weight:bold;
}
<body>
    <p>我是个帅哥。</p>
    <p>我住在 家里。</p>
    <p><b>注释：</b>对于在 IE8 中工作的 :after，必须声明 DOCTYPE。</p>
</body>
复制代码

    image.png

    • ::first-line

    示例：p:first-line

    匹配元素内第一行

    p:first-line{
    background-color:yellow;
}
<body>
    <h1>WWF's Mission Statement</h1>
    <p>To stop the degradation of the planet's natural environment and to build a future in which humans live in harmony with nature, by; conserving the world's biological diversity, ensuring that the use of renewable natural resources is sustainable, and promoting the reduction of pollution and wasteful consumption.</p>
</body>
复制代码

    image.png

    • ::first-letter

    示例：h1:first-letter

    匹配指定元素内第一个字符。

    h1:first-letter{
    color:yellow;
}
<body>
    <h1>WWF's Mission Statement</h1>
</body>
复制代码

    image.png

Guess you like

Origin juejin.im/post/7041164437939552263
Recommended
Ranking
[Algorithm] greedy _ program scheduling issues
Spring 控制反转（IOC）
Data structure-6.6 figure
Indicates that the class or member method has abstract properties
Huawei v5 server installed Linux operating system
Postgresql source code analysis - creating ordinary tables
Chapter 10 Evaluation Classification Results
Cloud service Ubuntu 20.04 version uses Nginx to deploy static web pages
Java Exercise 17.1
Solve the problem that git cannot automatically push submission in IDEA Push failed: Failed with error: Could not read from remote repository.
Daily
More
2024-05-09(32)
2024-05-08(18)
2024-05-07(34)
2024-05-06(6)
2024-05-05(0)
2024-05-04(18)
2024-05-03(8)
2024-05-02(0)
2024-05-01(4)
2024-04-30(36)

Code World

© 2018 codetd.com