css——常用选择器

一，常用的基本选择器

1.最基本的了

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基本选择器</title>
<style type="text/css">
/*通配符选择器*/
* { margin: 0; padding: 0; border: none; }
/*元素选择器*/
body { background: #eee; }
/*类选择器*/
.list { list-style: square; }
/*ID选择器*/
#list { width: 500px; margin: 0 auto; }
/*后代选择器*/
.list li { margin-top: 10px; background: #abcdef; }
/*选择器分组*/
#list,.second{background: pink;}
</style>
</head>
<body>
<ul id="list" class="list">
    <li class="first">1</li>
    <li class="second">2</li>
    <li>3</li>
    <li>4</li>
</ul>
</body>
</html>

2，子元素和兄弟选择器

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

<head>
    <meta charset="UTF-8">
    <title>子元素选择器</title>
    <!--我们也可以称它为直接后代选择器-->
    <style type="text/css">
        #wrap>.inner {
            color: pink;
            border: 1px solid;
        }

        /*     这被称为一个相邻兄弟选择器. 它只会匹配紧跟着的兄弟元素
    紧跟！！！！ */

        #wrap>#first+.inner {
            color: blue;
            border: 1px solid;
        }

        /*    在使用 ~ 连接两个元素时,它会匹配第二个元素,
        条件是
            它必须跟(不一定是紧跟)在第一个元素之后,
            且他们都有一个共同的父元素  */

        #wrap2 #second~div {
            border: 1px solid #f5f5f5;
            /*color: pink;*/
        }
    </style>
</head>

<body>
    <div id="wrap">
        <div class="inner">
            wrap下一层
            <div class="inner">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;最里层</div>
            <!-- 孙子层无效果 -->
        </div>
        <div class="inner">wrap下一层</div>
        <div class="inner">inner</div>
        <div id="first">first</div>
        <div class="inner">inner
            <!-- 此行生效 -->
        </div>
        <div id="wrap2">
            <div id="second">first</div>
            <p></p>
            <div class="inner">inner
                <div>inner2</div>
            </div><!-- 生效 -->
            <div class="inner">inner</div><!-- 生效 -->
            <div class="inner">inner</div><!-- 生效 -->
            <div class="inner">inner</div><!-- 生效 -->
        </div>
    </div>
</body>
</html>

二，元素选择器

    <meta charset="UTF-8">
    <title>存在和值属性选择器</title>
    <style type="text/css">
        /*
             [attr]：该选择器选择包含 attr 属性的所有元素，不论 attr 的值为何。
            */

        [name] {
            border: 1px solid;
        }

        /*
             [attr=val]：该选择器仅选择 attr 属性被赋值为 val 的所有元素。
            */

        [name="atguigu_llc"] {
            font-size: 22px;
        }

        /*
             [attr~=val]：该选择器仅选择 attr 属性的值（以空格间隔出多个值）中有包含 val 值的所有元素，
                比如位于被空格分隔的多个类（class）中的一个类。
            */

        [name~="atguigu"] {
            font-size: 10px;
        }

        /*
             [attr|=val] : 选择attr属性的值以val（包括val）或val-开头的元素
             [attr^=val] : 选择attr属性的值以val开头（包括val）的元素。
             [attr$=val] : 选择attr属性的值以val结尾（包括val）的元素。
             [attr*=val] : 选择attr属性的值中包含字符串val的元素。
            */

        [name*="atguigu"] {
            background: pink;
        }
    </style>
</head>

<body>
    <div name="atguigu_llc">李立超</div>
    <div name="atguigu-llc atguigu">李票</div>
    <div name="atguigu-xfz">晓飞张</div>
    <div name="atguigu-bhj atguigu">白浩杰</div>
    <div name="atguigu_sym">腿长1米8</div>
    <div>佟刚</div>
</body>
</html>

三，伪类与伪元素选择器

1.链接伪类和动态伪类

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <!--:link：表示作为超链接，并指向一个未访问的地址的所有锚-->
    <style type="text/css">
        a {
            text-decoration: none;
        }
        /* 锚点伪类  点击后，已经点击过的 */
        a:visited {
            color: rgb(201, 131, 110);
        }
        /* 锚点伪类  点击后鼠标未松开 */
        a:link {
            color: deeppink;
        }
        /* 锚点伪类 不是a标签，无效果 */
        #test:link {
            background: pink;
        }
        /* 动态伪类  鼠标移上去时*/
        a:hover {
            color: blue;
        }
        /* 动态伪类  鼠标点击时未松开*/
        a:active {
            color: aqua;
        }
        /* 动态伪类  有效果时*/
        #test:link {
            background: pink;
        }
    </style>
</head>
<body>
    <a href="#">点我点我点我</a>
    <div id="test">我是div啦</div>
</body>
</html>

2.表单相关伪类

<!DOCTYPE HTML>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>无标题文档</title>
  <style>
    input {
      width: 100px;
      height: 30px;
      color: #000;
    }

    /* 可用和不可用 */

    input:enabled {
      color: red;
    }

    input:disabled {
      color: blue;
    }

    input:checked {
      width: 100px;
      height: 100px;
    }

    /* 获取焦点 */

    input:focus {
      background: pink;
    }

    div:focus {
      background: pink;
    }
  </style>
</head>

<body>
  <input type="text" value="晓飞张" />
  <input type="text" value="晓飞张" disabled="disabled" />
  <input type="checkbox" />
  <input type="text" value="" />
  <div style="width: 200px;height: 200px;background: deeppink;" contenteditable="true"></div>
</body>

</html>

3.结构性伪类元素

/*
:first-of-type     p:first-of-type    选择每个p元素是其父级的第一个p元素
:last-of-type     p:last-of-type    选择每个p元素是其父级的最后一个p元素
:only-of-type    p:only-of-type   选择每个p元素是其父级的唯一p元素
:nth-of-type(n)   p:nth-of-type(2)    选择每个p元素是其父级的第二个p元素
.....
*/

css——常用选择器

猜你喜欢