H5,CSS选择器

CSS选择器

在CSS选择器中,基本常用选择器有标签选择器、类选择器、ID选择器、普通选择器,还有层次选择器、伪类选择器和属性选择器。前面部分的选择器较为简单,不做笔记,本文章仅记录关于层次选择器伪类选择器属性选择器的笔记。

**

层次选择器:

**
1.后代选择器:
使用空格隔开两个选择器,表示选择第一个元素中后代里的元素,后代元素可以是子元素也可以是孙元素。
例如:
CSS:
.one span { color: blueviolet; }
html:

<div class="one">
            <span>div1.1</span>
            <br>
            <span>div1.2</span>
            <div>
                <span>孙元素下span</span>
            </div>
            <p>p1</p>
        </div>

选择了one类下的所有span元素,无论是子元素还是孙元素,字体颜色都会发生改变。

效果图:

2.子代选择器:
使用">"隔开的i两个选择器,表示直接选择第一个元素的后代子元素,孙元素无法被选中。
例如:

 .two>span {
            color: brown;
        }

HTML:

<div class="two">
            <span>div2.1</span>
            <br>
            <span>div2.2</span>
            <div>
                <span>孙元素下span</span>

            </div>
            <p>p2</p>
        </div>

仅选择了two类下的子元素span,孙元素下的span并不受影响。
在这里插入图片描述

3.相邻同胞选择器:
使用"+"连接两个选择器,表示选择下一个兄弟元素

.test1+span {
            background-color: palevioletred;
        }

HTML:

<div class="three">
            <span class="test1">span3.1</span>
            <span class="test2">span3.2</span>
            <p>p标签</p>
        </div>

"+"后面连接的必须是相邻的兄弟元素,如果中间有其他元素将无法选中。
在这里插入图片描述

4. 一般同胞选择器:
使用~隔开两个选择器,表示选择了第一个元素之后的类型的元素
css:

.test3~p {
          background-color: coral;
      }

HTML:

<div class="four">
          <div class="test3">4.1</div>

          <div>4.2</div>
          <div>
              4.3
              <div>
                  4.3的孙元素
                  <p>孙元素下p标签</p>
              </div>
          </div>
          <p>p标签</p>
      </div>

选择test3类之后的同级p标签,即使中间有其他元素,依然能选择到。同时其他div下的p标签并不会被选择。
在这里插入图片描述

属性选择器:

设arrt为元素的名称:
[arrt]
选择具有attr属性的元素,无论该属性的值是什么
CSS:

[title] {
           font-weight: bolder;
       }

HTML:

<div >
       <div title="one">第一个</div>
       <div title="two">第二个</div>
       <div title="three">第三个</div>
       <div>第四个</div>
   </div>

选中了有title的元素,即前三个div,字体加粗。
在这里插入图片描述

[arrt=val]
选择拥有attr属性的元素,且attr属性中的值要为val
例如:

[title=two] {
          color: palevioletred;
      }
<div class="onediv">
      <div title="one">第一个</div>
      <div title="two">第二个</div>
      <div title="three">第三个</div>
      <div>第四个</div>
  </div>
  <div class="twodiv">
      <div title="one">第一个</div>
      <div title="two">第二个</div>
      <div title="three">第三个</div>
  </div>

选择有title属性且title属性为two的元素,即代码片段中onediv和towdiv子类中的的第二个div,设置字体颜色为粉色。
在这里插入图片描述

[arrt^val]
选择有attr属性的元素,并且该属性需要以val开头,val为一个字符或字符串

[title^=t] {
         background-color: brown;
     }
     <div title="one">第一个</div>
     <div title="two">第二个</div>
     <div title="three">第三个</div>

选择title属性中以"t"开头的元素,设置背景为棕色。
在这里插入图片描述

[arrt$val]
选择有attr属性的元素,并且该属性需要以val结尾,val为一个字符或字符串

[title$=e] {
            font-style: italic;
        }
 <div title="one">第一个</div>
       <div title="two">第二个</div>
       <div title="three">第三个</div>

选择title属性中以"e"结尾的元素,设置斜体
在这里插入图片描述

[arrt*=val]
选择有attr属性的元素,并且该属性需要包含val(类似模糊查询,只要包含即可)。

[title*=w] {
            background-color: blue;
        }
<div title="one" class="one">第一个</div>
<div title="two" class="two">第二个</div>
<div title="three" class="one two">第三个</div>
<div title="four" class="oney">第四个</div>

