#yyds干货盘点#---css选择器操作

Posted 2021-12-10 旺仔呀旺仔

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了#yyds干货盘点#---css选择器操作相关的知识，希望对你有一定的参考价值。

一、基本选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
         /*标签选择器*/
        div{
            color: red;
        }

        li{
           color: green;
         }

        /*id选择器*/
        #i1{
            color: lightskyblue;
        }

        /*class选择器*/
        .c1{
            color: lightcoral;
        }

        /*通配选择器*/
        *{
             color: darkmagenta;
         }

    </style>
</head>
<body>

<div>alvin</div>
<div>alvin</div>
<div>alvin</div>

<ul>
    <li>123</li>
    <li>234</li>
    <li>345</li>
</ul>

<p id="i1">p标签1</p>
<p id="i2">p标签2</p>
<p class="c1">p标签3</p>
<p class="c1">p标签4</p>
<p class="c1">p标签5</p>

</body>
</html>

二、组合选择器

2.1 后代子代选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
         /*.c2{*/
         /*    color: red;*/
         /*}*/

         /*后代选择器*/ 
         /*.c1 .c2 .c3{*/
         /*    color: red;*/
         /*}*/

         /*子代选择器，只找到儿子层*/
         .c1 > .c3{
             color: green;
         }

    </style>
</head>
<body>

<div class="c1">
    <div class="c2">
        <div class="c3">item1</div>
    </div>
</div>

<div class="c1">
    <div class="c3">item2</div>
</div>

</body>
</html>

2.2 与或选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
       div.c1,#i1{   /*div.c1与表示且的关系，紧贴 ,#i1或用逗号分割*/
           color: white;
           background-color: #336699;
           font-size: 32px;
       }

    </style>
</head>
<body>

<div class="c1">item1</div>
<p class="c1">item2</p>
<div>item3</div>

<p id="i1">item4</p>

</body>
</html>

2.3 兄弟选择器

定义：拥有同一个父亲的标签

毗邻选择器和自己同级的下一个兄弟标签
普通兄弟选择器拥有同一个父亲的标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*!*毗邻选择器*!*/
        /*.c2 + .c3{*/
        /*    color: red;*/
        /*}*/

        /*普通兄弟选择器*/
        /*.c2 ~ div{*/
        /*    color: red;*/
        /*}*/

    </style>
</head>
<body>

<div class="c1">item1</div>
<div class="c2">item2</div>
<div class="c3">item3</div>
<div class="c4">item4</div>
<div class="c5">item5</div>
<p>item6</p>

</body>
</html>

三、属性选择器

