css选择器

最新推荐文章于 2022-08-23 17:19:40 发布

花开至半

最新推荐文章于 2022-08-23 17:19:40 发布

阅读量154

点赞数

分类专栏： HTML基础

本文链接：https://blog.csdn.net/weixin_43677350/article/details/84143791

版权

HTML基础专栏收录该内容

2 篇文章 0 订阅

订阅专栏

CSS代码用来修饰 HTML元素. 要用CSS代码设置样式, 首先要选中HTML元素.
用来选中元素的代码称为选择器, 或选择符.
html元素是指, 标签与标签包裹内容的整体.

常用的选择器有如下几种：

1、标签选择器

标签选择器，此种选择器影响范围大. 举例： ```html *{margin:0;padding:0} div{color:red}

....

``` ####2、id选择器 HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。 >通过id名来选择元素，元素的id名称不能重复，所以一个样式设置项只能对应于页面上一个元素，不能复用，id名一般给程序使用，所以不推荐使用id作为选择器。举例： ```html #box{color:red}

....

``` ####3、类选择器 class 选择器用于描述一组元素的样式,class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示 >通过类名来选择元素，一个类可应用于多个元素，一个元素上也可以使用多个类，应用灵活，可复用，是css中应用最多的一种选择器。举例： ```html .red{color:red} .big{font-size:20px} .mt10{margin-top:10px}

....

``` ####4、后代选择器 >后代选取器匹配所有当前元素的后代元素。举例： ```html .box span{color:red} .box .red{color:pink} .red{color:red}

.... ....

....


####5、组选择器
>多个选择器，如果有同样的样式设置，可以使用组选择器。也称为 并列选择

举例：
```html
.box1,.box2,.box3{width:100px;height:100px}
.box1{background:red}
.box2{background:pink}
.box2{background:gold}

<div class="box1">....</div>
<div class="box2">....</div>
<div class="box3">....</div>

6、伪类及伪元素选择器

常用的伪类选择器有hover，表示鼠标悬浮在元素上时的状态。伪元素选择器有before和after,它们可以通过样式在元素中插入内容。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪类and伪类元素</title>
    <style>
    /*伪类*/
        div{width: 100px;height: 100px; }

        /*.box1{background-color: red;}*/
        /*当鼠标悬浮在元素上方时，向元素添加样式*/
        .box1:hover{
            background-color: green;
        }
        /*将样式添加到被激活的元素*/
        .box1:active{
            background-color: pink;
        }
/*        :focus 选择器用于选取获得焦点的元素。

            提示：接收键盘事件或其他用户输入的元素都允许 :focus 选择器。*/
        .box2:focus{
            background-color: red;
        }
        /*first-child 将特殊的样式添加到元素的第一个子元素当中    
        last-child     将特殊的样式添加到元素的最后个子元素当中    
        nth-child()    将特殊的样式添加到元素的某个子元素当中
        */

        /*ul li:first-child{
            background-color: #0cc;
        }
        */
    /*伪类元素*/
         /*在每个<span>元素之前插入内容*/
        span:before{content: "hello";}
         /*在每个<a>元素之后插入内容*/
         a:after{content: "beybeybey";}
    </style>
</head>
<body>
    <div class="box1">

    </div>

    <form action="">
    <input type="text" name="" id="" class=box2>
    </form>

    <ul>
        <li>python</li>
        <li>java</li>
        <li>C</li>
        <li>C++</li>
        <li>php</li>
    </ul>



        <a href="https://www.baidu.com">百度</a>
        <span>大帅哥</span>


</body>
</html>

7.其他选择器(了解)

.item>p{}                         子元素选择器:与后代选择器相比，子元素选择器只能选择某元素的子元素。 

子元素选择器和后代选择器的比较：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>子元素</title>
    <style>
    .zi1 >li{
        background-color: red;
    }

    /*后代*/
    .box2 li{
        background-color: green;
    }
    </style>
</head>
<body>
    <!-- 子元素的例子 -->
    <div style="border:1;border-style:solid;" >
        <p>
            <ul class="zi1">
                <li>nihao</li>
                <li>nihao</li>
            </ul>
            <ul  class="zi1">
                <span>
                    <li>nihao</li>
                    <li>nihao</li>
                </span>
            </ul>
        </p>
    </div>

    <!-- 后代的例子 -->
    <div style="border:1;border-style:solid;" >
        <p>
            <ul class="box2">
                <li>nihao</li>
                <li>nihao</li>
            </ul>
            <ul class="box2">
                <span>
                    <li>nihao</li>
                    <li>nihao</li>
                </span>
            </ul>
        </p>
    </div>


</body>
</html>

input[name=username]{}         属性选择器  :通过特定的属性来查找元素

li:last-child{}                 选择最后一个li元素
li:first-child{}                选择第一个li元素
li:nth-child(2){}               选择指定的第几li元素

选择器之间的优先级别

标签选择器           1

类选择器             10

 ID选择器           100

行内样式         1000

伪类选择器          10

属性选择器          10

关系选择器     拆开后 权重值相加

注意:

    1) 数值越大, 权重越高

    2) 权重值相同的情况下, 后面的胜出

花开至半

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
css选择器

CSS代码用来修饰 HTML元素. 要用CSS代码设置样式, 首先要选中HTML元素. 用来选中元素的代码称为选择器, 或选择符. html元素是指, 标签与标签包裹内容的整体. 常用的选择器有如下几种：1、标签选择器标签选择器，此种选择器影响范围大. 举例： ```html *{margin:0;padding:0} div{color:red}...
复制链接

扫一扫