CSS选择器合集

ID 选择器

ID选择器使用 "#" 号加id名称来表示，用来选择HTML 中的id="id名称"的DOM元素

<html>
  <div id="box">我是文字</div>
</html>

<style>
#box{
  color:red
}
</style>

类选择器

类选择器我们是用 “.” 加上class名称来表示,用来选择HTML中的class="class名称"的DOM元素。

<html>
  <div class="box">我是文字</div>
</html>

<style>
.box{
  color:red
}
</style>

通配符选择器

通配符选择器使用 * 来选择页面里面的所有元素

//通配符选择器常用于去除默认样式
*{
    margin:0;
    padding:0;
}

标签选择器

标签选择器就是选中HTML中某一种类的标签，直接使用HTML中的标签名称

<html>
  <div>我是文字</div>
</html>

<style>
div{
  color:red  //标签选择器通常用来重置某些标签的样式
}
</style>

属性选择器

属性选择器通过DOM的属性来选择DOM节点
[attr]：根据是否设置特定属性选择器形式。

<html>
  <div title="text">我是文字1</div>
  <div class="text">我是文字2</div>
</html>

<style>
[title] 
{
  color:red;
}
</style>

E[attr]：根据是否设置特定属性选择器形式。

<html>
  <div title="text">我是文字2</div>
  <p title="text">我是文字2</p>
</html>

<style>
div[title] 
{
  color:red;
}
</style>

E[attr=“value”]：根据是否设置特定属性值来匹配元素。

<html>
  <div title="text">我是文字</div>
  <div title="text1">我是文字</div>
</html>

<style>
[title="text"] 
{
  color:red;
}
</style>

E[attr~=“value”]：根据属性值是否包含特定value来匹配元素。注意，属性值是一个词列表，以空格分隔，其中词列表中包含了一个value。

<html>
  <div class="text">我是文字1</div>
  <div class="text box">我是文字2</div>
</html>

<style>
[class~="box"] 
{
  color:red;
}
</style>
E[attr^=“value”]：根据属性值是否包含特定value来匹配元素。注意，value必须位于属性值的开头
<html>
  <div class="text">我是文字1</div>
  <div class="test">我是文字2</div>
</html>

<style>
[class^="tex"] 
{
  color:red;
}
</style>
E[attr$=“value”]：根据属性值是否包含特定value来匹配元素。注意，value必须位于属性值的结尾。
<html>
  <div class="text">我是文字1</div>
  <div class="test">我是文字2</div>
</html>

<style>
[class$="xt"] 
{
  color:red;
}
</style>
E[attr*=“value”]：根据属性值是否包含特定value来匹配元素。
<html>
  <div class="text">我是文字1</div>
  <div class="box">我是文字2</div>
  <div class="test">我是文字3</div>
</html>

<style>
[class*="te"] 
{
  color:red;
}
</style>
E[attr|=“value”]：根据属性值是否包含特定value来匹配元素。属性值等于value或者以value-开头，如zh-cn。
<html>
    <div class="article">1</div>
    <div class="article-content">2</div>
    <div class="article_footer">3</div>
</html>

<style>
[class|="article"] 
{
  color:red;
}
</style>

组合选择器

后代选择器

<html>
    <div class="a">
        1
        <div class="b">
            2
            <div class="c">3</div>
            <div class="d">4</div>
        </div>
    </div>
</html>
<style>
      .a .b .c {
        color: red;
      }
</style>

子元素选择器

<html>
    <div class="a">
        1
        <div class="b">
            2
            <div class="c">3</div>
            <div class="d">4</div>
        </div>
    </div>
</html>
<style>
      .a>.b>.c {
        color: red;
      }
</style>

相邻选择器

<html>
      <h1>1</h1>
      <p>2</p>
      <p>3</p>
      <p>4</p>
</html>
<style>
      h1 + p {
        color: red;
      } /*把挨着h1标签中的p标签设置为该样式*/
</style>

通用兄弟选择器

<html>
      <h1>1</h1>
      <p>2</p>
      <p>3</p>
      <p>4</p>
</html>
<style>
      h1~p {
        color: red;
      } /*把h1标签中后面的p标签设置为该样式*/
</style>

交集选择器

<html>
      <div>
        <div class="box">1</div>
    </div>
    <div>
        <div class="cont">2</div>
    </div>
</html>
<style>
        div .box{
            color: red;
        } //匹配到两个或多个的交集
</style>

并集选择器

<html>
    <div class="box1">1</div>
    <div>2</div>
    <div class="box2">3</div>
</html>
<style>
      .box1,.box2 {
        color: red;
      } /*多个选择器对应的元素设置样式*/
</style>

否定伪类选择器

:not() 匹配非指定元素/选择器的每个元素。

<html>
    <div class="item">A</div>
    <div class="item">B</div>
    <div class="item light">C</div>
    <div class="item">D</div>
    <div class="item light">E</div>
</html>
<style>
      div:not(.light){
        color: #fe6225;
      }
</style>

伪类和伪元素选择器

标记状态的伪类

<html>
  <a href="https://www.baidu.com">百度</a>
</html>
<style>
        a:link{
            background: red;                         /* 未访问过的a标签样式 */
        }
        a:focus{
            background: block;                     /* 选取获取焦点时a标签上的样式 */
        }
        a:hover{
            background-color:pink;              /* 设置当鼠标悬停在a标签上时的样式 */
        }
        a:active{
            background-color:yellow;          /* 设置当用户按下按钮时a标签的样式 */
        }
        a:visited{
            background-color:purple;         /* 设置当a标签的链接被访问后的样式 */
        }
    </style>

筛选功能的伪类
:empty 选取没有子元素的元素