E[att]          匹配所有具有att属性的E元素，不考虑它的值。（注意：E在此处可以省略。
                比如“[cheacked]”。以下同。）   p[title] { color:#f00; }

E[att=val]      匹配所有att属性等于“val”的E元素   div[class=”error”] { color:#f00; }

E[att~=val]     匹配所有att属性具有多个空格分隔的值、其中一个值等于“val”的E元素
                td[class~=”name”] { color:#f00; }

E[attr^=val]    匹配属性值以指定值开头的每个元素                    
                div[class^="test"]{background:#ffff00;}

E[attr$=val]    匹配属性值以指定值结尾的每个元素    div[class$="test"]{background:#ffff00;}

E[attr*=val]    匹配属性值中包含指定值的每个元素    div[class*="test"]{background:#ffff00;}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            color: white;
            background-color: #424242;
        }

        .c2{
            font-size: 32px;
            font-style: italic;
        }
        .c3{
            font-weight: bolder;
        }

        /*属性选择器*/
        input[type="text"]{
            border:1px solid red;
        }

        div[k1="v1"]{
            color: green;
        }

        [href$=".png"]{ /*通过正则去模糊匹配值*/
            color: red;
        }

        [class*="col-md-"]{ /*通过正则去模糊匹配值*/
            border: 1px solid rebeccapurple;
        }

    </style>
</head>
<body>

<!--<div class="c1">alvin</div>-->
<!--<div class="c2 c3">alvin2</div>-->

<input type="text">
<input type="password">

<div k1="v1">item1</div>
<p k1="v1">item2</p>

<div class="c4">
    <a rel="nofollow" href="1.png">click1</a>
    <a rel="nofollow" href="2.png">click2</a>
    <a rel="nofollow" href="3.jpg">click3</a>
    <a rel="nofollow" href="4.png">click4</a>
</div>

<div>
    <div class="col-md-2">col-md-2</div>
    <div class="col-md-4">col-md-4</div>
    <div class="col-md-1">col-md-1</div>
</div>

<div class="c1 c2 c3">alvin</div>

</body>
</html>

四、伪类选择器

4.1 anchor伪类：专用于控制链接的显示效果

anchor伪类：专用于控制链接的显示效果

:link	a:link	选择所有未被访问的链接。
:visited	a:visited	选择所有已被访问的链接。
:active	a:active	选择活动链接。
:hover	a:hover	选择鼠标指针位于其上的链接。

    <style>
           a:link{ /*选择所有未被访问的链接*/
               color: red;
           }
           a:visited{ /*选择所有已被访问的链接*/
               color: coral;
           }
           a:hover{ /*选择鼠标指针位于其上的链接*/
               color: blue;
           }
           a:active{ /*选择活动链接*/
               color: rebeccapurple;
           }

    </style>

4.2 before after伪类

before/after伪类相当于在元素内部插入两个额外的标签，其最适合也是最推荐的应用就是图形生成。在一些精致的UI实现上，可以简化HTML代码，提高可读性和可维护性。

:first-child	p:first-child	选择属于父元素的第一个子元素的每个 <p> 元素。
:last-child	p:last-child	选择属于其父元素最后一个子元素每个 <p> 元素。
:before	p:before	在每个 <p> 元素的内容之前插入内容。
:after	p:after	在每个 <p> 元素的内容之后插入内容。
:first-letter	p:first-letter	选择每个 <p> 元素的首字母，并为其设置样式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>

        .c1 p:first-child{ /*c1下边是p标签的第一个孩子*/
            color: red;
        }

        .c1 :last-child{ /*c1下边的第一个孩子*/
            color: red;
        }

        p#i1:after{ /*在每个p标签下有id为i1的标签的元素的内容之后插入内容。*/
            content:"hello";
            color:red;
            display: block;
        }

    </style>

</head>
<body>

<div class="c1">
    <p>item1</p>
    <p>item1</p>
    <div>item1</div>
    <p>item1</p>
</div>

<p id="i1">p标签</p>

</body>
</html>

五、css样式继承

css的样式表继承指的是，特定的css属性向下传递到子孙元素

因此，如果了解了哪些样式是会继承到后代元素的，那么就可以避免这些问题的发生了。

文本相关属性
font-family	font-size	letter-spacing	line-height
font-style	font-variant	text-align	text-indent
font-weight	font	text-transform	word-spacing
color	direction
列表相关属性
list-style-image	list-style-position	list-style-type	list-style
表格和其他相关属性
border-collapse	border-spacing	caption-side	empty-cells
cursor

六、选择器优先级

所谓CSS优先级，即是指CSS样式在浏览器中被解析的先后顺序。样式表中的特殊性描述了不同规则的相对权重。

/*
!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

1 内联样式表的权值最高               style=""           1000；

2 统计选择符中的ID属性个数。         #id                100

3 统计选择符中的CLASS属性个数。      .class             10

4 统计选择符中的HTML标签名个数。     标签名              1

按这些规则将数字符串逐位相加，就得到最终的权重，然后在比较取舍时按照从左到右的顺序逐位比较。
*/

1、有!important声明的规则高于一切。

2、如果!important声明冲突，则比较优先权。

3、如果优先权一样，则按照在源码中出现的顺序决定，后来者居上。

4、由继承而得到的样式没有specificity的计算，它低于一切其它规则(比如全局选择符*定义的规则)。

5、用数字表示只是说明思想，一万个class也不如一个id权值高

======================================================================

以上是关于#yyds干货盘点#---css选择器操作的主要内容，如果未能解决你的问题，请参考以下文章

如何为 .NET 项目自定义强制代码样式规则 #yyds干货盘点#

#yyds干货盘点#CSS实现loading效果效果

#yyds干货盘点#持续集成工具选择及操作步骤

#yyds干货盘点#Windows Server之CA证书服务器

#yyds干货盘点#Linux常见面试题之操作实战