CSS入门二（CSS的选择器）

2021/10/9 23:02:54

编程Tag： 选择器 css 元素 入门 Font size color child

本文主要是介绍CSS入门二（CSS的选择器），对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

文章目录

    • 1、CSS的属性选择器
      • （1）标签名[属性名]
      • （2）标签名[属性名=值]
      • （3）标签名[属性名^=值]
      • （4）标签名[属性名$=值]
    • 2、CSS的关系选择器
      • （1）子元素选择器
      • （2）相邻兄弟选择器
        • A:临近兄弟选择器
        • B:普通兄弟选择器
    • 3、CSS的复合选择器
    • 4、CSS的子元素选择器
    • 5、CSS的伪类选择器
      • (1):hover
      • (2)a:visited
      • (3)a:link
      • (4)a:active
      • (5):root
      • (6):not()
      • (7):only-child
      • (8):first-child和:last-child
      • (9):nth-child(n)和:nth-last-child(n)
    • 6、CSS的伪元素选择器
      • （1）:before选择器
      • （2）:after选择器

1、CSS的属性选择器

属性选择器可以根据元素的属性及属性值来选择元素。

（1）标签名[属性名]

........
标签名[属性名]：选择含有给定属性的标签
........

举例如下：

<style>
    li[title]{
       color: blue; font-size: 80px;
    }
</style>
.......
<ul>
     <li title="yd">西安邮电大学</li>
     <li title="xa-jt">西安交通大学</li>
     <li id="dzkj">西安电子科技大学</li>
     <li class="lg-dx">西安理工大学</li>
     <li title="zf-dx">西北政法大学</li>
     <li title="xa-sf">陕西师范大学</li>
  </ul>

（2）标签名[属性名=值]

........
标签名[属性名=值]：选择含有给定属性值的标签
........

举例如下：

<style>
    li[title='yd']{
       color: blue; font-size: 80px;
    }
</style>
.......
<ul>
     <li title="yd">西安邮电大学</li>
     <li title="xa-jt">西安交通大学</li>
     <li id="dzkj">西安电子科技大学</li>
     <li class="lg-dx">西安理工大学</li>
     <li title="zf-dx">西北政法大学</li>
     <li title="xa-sf">陕西师范大学</li>
  </ul>

（3）标签名[属性名^=值]

........
标签名[属性名^=值]：选择给定属性值是以某个字符开头的
........

举例如下：

<style>
    li[title^='xa']{
       color: blue; font-size: 80px;
    }
</style>
.......
<ul>
     <li title="yd">西安邮电大学</li>
     <li title="xa-jt">西安交通大学</li>
     <li id="dzkj">西安电子科技大学</li>
     <li class="lg-dx">西安理工大学</li>
     <li title="zf-dx">西北政法大学</li>
     <li title="xa-sf">陕西师范大学</li>
  </ul>

（4）标签名[属性名$=值]

........
标签名[属性名$=值]：选择给定属性值是以某个字符结尾的
........

举例如下：

<style>
    li[title$='dx']{
       color: blue; font-size: 80px;
    }
</style>
.......
<ul>
     <li title="yd">西安邮电大学</li>
     <li title="xa-jt">西安交通大学</li>
     <li id="dzkj">西安电子科技大学</li>
     <li class="lg-dx">西安理工大学</li>
     <li title="zf-dx">西北政法大学</li>
     <li title="xa-sf">陕西师范大学</li>
  </ul>

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>003</title>
</head> 
<style>
   li[id] {
      color: red; font-size: 50px;
   }
   li[title^='xa'] {
       color: blue; font-size: 80px;
   }
   li[title='yd'] {
      color: yellow; font-size: 77px;
   }
   li[title$='dx'] {
      color: #5fd; font-size: 44px;
   }
</style>
<body>
  <ul>
     <li title="yd">西安邮电大学</li>
     <li title="xa-jt">西安交通大学</li>
     <li id="dzkj">西安电子科技大学</li>
     <li class="lg-dx">西安理工大学</li>
     <li title="zf-dx">西北政法大学</li>
     <li title="xa-sf">陕西师范大学</li>
  </ul>
</body>
</html>

在这里插入图片描述

2、CSS的关系选择器

       关系选择器和前面讲的复合选择器类似，但关系选择器可以更精确的控制元素样式。CSS3中的关系选择器主要包括子元素选择器和相邻兄弟选择器，其中子元素择器由符号“>”连接，相邻兄弟选择器由符号“+”和“~”连接。

