html之css选择器学习

时间 2019-11-07

标签 html css 选择器学习栏目 HTML 繁體版

原文原文链接

什么是css选择器：

介绍：

css能够设置标签的样式，为了更好的设置样式以及为了方便给某些标签指定样式（批量的给某些标签增长样式），因此有了css选择器，css选择器能够筛选出指定的标签。筛选出来以后就能够给对应的标签设置样式。浏览器

css选择器的语法：

css选择器的定义由两部分组成：一个是选择器，一个是样式定义，好比：字体

标签选择器

介绍：

标签选择器直接根据标签名来选择标签，好比想筛选出全部div标签，可使用spa

示例：

/* 选择出全部标签 */
*{
    margin:0;
    padding:0;
}
 /* 选择出h1标签 */
h1 {color:red; font-size:14px;}
/* 选择出p标签 */
p { color: #ff0000; }
/* 选择出body标签 */
body {
  margin: 0;
  padding: 0;
}

补充：

*表明全部标签，可使用*{}来选择出全部标签。

类选择器：

介绍：

类class是标签的一个属性，类选择器选择全部标签中class的属性值等于类选择器指定的属性的全部标签（注意，类的属性值能够在多个标签中相同）。好比

语法：

类选择器以一个点号表明。点号后面跟对应的class中含有的属性值，便可选择出含有指定class属性值的标签。

示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
    .center{
        /* 样式定义*/
        text-align: center;
    }
    .normal{
        font-weight:normal;
    }
</style>
</head>
<body>
      <h1 class='center normal'>类选择器</h1>
      <div class="center"></div>
</body>
</html>

补充：

class中的属性值能够有多个，使用空格分隔，类选择器能够只针对其中一个属性值。

id选择器

介绍：

与类选择器功能相似，不过选择的属性是id，选择出id的属性值与id选择器相同的标签（理论上id的属性是惟一的，不一样标签的id属性值应该不一样）

语法：

使用#来进行id选择，#后面跟着id属性值,好比：

示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
    #header{
        /* 样式定义*/
        background-color: orange;
        width: 960px;
        height: 100px;
        margin:0 auto;
    }
</style>
</head>
<body>
      <div id="header"></div>
</body>
</html>

补充：

注意，id的属性值应该是惟一，因此id选择器只用来选择出某个标签。

并集选择器（分组选择器）

介绍：

并集选择器（分组选择器）由多个选择器组成，是将指定的多个选择器都定义一样的样式。多个选择器的关系是并立的，至关于在本来单独定义的基础上合并定义。3d

语法：

使用,来分隔多个选择器，好比至关于，因此明显的并集选择器能够节省很多代码。code

示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
    #header,#footer{
        width: 960px;
        margin:0 auto;
    }
    #header{
        background-color: orange;
        height: 100px;
    }
    #footer{
        background-color: skyblue;
        height: 500px;
    }
    h1,h2,h3{
        color: green;
        margin:0;
    }
</style>
</head>
<body>
      <div id="header"></div>
      <div id="footer">
          <h1>百度</h1>
      </div>
</body>
</html>

交集选择器：

介绍：

交集选择器由多个选择器组成，只有同时符合多个选择器的标签才会被选择出来。orm

语法：

多个选择器直接没有间隔，直接拼接起来。好比htm

示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style >
        div.a{ /* 选择div标签中class='a'的 */
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class='a'>1</div> <!-- 选中这个 -->
    <div >2</div>
    <div>
        <p class='a'>123</p> <!-- 与后代选择器不一样，这个不会被选中 -->
    </div>
</body>
</html>

补充：

要注意与下面的后代选择器的区别

后代选择器：

介绍：

后代选择器由多个选择器组成，后面的选择器选择范围基于前面的选择器。好比
后代选择器能够选择出子标签，也能够选择出孙子标签，孙孙子标签。总之，它能够选择出它的后代。只要符合条件的后代就能被选择出来。

语法：

后代选择器中多个选择器用空格隔开。对象

示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
    #header h1{ /* 选择id为header的标签的后代中的h1标签 */
        color: green;
    }
    div .blue{/* 选择div标签的后代中class为blue的标签 */
        color:blue;
    }
    </style>
</head>
<body>
      <div id="header">
        <h1>header的标签下的h1标签</h1>
      </div>
      <div class="blue">
          这是一个class=blue的div标签  <!-- 这个不会被div .blue选择到 -->
      </div>
      <div >
          <h1 class="blue">div下面的class=blue的标签</h1>
      </div>


</body>
</html>

补充：

后代选择器顾名思义，它只会在后代中查找

子标签选择器：

介绍：

一样由多个选择器组成，与后代选择器不一样的是它只会选择直接子代，不会选择出孙子标签之类的非子标签。

语法：

子标签选择器比后代选择器多出一个>来标注只选择子标签。好比

示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        #footer > .blue{
            color:blue;
        }
    </style>
</head>
<body>

    <div id="footer" >
        <h1 class="blue">id="footer"下面的子标签</h1>
        <div>
            <span class="blue">id="footer"下面的非子标签</span><!-- 这一个不会被选择出来 -->
        </div>
    </div>

</body>
</html>

属性选择器：

介绍：

属性选择器是根据属性选择出指定标签

语法：

属性选择器使用[]来包裹属性

