• CSS选择器汇总


    前言

    工作中部分选择器总是忘记其具体的含义,这在开发项目时很影响效率,我始终相信每个选择器无论简单复杂,既然诞生了就必定有他的使命,虽然常用的选择器就那么几个就够用了,但系统的掌握所有的选择器还是很有必要的,特别是如果你想开发一个属于的UI框架时,会发现合理的使用选择器,可以大量减少类名的使用。以下产考W3C总结,如有错误还请批评指正。

    *

    * {
      color: red;
    }
    
    
    <p>一段文字</p> <!-- 红色 -->
    <span>一段文字</span> <!-- 红色 -->
    

    说明:通配符选择器。选择所有的元素

    .class

    .intro {
      color: red;
    }
    
    
    <p class="intro">一段文字</p> <!-- 红色 -->
    

    说明:类选择器,选者拥有指定类名的元素。选择类名为intro的所有元素

    #id

    #intro {
      color: red;
    }
    
    <p id="intro">一段文字</p> <!-- 红色 -->
    

    说明:id选择器,选择拥有id的元素。选择id为intro的元素

    p

    p {
      color: red;
    }
    
    <p>一段文字</p>  <!-- 红色 -->
    

    说明:标签选择器,选择指定标签的元素。选择所有的p元素

    div,p

    p,
    div{
     color: red;
    }
    
    <p>hello</p> <!-- 红色 -->
    <div>world</div> <!-- 红色 -->
    

    说明:并列选择器,用于同时选择多个指定元素。选择所有的p元素和div元素。

    div p

    div p{
     color: red;
    }
    
    
    <div>
     <p>hello</p> <!-- 红色 -->
     <p>world</p> <!-- 红色 -->
    </div>
    

    说明:子代选择器,选择指定元素内部的元素。选择div元素内部的所有p元素。

    div > span

    div > span{
     color: red;
    }
    
    <div>
     <p><span>world</span></p>
     <span>hello</span> <!-- 红色 -->
    </div>
    

    说明:子元素选择器,选择拥有特定父元素的元素。选择父元素为div的span元素。

    div + p

    div + p{
     color: red;
    }
    
    <div>
      <p>hello</p>
      <p>hello</p>
      <div><p>world</p></div>
      <p>hello</p> <!-- 红色-->
    </div>
    

    说明:紧邻选择器,选择指定元素后紧跟的元素(同级)。选择div元素后面紧邻的p元素,他们必须是同一级

    [target]

    a[target] {
      color: red;
    }
    
    <a href="https://www.86886.wang" target="_blank">VueBlog</a> <!-- 红色 -->
    <a href="https://www.86886.wang">VueBlog</a>
    

    说明:属性选择器,选择拥有指定属性的元素。选中拥有target属性的a元素。

    [target="_blank"]

    a[target="_blank"] {
      color: red;
    }
    
    <a href="https://www.86886.wang" target="_blank">VueBlog</a> <!-- 红色 -->
    <a href="https://www.86886.wang" target="_self">VueBlog</a>
    

    说明:属性选择器,选者拥有指定属性和值的元素。选择target属性为"_blank"的元素

    [title~=VueBlog]

    a[title~=VueBlog] {
      color: red;
    }
    
    <a href="https://www.86886.wang" target="_blank" title="vueblog">VueBlog</a>
    <a href="https://www.86886.wang" target="_self"  title="Vue VueBlog">VueBlog</a> <!-- 红色 -->
    

    说明:属性选择器,选择属性值包含特定词汇的元素。选择title包含VueBlog的元素,属性值区分大小写,并且是单独的单词。

    [title|=Vue]

    a[title~=Vue] {
      color: red;
    }
    
    <a href="https://www.86886.wang" target="_blank" title="Vue">VueBlog</a> <!-- 红色 -->
    <a href="https://www.86886.wang" target="_blank" title="Vue-Blog">VueBlog</a><!-- 红色 -->
    <a href="https://www.86886.wang" target="_self"  title="VueBlog">VueBlog</a>
    

    说明:属性选择器,选取属性值以指定词汇开头的元素。选择title以Vue开头的元素,可以拥有连字符。

    [title^=Vue]

    a[title^=Vue] {
      color: red;
    }
    
    <a href="https://www.86886.wang" target="_blank" title="Vue">VueBlog</a> <!-- 红色 -->
    <a href="https://www.86886.wang" target="_blank" title="Vue-Blog">VueBlog</a><!-- 红色 -->
    <a href="https://www.86886.wang" target="_self"  title="VueBlog">VueBlog</a><!-- 红色 -->
    

    说明:属性选择器,选取属性值以指定字母开头的元素。选择属性值以Vue开头的元素,这个选择器拥有[attrbute|=value]选择器的所有功能且更强大。

    [title$="Blog"]

    a[title$=Blog] {
      color: red;
    }
    
    <a href="https://www.86886.wang" target="_blank" title="Vue">VueBlog</a>
    <a href="https://www.86886.wang" target="_blank" title="Vue-Blog">VueBlog</a><!-- 红色 -->
    <a href="https://www.86886.wang" target="_self"  title="VueBlog">VueBlog</a><!-- 红色 -->
    

    说明:属性选择器,选择属性值以指定字母结尾的元素。选择title属性以Blog结尾的元素。

    [title*=Blog]

    a[title*=Vue] {
      color: red;
    }
    
    <a href="https://www.86886.wang" target="_blank" title="Blog system">VueBlog</a> <!-- 红色 -->
    <a href="https://www.86886.wang" target="_blank" title="Vue-Blog">VueBlog</a><!-- 红色 -->
    <a href="https://www.86886.wang" target="_self"  title="VueBlog">VueBlog</a><!-- 红色 -->
    

    说明:属性选择器,选择属性值包含指定字母的元素。选择title属性包含Blog的元素。

    p ~ ul

    p ~ ul {
      color: red;
    }
    <div>一个 div 元素。</div>
    <ul>
      <li>咖啡</li>
      <li>牛奶</li>
      <li>茶</li>
    </ul>
    
    
    <p>第一段。</p>
    <h2>一个列表</h2>
    <!-- 红色 -->
    <ul>
      <li>咖啡</li>
      <li>牛奶</li>
      <li>茶</li>
    </ul>
    
    <h2>另一个列表</h2>
    <!-- 红色 -->
    <ul>
      <li>咖啡</li>
      <li>牛奶</li>
      <li>茶</li>
    </ul>
    

    说明:选择指定元素后的所有元素。选择p元素后的ul元素,他们必须拥有相同的父元素,即在同一级。

    a:link {
      color: red;
    }
    
    <!-- 红色 -->
    <a href="https://www.86886.wang" title="VueBlog">VueBlog</a>
    

    说明:选择未访问的a元素。

    a:visited

    a:visited {
      color: red;
    }
    
    <!-- 访问过后文字为红色 -->
    <a href="https://www.86886.wang" title="VueBlog">VueBlog</a>
    

    说明:选择已访问的a元素

    a:hover

    a:hover {
      color: red;
    }
    
    <!-- 鼠标悬浮在链接上时为红色 -->
    <a href="https://www.86886.wang" title="VueBlog">VueBlog</a>
    

    说明:选择鼠标悬浮到的元素。适用于所有元素

    a:active

    a:active {
      color: red;
    }
    
    <!-- 鼠标点击时为红色 -->
    <a href="https://www.86886.wang" title="VueBlog">VueBlog</a>
    

    说明:选择活动链接,即正在点击的链接。

    a:focus

    a:focus {
      color: red;
    }
    
    <!-- 获得焦点是为红色 -->
    <a href="https://www.86886.wang" title="VueBlog">VueBlog</a>
    

    说明:选择获得焦点的元素。对于a元素来说,通过tab键和点击该元素都可以获得焦点,而:active选择的是活动链接,即点击那一瞬间。:focus适用于可获得焦点的元素,如input,a元素

    p:first-letter

    p:first-letter {
      color:red;
    }
    <!-- H红色-->
    <p>Hello World<p>
    <!--世字红色-->
    <p>世界你好</p>
    

    说明:选择首字母。汉字也能被选中。

    p:first-line

    p:first-line{
      color:red;
    }
    <!-- 红色-->
    <p>Hello World<p>
    <!--红色-->
    <p>世界你好</p>
    

    说明:选择首行。汉字也能被选中。

    p:first-child

    p:first-child{
      color:red;
    }
    <body>
      <span>世界你好1</span>
      <p>世界你好2</p>
      <div>
        <p>Hello World<p> <!-- 红色-->
        <p>世界你好3</p>
      </div>
    </body>
    

    说明:选择其父元素的第一个子元素。上面的例子中只有Hello World是红色,虽然"世界你好2"也拥有body这个父元素,但他不是body的第一个子元素

    p:last-child

    p:last-child{
      color:red;
    }
    <body>
      <span>世界你好1</span>
      <p>世界你好2</p>
      <div>
        <p>Hello World<p> 
        <p>世界你好3</p> <!-- 红色-->
      </div>
    </body>
    

    说明:选择其父元素的最后一个子元素。例子中“世界你好2”不是body元素的最后一个子元素。

    p:only-child

    p:only-child{
      color:red;
    }
    <body>
      <span>世界你好1</span>
      <p>世界你好2</p>
      <div>
        <p>世界你好3</p> <!-- 红色-->
      </div>
    </body>
    

    说明:选择其父元素仅有一个子元素的元素。

    p:nth-child(n)

    p:nth-child(2){
      color:red;
    }
    <body>
      <span>世界你好1</span>
      <p>世界你好2</p>  <!-- 红色-->
      <div>
        <p>Hello World</p>
        <p>世界你好3</p> <!-- 红色-->
      </div>
    </body>
    

    说明:选择其父元素的第n个子元素为指定元素的元素。上面例子中,“世界你好2”是父元素body的第二个子元素,“世界你好3”是div元素的第二个子元素,所以他们均被选中。

    p:nth-last-child(n)

    p:nth-last-child(2){
      color:red;
    }
    <body>
      <span>世界你好1</span>
      <p>世界你好2</p>  <!-- 红色-->
      <div>
        <p>Hello World</p>  <!-- 红色-->
        <p>世界你好3</p>
      </div>
    </body>
    

    说明:选择其父元素的倒数第n个子元素为指定元素的元素。

    p::before

    p::before {
      content: "前面:";
      color: red;
    }
    
    <p>世界你好</p>
    

    说明:伪元素,在指定元素前面插入一个元素。

    p::after

    p::after {
      content: "后面";
      color: red;
    }
    
    <p>世界你好</p>
    

    说明:伪元素,在指定元素后面插入一个元素。

    p:lang(zh)

    p:lang(zh) {
      color: red;
    }
    
    <p lang="zh-CN">汉字</p> <!-- 红色-->
    <p lang="zh-Hans">汉字</p>  <!-- 红色-->
    <p lang="en">English</p>
    

    说明:选择lang属性以指定词汇开头的元素。这里可以拥有连字符。

    p:first-of-type

    p:first-of-type {
      color: red;
    }
    <body>
      <span>世界你好1</span>
      <p>世界你好2</p>  <!-- 红色-->
      <div>
        <p>Hello World</p>  <!-- 红色-->
        <p>世界你好3</p>
      </div>
    </body>
    

    说明:选择父元素下第一个子元素为指定类型的元素。上面的例子中世界你好2是body元素的一个子元素,并且是第一个类型为p的元素;"Hello World"是div元素的第一个类型为p的元素。

    p:last-of-type

    p:last-of-type {
      color: red;
    }
    <body>
      <span>世界你好1</span>
      <p>世界你好2</p>  <!-- 红色-->
      <div>
        <p>Hello World</p>  
        <p>世界你好3</p> <!-- 红色-->
      </div>
    </body>
    

    说明:选择父元素下最后一个子元素为指定类型的元素。

    p:only-of-type

    p:only-of-type {
      color: red;
    }
    <body>
      <span>世界你好1</span>
      <p>世界你好2</p>  <!-- 红色-->
      <div>
        <p>Hello World</p>  
        <p>世界你好3</p>
      </div>
    </body>
    

    说明:选择父元素下仅有一个子元素为指定类型的元素。上面的例子中,body元素的子元素中,“世界你好2”是仅有的一个p元素

    p:nth-of-type(n)

    p:nth-of-type(2) {
      color: red;
    }
    <body>
      <span>世界你好1</span>
      <p>世界你好2</p> 
      <div>
        <p>Hello World</p>  
        <p>世界你好3</p><!-- 红色-->
      </div>
    </body>
    

    说明:选择父元素下第n个子元素类型为指定元素的元素。上面的例子中“世界你好3”是div元素的第二个类型为p的子元素

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

    p:nth-last-of-type(2) {
      color: red;
    }
    <body>
      <span>世界你好1</span>
      <p>世界你好2</p> 
      <div>
        <p>Hello World</p>  <!-- 红色-->
        <p>世界你好3</p>
      </div>
    </body>
    

    说明:选择父元素下倒数第n个子元素类型为指定元素的元素。上面的例子中“Hello World”是div元素的倒数第二个类型为p的子元素

    :root

    :root {
      background-color: #f3f3f3;
    }
    
    

    说明::root选择文档的根元素,在HTML中根元素就是html元素。

    p:empty

    p:empty {
      background-color: red;
    }
    <p></p> <!-- 红色背景 -->
    <p> </p>
    <p>世界你好</p> 
    

    说明:选择子元素为空的元素。空格属于文本节点,所以上面例子中第二个p元素没有被选中。

    :target

    :target {
      color: red;
    }
    
    <a href="#test1"> test1 </a>
    <a href="#test2"> test2 </a>
    <p id="test1">世界你好1</p>
    <p id="test2">世界你好2</p>
    

    说明:选择当前活动的目标元素。上面的例子中,点击test1时,“世界你好1”变成红色,点击test2时,“世界你好2”变成红色。

    input:enabled

    input:enabled {
      background-color: red;
    }
    
    <input type="text">  <!-- 红色背景 -->
    

    说明:选择已启用的元素,大多数为表单上的元素。

    input:disabled

    input:disabled {
      background-color: red;
    }
    
    <input type="text" disabled>  <!-- 红色背景 -->
    

    说明:选择已禁用的元素,大多数为表单上的元素。

    input[type="checkbox"]:checked

    input[type="checkbox"]:checked + span{
      color: red;
    }
    
    <label>
      <input type="checkbox" value="音乐" checked>
      <span>音乐</span>
    </label>
    <label>
      <input type="checkbox" value="足球">
      <span>足球</span>
    </label>
    

    说明:选择选中状态的单选框或复选框。可以根据这个选择器做美化版的单选框和复选框。

    div:not(p)

    div:not(p) {
      color: red;
    }
    <div>
      <span>Hello World</span> <!-- 红色 -->
      <p>世界你好</p>
    </div>
    

    说明:选择非指定元素的元素。选择div元素中非p元素的元素

    ::selection

    ::selection {
      color: red;
    }
    <p>世界你好</p>
    

    说明:修饰被选中部分的文本。选中的文本会呈现红色,只能使用color、background、cursor 以及 outline这些css属性。

    优秀文章首发于聚享小站,欢迎关注!
  • 相关阅读:
    MySQL8.0 不能使用group by解决方法
    xtrabackup备份恢复
    pycharm使用
    CMDB开发(三)
    Restful接口规范
    django-rest-framework框架(一)
    CMDB开发(二)
    CMDB开发(一)
    数据可视化之matplotlib模块
    数据分析之pyecharts v1版本
  • 原文地址:https://www.cnblogs.com/yesyes/p/15356361.html
Copyright © 2020-2023  润新知