（1）子元素选择器

子元素择器主要用来选择某个元素的第一级子元素，表示为父标签 > 子标签。

举例如下：

<style>
   ul>li {
      color: red; font-size: 80px;
   }
</style>

（2）相邻兄弟选择器

       兄弟选择器用来选择与某元素位于同一个父元素之中，且位于该元素之后的兄弟元素。

A:临近兄弟选择器

       该选择器使用加号“+”来链接前后两个选择器。选择器中的两个元素有同一个父亲，而且第二个元素必须紧跟第一个元素。
举例如下：

<style>
   ul>li {
      color: red; font-size: 80px;
   }
</style>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>003</title>
</head> 
<style>
   ul+ol {
      color: #ad6; font-size: 80px;
   }
</style>
<body>
  <ul>
     <li title="yd">西安邮电大学</li>
     <li title="xa-jt">西安交通大学</li>
     <li id="dzkj">西安电子科技大学</li>
     
  </ul>
  <ol>
     <li>北京邮电大学</li>
     <li>清华大学</li>
     <li>北京大学</li>
  </ol>
  <ul>
     <li>王昭君</li>
     <li>貂蝉</li>
     <li>杨玉环</li>
  </ul>
</body>
</html>

在这里插入图片描述

B:普通兄弟选择器

       普通兄弟选择器使用 “~”来链接前后两个选择器。选择器中的两个元素有同一个父亲，但第二个元素不必紧跟第一个元素。
举例如下：

<style>
   ul~ul {
      color: #ad6; font-size: 80px;
   }
</style>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>003</title>
</head> 
<style>
   ul~ul {
      color: #ad6; font-size: 80px;
   }
</style>
<body>
  <ul>
     <li title="yd">西安邮电大学</li>
     <li title="xa-jt">西安交通大学</li>
     <li id="dzkj">西安电子科技大学</li>
  </ul>
  <ul>
     <li>北京邮电大学</li>
     <li>清华大学</li>
     <li>北京大学</li>
  </ul>
  <ul>
     <li>王昭君</li>
     <li>貂蝉</li>
     <li>杨玉环</li>
  </ul>
</body>
</html>

在这里插入图片描述

3、CSS的复合选择器

用逗号分隔

<style>
   #dzkj,.lg-dx {
      color: #ad6; font-size: 80px;
   }
</style>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>003</title>
</head> 
<style>
   #dzkj,.lg-dx {
      color: #ad6; font-size: 80px;
   }
</style>
<body>
  <ul>
     <li title="yd">西安邮电大学</li>
     <li title="xa-jt">西安交通大学</li>
     <li id="dzkj">西安电子科技大学</li>
     <li class="lg-dx">西安理工大学</li>
     <li title="zf-dx">西北政法大学</li>
     <li title="xa-sf">陕西师范大学</li>
  </ul>
</body>
</html>

在这里插入图片描述

4、CSS的子元素选择器

用空格分隔

   #dd li {
      color: #ad6; font-size: 80px;
   }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>003</title>
</head> 
<style>
   #dd li {
      color: #ad6; font-size: 80px;
   }
</style>
<body>
  <ol id="dd">
     <li>北京邮电大学</li>
     <li>清华大学</li>
     <li>北京大学</li>
  </ol>
  <ul>
     <li>王昭君</li>
     <li>貂蝉</li>
     <li>杨玉环</li>
  </ul>
</body>
</html>

在这里插入图片描述

5、CSS的伪类选择器

(1):hover

当鼠标悬停在目标对象上时,展示的形式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>003</title>
</head> 
<style>
   #dd li:hover{
      color: #ad6; font-size: 80px;
   }
</style>
<body>
  <ol id="dd">
     <li>北京邮电大学</li>
     <li>清华大学</li>
     <li>北京大学</li>
  </ol>
  <ul>
     <li>王昭君</li>
     <li>貂蝉</li>
     <li>杨玉环</li>
  </ul>
</body>
</html>

在这里插入图片描述

(2)a:visited

表示已经访问过的超链接的样子

:visited {
        font-size: 65px;
        color: blue;
    }

(3)a:link

超链接未被访问的样式

a:link {
        color: crimson;
    }

(4)a:active

激活超链接时

a:active {
        color: yellow;
    }