仅针对属性时：[属性名]{} 好比
针对属性跟属性值时：
- 对应属性等于指定值：[属性名=属性值]{}
- 对应属性包含指定值（有些属性能够包含多个属性值，这个包含是指能够等于其中一个属性值）:[属性名~=属性值]
- 以指定值开头的属性值(CSS3支持)：[属性值^=指定值]{}
- 以指定值结尾的属性值(CSS3支持)：[属性值$=指定值]{}
- 属性值字符串包含指定值的(CSS3支持)：[属性值*=指定值]{}

示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        [type]{ /* 选中包含type 属性的标签 */
            border:1px solid red;
        }
        [type="text"]{ /* 选中type属性="text"的标签 */
            color:green;
        }
        [class~="t1"]{ /* 选中class属性包含t1的标签 */
             color:blue;
        }
        [name^="user"]{ /* 选中name属性以user开头的标签 */
             background-color: pink;
        }
        [name*="amy"]{ /* 选中name属性字符串包含amy的标签 */
            background-color: purple;
        }
    </style>
</head>
<body>
    <div>
        <input type="text" >
        <input type="password" class="t1">
        <input type="text" name="username">
        <input type="text" name="AamyB">
    </div>

</body>
</html>

相邻兄弟选择器：

介绍：

若是须要选择紧接在某个标签后的一个标签，并且两者有相同的父标签，可使用相邻兄弟选择器

语法：

标签之间使用+来分隔。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title></title>
    <style>
        h3+p{ /* 选择h3后面的第一个p兄弟标签 */
            color:red;
        }
    </style>
</head>
<body>
    <h3>h3标签</h3>
    <p>h3后的第1个标签</p>
    <p>h3后的第2个标签</p>
    <p>h3后的第3个标签</p>
    <p>h3后的第4个标签</p>

</body>
</html>

补充：

还有一种兄弟标签选择器使用～来分隔，这样的是选择后面的全部兄弟标签。

伪类选择器：

介绍：

伪类选择器原本是给某些标签添加某些特殊效果的（好比设置当鼠标移到的时候的样式）【后来增长了很多结构方面的选择器】

语法：

伪类选择器使用:来定义，好比。
通常使用其余选择器来与伪类选择器来配合使用：好比

常见伪类选择器：

事件相关：
- link:设置超连接a在未被访问前的样式
- visited:设置超连接a在其连接地址已被访问过期的样式。
- hover:设置鼠标在标签上停留时的样式。
- active:设置元素被点击时的样式（鼠标点击到鼠标释放前的样式）
- focus:设置元素得到焦点时的样式
- 注意：link,visited,hover,active能够是a标签的四个状态，他们在定义的时候应该按照 l v h a 顺序来写，否则会失效。
结构伪类选择器：
- first-child:设置第一个孩子的样式【这类标签的意思是，符合选择条件的基础上，又是父标签的第一个标签才会被选中，好比body中有6个div，那么div:first-child,会选中第一个div，由于它是div标签，而且它是body标签的第一个孩子】
- last-child:设置最后一个孩子的样式【CSS3开始】
- nth-child(n):设置第n个孩子的样式【CSS3开始】
  - 注意，n的值能够有如下取值
  - X，X为天然数，好比2；它会选择出位置为X的标签
  - Xn,X为一个天然数，好比2n；它会选择出位置为X的倍数的标签，2n会选择出2,4,6,8….
  - odd,选择出位置数为奇数的标签；even，选择出位置数为偶数的标签
  - 也能够是一个计算式子：好比2n+1会取出奇数，
- nth-last-child(n):设置第n个孩子的样式（从末尾开始数）【CSS3开始】
- 注意：虽然带有child，但并非选择子标签，div:first-child是选择第一个div标签
- 这类标签的选择是多个的，若是符合条件，那么会选择出多个。【好比div:first-child能够选择出body标签下的第一个孩子而且标签名为div的标签，也能够选择出div标签下的第一个孩子而且标签名为div的标签。】

目标伪类选择器：

target:选取当前活动的标签【与a标签结合使用，当a标签点击到本页中某个标签时，认为该标签是活动的】

示例：

事件相关的伪类选择器:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
        a{
            font-size:100px;
        }
        a:link{   /* 给全部未点击过的a标签增长上样式*/
            color: red;
            text-decoration:none;
        }
        a:visited{ /* 给点击过的a标签增长上样式 */
            color:purple;
        }
        a:hover{ /*  当鼠标移到a标签上时，增长上样式*/
            color:green;
        }
        a:active{ /* 鼠标点击过程当中显示的样式*/
            background-color: pink;
        }
        #header:hover{
        /*  当鼠标移到#header选择出的标签时，增长上样式*/
            background-color: blue;
        }

    </style>
</head>
<body>
    <a href="#1">1</a>
    <a href="#2">2</a>
    <a href="#3">3</a>
    <a href="#4">4</a>
    <div id="header">
        div的内容
    </div>
</body>
</html>

结构伪类选择器：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
        p{
            font-size:20px;
        }
        p:first-child{/* 选择第1个*/
            color:red;
        }
        p:last-child{ /* 选择最后一个*/
            color:green;
        }
        p:nth-child(2){ /* 选择第二个*/
            color:pink;
        }
        p:nth-child(2n){ /* 选择2，4，6，8.。。 */
            background-color: gray;
        }
        p:nth-last-child(2n){/* 从后面开始数 选择2，4，6，8.。。 */
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <p>5</p>
    <p>6</p>
</body>
</html>