<html>
    <div>1</div>
    <div></div>
    <div>3</div>
</html>
    <style>
      div:empty {
        width: 10px;
        height: 10px;
        background: red;
      }
    </style>

:only-child 匹配获取E选择器选择的元素的父元素当中，只有唯一该类型的子元素

<html>
    <div>
      <p>我是唯一子元素。</p>
    </div>

    <div>
      <div>
        <p>我也是唯一子元素。</p>
      </div>
      <div>我是第二个兄弟元素。</div>
      <div>
        <div>我不是</div>
      </div>
    </div>
</html>
<style>
   p:only-child {
      color: red;
    }
</style>

:checked 选取勾选状态下的input 元素 只对 radio 和checkbox 有效

<html>
    <input type="checkbox" name="fruit" value="apple">苹果
    <input type="checkbox" name="fruit" value="banana" checked>香蕉
    <input type="checkbox" name="fruit" value="orange">橙子
</html>
<style>
      input:checked {
        width: 50px;
        height: 50px;
      }
</style>

:disabled 选取禁用的表单元素

<html>
    <form action="form_action.asp" method="get">
      First name: <input type="text" name="fname"/> 
      Last name: <input type="text" name="lname" disabled/>
    </form>
</html>
<style>
      input:disabled {
        background: red;
      }
</style>

:first-child 选取当前选择器下的第一个元素

<html>
    <div>1</div>
    <div>2</div>
</html>
<style>
      div:first-child {
        color: red;
      }
</style>

:last-child 选取当前选择器下的最后一个元素

<html>
    <div>1</div>
    <div>2</div>
</html>
<style>
      div:last-child {
        color: red;
      }
</style>

:nth-child(an+b) 选取指定位置的元素

<html>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div>10</div>
</html>
<style>
      <!-- 括号内允许使用关键字：2n-1，odd代表奇数，2n，even代表偶数。
            3n 3的倍数....等。
            3n+1 隔二取一。
            正方向范围，li:nth-child(n+3)    从第3个开始使用这个样式
            负方向范围，:nth-child(-n+3)    从第3个开始向前面数
            前后限制范围，:nth-child(n+4):nth-child(-n+8)   选中第4-8个子元素
      -->
      div:nth-child() {
        color: red;
      }
</style>

E:nth-of-type() 指定类型E的第n个

<html>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div>10</div>
</html>
<style>
      <!-- 括号内允许使用关键字：2n-1，odd代表奇数，2n，even代表偶数。
            3n 3的倍数....等。
            3n+1 隔二取一。
            正方向范围，li:nth-child(n+3)    从第3个开始使用这个样式
            负方向范围，:nth-child(-n+3)    从第3个开始向前面数
            前后限制范围，:nth-child(n+4):nth-child(-n+8)   选中第4-8个子元素
      -->
      div:nth-of-type() {
        color: red;
      }
</style>

E:first-of-type 指定类型E的第一个

<html>
    <p>1</p>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <p>5</p>
</html>
<style>
      div:first-of-type{
        color: red;
      }
</style>

E:last-of-type 指定类型E的最后一个

<html>
    <p>1</p>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <p>5</p>
</html>
<style>
      div:last-of-type{
        color: red;
      }
</style>

伪元素选择器

::first-line 为元素的第一行使用样式

<html>
    <div>
        aaaa<br/>
        bbbb
    </div>
</html>
<style>
      div::first-line{
        color: red;
      }
</style>

::first-letter 为某个元素的首字母或第一个文字使用样式

<html>
    <div>hello</div>
    <div>你好，世界</div>
</html>
<style>
      div::first-letter{
        color: red;
      }
</style>

::first-letter 为某个元素的首字母或第一个文字使用样式

<html>
    <div>hello</div>
    <div>你好，世界</div>
</html>
<style>
      div::first-letter{
        color: red;
      }
</style>

::before 在某个元素之前插入内容

<html>
  <div>hello</div>
</html>
<style>
div::before {
        display: inline-block;
        width: 100px;
        height: 80px;
        color: red;
        /* content: '插入的文案'; */
        content: url("https://himg.bdimg.com/sys/portraitn/item/public.1.6b295e97.QLuiAdo8_Vl1p6g12e_q5Q");
      }
</style>

::after 在某个元素之后插入内容

<html>
  <div>hello</div>
</html>
<style>
div::after{
        display: inline-block;
        width: 100px;
        height: 80px;
        color: red;
        /* content: '插入的文案'; */
        content: url("https://himg.bdimg.com/sys/portraitn/item/public.1.6b295e97.QLuiAdo8_Vl1p6g12e_q5Q");
      }
</style>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • CSS选择器及CSS选择器权重
    css选择器： 用于定位我们想要给予样式的HTML元素。 选择器的类型： 1、 基础选择器2、 组合选择器3、 属...
    蔡森屿阅读 3,998评论 0赞 1
  • css选择器、css的书写规范
    1.class 和 id 的使用场景? 类选择器允许以一种独立于文档元素的方式来指定样式。该选择器可以单独使用，也...
    草鞋弟阅读 7,158评论 0赞 1
  • CSS初识—CSS选择器
    1.class 和 id 的使用场景? id：定位到页面上唯一的元素，页面上不能出现id相同的元素 class：定...
    饥人谷_bigJiao阅读 2,593评论 0赞 0
  • CSS选择器
    1.class和id的使用场景？ class 选择器： class 选择器用于描述一组元素的样式，class 选择...
    FLYSASA阅读 2,532评论 0赞 0
  • CSS选择器
    id与class的使用场景 id选择器，匹配特定id的元素类选择器，匹配class包含(不是等于)特定类的元素id...
    姚小帅阅读 2,750评论 0赞 0