举例如下：

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>超链接a的伪类选择器</title>
</head>
<style>
   /* 超链接未被访问时 */
   a:link {
       color: crimson;
   }
   /* 当链接已经被访问 */
   a:visited {
       font-size: 65px;
       color: blue;
   }
   /* 当鼠标悬停在超链接上时 */
   a:hover {
       font-size: 15px;
       color: purple;
   }
   /* 激活超链接时 */
   a:active {
       color: yellow;
   }

</style>
<body>
   <a href="#">百度</a>
   <br><br>
   <a href="#">搜狐</a>
   <br><br>
   <a href="#">360</a>
</body>
</html>

(5):root

       :root选择器用于匹配文档根元素，在HTML中，根元素始终是html元素。也就是说使用“:root选择器”定义的样式，对所有页面元素都生效。对于不需要该样式的元素，可以单独设置样式进行覆盖。

:root{
      color: red; font-size: 79px;
   }

(6):not()

       如果对某个结构元素使用样式，但是想排除这个结构元素下面的子结构元素，让它不使用这个样式，可以使用:not选择器。

<style>
   div :not(#aa){------/注意div与：not之间要加一个空格
      color: red; font-size: 79px;
   }
</style>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>003</title>
</head> 
<style>
   div :not(#aa){
      color: red; font-size: 79px;
   }
</style>
<body>
    <div>
       <p id="aa">四大名著</p>
       <p id=ss>四大美女</p>
       <p id="dd">四大金刚</p>
    </div>
</body>
</html>

(7):only-child

       :only-child 选择器用于匹配属于某父元素的唯一子元素的元素，也就是说，如果某个父元素仅有一个子元素，则使用“:only-child 选择器”可以选择这个子元素。

<style>
   div :only-child {
      color: red; font-size: 79px;
   }
</style>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>003</title>
</head> 
<style>
   div :only-child {
      color: red; font-size: 79px;
   }
</style>
<body>
    <div>
       <p id="aa">四大名著</p>
       <p id=ss>四大美女</p>
       <p id="dd">四大金刚</p>
    </div>
    <div>
       <p>四大书院</p>
    </div>
</body>
</html>

在这里插入图片描述

(8):first-child和:last-child

       :first-child选择器和:last-child选择器分别用于为父元素中的第一个或者最后一个子元素设置样式。

<style>
   div :first-child {
      color: red; font-size: 79px;
   }
   div :last-child {
      color:blue; font-size: 80px;
   }
</style>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>003</title>
</head> 
<style>
   div :first-child {
      color: red; font-size: 79px;
   }
   div :last-child {
      color:blue; font-size: 80px;
   }
</style>
<body>
    <div>
       <p id="aa">四大名著</p>
       <p id=ss>四大美女</p>
       <p id="dd">四大金刚</p>
    </div>
</body>
</html>

在这里插入图片描述

(9):nth-child(n)和:nth-last-child(n)

       使用:first-child选择器和:last-child选择器可以选择某个父元素中第一个或最后一个子元素，但是如果用户想要选择第2个或倒数第2个子元素，这两个选择器就不起作用了。为此，CSS3引入了:nth-child(n)和:nth-last-child(n)选择器，它们是:first-child选择器和:last-child选择器的扩展。

       :nth-child(n)：匹配父元素中正数第n个元素,:nth-last-child(n)：匹配父元素中倒数第n个元素，（）内填需要改变的数字。

<style>
   div :nth-child(2) {
      color: red; font-size: 79px;
   }
   div :nth-last-child(1) {
      color:blue; font-size: 80px;
   }
</style>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>003</title>
</head> 
<style>
   div :nth-child(2) {
      color: red; font-size: 79px;
   }
   div :nth-last-child(1) {
      color:blue; font-size: 80px;
   }
</style>
<body>
    <div>
       <p id="aa">四大名著</p>
       <p id=ss>四大美女</p>
       <p id="dd">四大金刚</p>
       <p>四大神话</p>
    </div>
</body>
</html>

在这里插入图片描述

6、CSS的伪元素选择器

（1）:before选择器

       :before伪元素选择器用于在被选元素的内容前面插入内容，必须配合content属性来指定要插入的具体内容。

（2）:after选择器

       :after伪元素选择器用于在某个元素之后插入一些内容，使用方法与:before选择器相同。

<style>
   div:before { /* 注意content后加文字时要给文字带引号*/
      content: '西安';
   }
   div:after {
      content: '陕西';
   }
</style>

在这里插入图片描述



这篇关于CSS入门二（CSS的选择器）的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！


相关编程文章

更多>
本站官方QQ
官方QQ:
23002807

沪ICP备2023033072号-1

     

扫一扫关注最新编程教程