选中title中包含"w"字符的元素
在这里插入图片描述

[arrt~=val] 
选择有attr属性的元素,并且该属性需要包含val值(值必须完全匹配,不能多或者少字符)。
[class~=one] {
            border: 5px peru solid;
        }
<div title="one" class="one">第一个</div>
<div title="two" class="two">第二个</div>
<div title="three" class="one two">第三个</div>
 <div title="four" class="oney">第四个</div>

选择title中有one属性的元素,例子中只会选择第一个和第三个div,第四个div中虽然有one字符串,但并不是one属性,所以不会选择到。
在这里插入图片描述

伪类选择器

1.子代元素相关伪类选择器:
:only-child 选择作为别人独生子的元素
:first-child 选择作为别人第一个孩子的元素
:last-child 选择作为别人最后一个孩子的元素
:nth-child(n) 选择作为别人第n个孩子的元素
:nth-last-child 选择作为别人倒数第n个孩子的元素
:first-of-type 选择每种类型中的第一个孩子
:last-of-type 选择每种类型中的倒数第一个孩子
:nth-of-type(n) 选择每种类型中的第n个孩子的元素
:nth-last-of-type 选择每种类型中的最后一个孩子的元素

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>子代伪类选择器</title>
    <style>
        div {
            float: left;
            width: 200px;
            line-height: 30px;
            text-align: center;
        }

        /* 选择独生子 */
        /* div *:only-child {
            border: 1px solid rebeccapurple;
        } */

        /* 选择第一个儿子 */
        /* div *:first-child {
            color: blue;
        } */

        /* 选择最后一个儿子 */
        /* div *:last-child {
            background-color: brown;
        } */

        /* 选择第三个儿子 */
        /* div *:nth-child(3) {
            font-weight: bolder;
        } */

        /* 选择倒数第三个儿子 */
        /* div *:nth-last-child(3) {
            background-color: crimson;
        } */

        /* 选择每个类型中的第一个儿子 */
        /* div *:first-of-type {
            background-color: yellow;
        } */

        /* 选择每个类型中最后一个儿子 */
        /* div *:last-of-type {
            background-color: gray; */

        /* 选择每个类型中第()个儿子 */
        /* div *:nth-of-type(2) {
            background-color: palegreen; */

        /* 选择每个类型中倒数第()个儿子 */
        div *:nth-last-of-type(1) {
            background-color: royalblue;
        }
    </style>
</head>

<body>
    <div>
        <p>1</p>
    </div>
    <div>
        <span>span</span>
        <p>1</p>
        <p>2</p>
        <p>3</p>

    </div>
    <div>
        <p>1</p>
        <p>2</p>
        <p>3</p>
        <p>4</p>
    </div>
    <div>
        <span>span1</span>
        <br>
        <span>span2</span>
        <br>
        <span>span3</span>
        <p>1</p>
        <p>2</p>
        <p>3</p>
        <p>4</p>
    </div>
    <div>
        <p>1</p>
        <p>2</p>
        <p>3</p>
        <p>4</p>
        <p>5</p>
    </div>
</body>

</html>

注意:
如果元素中的子元素下还有若干个孙元素,那么在选择时,孙元素中相应的元素也会被选中。
例如:选择div元素下第一个元素

div *:first-child {
            color: blue;
        }
    <div>
        <p>1</p>
    </div>
    <div>

        <span>span</span>
        <div class="one">
            <p></p>
            <p>11</p>
        </div>
        <p>1</p>
        <p>2</p>
        <p>3</p>

    </div>
    <div>
        <p>1</p>
        <p>2</p>
        <p>3</p>
        <p>4</p>
    </div>

在这里插入图片描述
可以看到中间的div中,不仅仅是第一个span被选中,在子元素div one类下的第一个p标签也被选中。

2.元素状态相关伪类选择器
:link 未被访问的状态,a标签
:visitied 已访问过的状态,a标签
:hover 鼠标悬停的状态,a标签,其他标签
:active 活动的状态,a标签,其他标签
:focus 聚焦的状态
:checked 用户选中的单选按钮和复选按钮
:default 默认选中的单选按钮和复选按钮
:enabled :disabled可用和禁用的表单控件
:valid :invalid 通过验证的、不通过验证的
:required :optional 必填的和选填的
:in-range :out-of-range 在范围内的、在范围外的

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值