欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

CSS------选择器(基本选择器:标签选择器、类选择器、id选择器、层次选择器;后代选择器,自选择器,相邻兄弟选择器,通用选择器,通用伪类选择器)

程序员文章站 2022-03-30 10:14:40
...

CSS选择器

  • 作用:选择页面上的某一个或者某一类元素

2.1、基本选择器

  • 标签选择器:选择一类标签 标签{}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    标签选择器:会选择页面上这个标签所有的元素
        border-radius:给素添加圆角的边框:
        四个值的顺序是:左上角,右上角,右下角,左下角。
        如果省略左下角,右上角是相同的。如果省略右下角,
        左上角是相同的。如果省略右上角,左上角是相同的.-->
    <style>
        h1{
            color: red;
            background: #3d6694;
            border-radius: 24px;
        }
        p{
            font-size:80px;
        }
    </style>
</head>
<body>
<h1>标签选择器1</h1>
<h1>标签选择器2</h1>
<p>p标签</p>
</body>
</html>
  • 类选择器 class:选择所有class属性一致的标签,跨标签,.类名{}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    类选择器:.class的名称
        好处:可以多个标签归类,是同一个class,可以复用-->
    <style>
        .类选择器1{
            color: red;
            background: #3d6694;
            border-radius: 25px;
        }
        .类选择器2{
            color: #000;
            background: #CE4A50;
            border-radius: 20px;
        }
        .类选择器3{
            color: aqua;
            background: #3d6694;
            border-radius: 18px;
        }
    </style>
</head>
<body>
<h1 class="类选择器1">标签1</h1>
<h1 class="类选择器2">标签2</h1>
<h2 class="类选择器2">标签3</h2>

<p class="类选择器3">p标签</p>
</body>
</html>
  • Id选择器:全局唯一! #id名{}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--id选择器:id必须保证全局唯一!
语法:#id名称{}
选择器不遵循就近原则,固定的:id选择器>class选择器>标签选择器-->
    <style>
        /*.类选择器1{*/
        /*    color: red;*/
        /*    background: #3d6694;*/
        /*    border-radius: 25px;*/
        /*}*/
        #id选择{
            color: #CE4A50;
            background: aqua;
            border-radius: 23px;
        }

    </style>
</head>
<body>
<h1 class="类选择器1" id="id选择">标签1</h1>
<h1 class="类选择器2">标签2</h1>
<h2 class="类选择器2">标签3</h2>
<p class="类选择器3">p标签</p>
</body>
</html>
  • 层次选择器
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            color: #CE4A50;
            background: #3d6694;
            border-radius: 15px;
        }
    </style>
</head>
<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
    <li>
        <p>p4</p>
    </li>
    <li>
        <p>p5</p>
    </li>
    <li>
        <p>p6</p>
    </li>
</ul>
</body>
</html>

1、后代选择器:在某个元素的后面的都和本元素一样

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!-- 后代选择器-->
    <style>
        body p{
            color: #CE4A50;
            background: #3d6694;
            border-radius: 15px;
        }
    </style>
</head>
<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
    <li>
        <p>p4</p>
    </li>
    <li>
        <p>p5</p>
    </li>
    <li>
        <p>p6</p>
    </li>
</ul>
</body>
</html>

2、自选择器:一代,儿子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!-- 子代选择器-->
    <style>
        body>p{
            color: #CE4A50;
            background: #3d6694;
            border-radius: 15px;
        }
    </style>
</head>
<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
    <li>
        <p>p4</p>
    </li>
    <li>
        <p>p5</p>
    </li>
    <li>
        <p>p6</p>
    </li>
</ul>
</body>
</html>

3、相邻兄弟选择器 :同辈,只有一个相邻的(向下的)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!-- 相邻兄弟选择器:同辈-->
    <style>
       .active+p{
            color: #CE4A50;
            background: #3d6694;
            border-radius: 15px;
        }
    </style>
</head>
<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
    <li>
        <p>p4</p>
    </li>
    <li>
        <p>p5</p>
    </li>
    <li>
        <p>p6</p>
    </li>
</ul>
</body>
</html>

4、通用选择器:当前选中元素的向下所有兄弟元素

.active~p{
background:#3d6694;
}

5、通用伪类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*ul的第一个子元素*/
      ul li:first-child{
          color: #3d6694;
          background: red;
          border-radius: 25px;
        }
        /*ul的最后一个子元素*/
        ul li:last-child{
            background: #CE4A50;
        }
    </style>
</head>
<body>
<h1>ceshi</h1>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
    <li>
        <p>p4</p>
    </li>
    <li>
        <p>p5</p>
    </li>
    <li>
        <p>p6</p>
    </li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*选择p1:定位到p1的父元素,选择其下面的第一个元素
        p:nth-child:选择p元素的父级元素(<body>),再选择其下面的第一个元素即可
        如果p元素的父级元素的第一个元素不为p元素,则p:nth-child(1)定位不到
        */
        p:nth-child(1){
            background: red;
        }
        /*p:nth-of-type(1):选中p元素的父元素,下类型为p的第一个元素
        */
        p:nth-of-type(1){
            background:#3d6694;
            border-radius: 15px;
        }
        / a:hover:鼠标移动到a标签会变色
        */
        a:hover{
            background: red;
        }

    </style>
</head>
<body>
<a href="">hover</a>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
    <li>li1</li>
    <li>li2</li>
    <li>li3</li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    属性选择器  语法 选择器名[]{} -->
    <style>
        .demo a{
            float: left;
            display: block;
            height: 50px;
            width: 50px;
            border-radius: 15px;
            background: #3d6694;
            text-align: center;
            color: aqua;
            text-decoration: none;
            margin: 5px;
            font: bold 20px/50px Arial;
        }
        /*
        选择存在id的属性
         */
        a[id]{
            background: red;
        }
        /*
        选择存在id为demo1的属性
         */
        a[id="demo1"]{
            background: #CE4A50;
        }
        /*
        选择包含属性class中a的元素
         */
        a[class*=a]{
            background: aqua;
        }
        /*
       选择href属性中以http开头的元素
        */
        a[href^=http]{
            background: red;
        }
        /*
        选择href属性中以doc结尾的元素
        */
        a[href$=doc]{
            background: #CE4A50;
        }
    </style>
</head>
<body class="demo">
<a href="http://www.bai.com"class="a b c"id="demo1">1</a>
<a href="http://taobao.com"class="a b">2</a>
<a href="images/1.png">3</a>
<a href="a.doc">4</a>
<a href="abc.doc">5</a>
<a href="">6</a>
<a href="">7</a>
<a href="">8</a>
<a href="">9</a>
<a href="">10</a>
</body>
</html>
  • 正则表达:= 绝对等于

    ​ *= 包含这个元素

    ​ ^= 以这个开头的元素

    ​ $= 以这个结尾的元素

相关标签: 前端