CSS选择器简介及应用

最新推荐文章于 2023-03-29 10:40:09 发布

q1575290554

最新推荐文章于 2023-03-29 10:40:09 发布

阅读量225

点赞数

分类专栏：前端 # css 文章标签： css css3 前端

本文链接：https://blog.csdn.net/Q1575290554/article/details/125496646

版权

前端同时被 2 个专栏收录

28 篇文章 0 订阅

订阅专栏

css

7 篇文章 0 订阅

订阅专栏

作用：选择页面上的某一个或某一类元素

基本选择器

1、标签选择器：选择一类标签标签{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标签选择器</title>
    <style>
    /*标签选择器，会选择页面上所有的这个标签的元素*/
        h1{
            color: chartreuse;
            background: blue;
            border-right: 24px;;
        }
        p{font-size: 80px;}
    </style>
</head>
<body>
<h1>标题一</h1>
<h1>标题二</h1>
<p>段落</p>
</body>
</html>

2、类选择器 class：选择所有class属性一致的标签，跨标签 .类名{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>类选择器</title>
    <style>
         /*类选择器的格式 ： .class的名称{}
        好处，可以多个标签归类，是同一个 class ，可以复用
        也可以跨标签 h1，p标签都能归为一类 */
        .yi{color : aqua;}
        .er{color: chartreuse;}
        .san{color: brown;}
    </style>
</head>
<body>
<h1 class="yi">标题一</h1>
<h1 class="er">标题二</h1>
<h1 class="san">标题三</h1>
<p class="yi">P标签</p>
</body>
</html>

3、Id 选择器：全局唯一 #id名称{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>id选择器</title>
    <style>
        /*  id选择器  : id 必须保证全局唯一
            #id名称{}
            不遵循就近原则，固定的
            id选择器 > 类选择器 > 标签选择器 */
        #yi{color: #1f23ff;}
        .yi{color: brown;}
        h1{color: chartreuse;}
    </style>
</head>
<body>
<h1 id="yi">标题一</h1>
<h1 class="yi">标题二</h1>
<h1 class="yi">标题三</h1>
<h1>标题四</h1>
<h1>标题五</h1>
</body>
</html>

优先级：id选择器 > class选择器 > 标签选择器

层次选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>层次选择器</title>
    <style>
        /*p{*/
        /*    background: chartreuse;*/
        /*}*/
        /*后代选择器 在某个元素的后面，祖爷爷 爷爷 爸爸 我*/
        body p{background: brown;}
        /*子选择器 一代 （儿子）*/
        body>p{ background: #1f23ff;}
        /*兄弟选择器 同辈  只有一个，相邻（向下）*/
        .active + p{background: aquamarine;}
        /*通用选择器，当前选择元素的向下的所有兄弟元素*/
        .active~p{background: blueviolet;}
    </style>
</head>
<body>
<p>p0</p>
<p class="active">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>
<p>p9</p>
<p>p8</p>
</body>
</html>

结构伪类选择器

伪类：条件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>结构伪类选择器</title>
    <!-- 避免使用，class，id选择器-->
    <style>
        /*ul的第一个子元素*/
        ul li:first-child{ background: #1f23ff; }
        /*ul的最后一个子元素*/
        ul li:last-child{background: chartreuse;}
        /* 选中p1 ：定位到父元素，选择当前的第一个元素
        选择当前 p 元素的父级元素，选中父级元素的第一个，并且是当前元素才生效
        按顺序，如果在 p 元素的父元素 body 下第一行加一个 h1 元素，那就无法选中了*/
        p:nth-child(1){background: brown;}
        /*选中父元素下的 p 元素的第二个
        按类型，即使在父元素 body 下第一行加一个 h1 元素，也能选中 p 元素的第一个元素 */
        p:nth-of-type(1){background: yellow;}
    </style>
</head>
<body>
<p>p0</p>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
	<li>li1</li>
	<li>li2</li>
	<li>li3</li>
</ul>
<p>p9</p>
<p>p8</p>
</body>
</html>

属性选择器（常用）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性选择器</title>
    <style>
        .demo a{
            display: block;
            height: 50px;
            width: 50px;
            float:left;
            border-radius: 10px;
            background: blue;
            text-align: center;
            color: beige;
            text-decoration: none;
            margin-right: 5px;
            font: bold 20px/50px Arial;
        }
        /*属性名，属性名=属性值（正则）
        =表示绝对等于
        *=表示包含
        ^=表示以...开头
        $=表示以...结尾
        */
        /*存在id属性的元素  a[]{}*/
        /* a[id]{
             background: red;
         }*/
        /*id=first的元素*/
        /* a[id=first]{
             background: aqua;
         }*/
        /*class中有links元素*/
        /* a[class = ""links item2 first2""]{
             background: orange;
         }*/
        /*a[class*=""links""]{
            background: black ;
        }*/
        /*选中href中以http开头的元素*/
        a[href^="http"]{background: orange;}
    </style>
</head>
<body>
<p class="demo">
    <a href="http://www.baidu.com" class="links item first" id="first">1</a>
    <a href="/adad/faf" class="links item2 first2" >2</a>
    <a href="qwe123" class="links item3 first3" >3</a>
    <a href="eweqe" class="links item4 first4" >4</a>
    <a href="rrrrr" class="links item5 first5" >5</a>
    <a href="ttt" class="links item6 first6" >6</a>
    <a href="yyy" class="links item7 first7" >7</a>
</p>
</body>
</html>