css选择器

最新推荐文章于 2020-02-29 15:07:04 发布

偏执带点小放纵

最新推荐文章于 2020-02-29 15:07:04 发布

阅读量129

点赞数

分类专栏： Css 文章标签： css选择器

本文链接：https://blog.csdn.net/weixin_45562774/article/details/100567086

版权

Css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

css选择器

1.css选择器语法

选择器{css属性名：css属性值；…}

2.css注释

语法：/*注释内容*/
快捷键：ctrl+/

3.css基本选择器

1.标签选择器

<style>
    div{
          widows: 200px;
          height:200px;
          background:burlywood;
    }
    p{
        width:200px;
        height:200px;
        background:blue;
        border-radius:30%;
        text-align:center;
      
    }
    </style>

2.id选择器

将html元素加一个id属性，把这个id属性值作为选择器使用，需要id属性前面加#
- #id属性值
- 权重：100
一个html页面id属性值是唯一的只能有一个不能重复

<style>
        #box {
            width: 100px;
            height: 200px;
            background: blue;

        }
    </style>

body>
    <!-- div#box tab -->
    <div id="box">aaa </div>
</body>

####4.类选择器

将html元素加class属性值，用class属性值当选择器，在class属性值前加.
- 权重：10
- 一个html页面可以有很多个类（class）名，类名可以重复，并且一个元素可以有很多个类名，类名之间用空格分隔

 <style>
    .box{
        width:200px;
        height:100px;
        background:blue;
    }
    .div1{
        background:red;
    }
    </style>

<body>
    <div class="box div1"></div>
    <p class="box"></p>
</body>

####5.通配符选择器

匹配全部的html元素，一般我们不用，以为比较耗性能
- 语法：*{ css样式}
- 权重：无穷小

 *{
          
         /* 去除默认样式 */
         list-style:none;
         /* 去除默认编辑 */
         margin:0;
      }

4.关系选择器

1.后代选择器

语法：E F
- 作用：选择所有包含E元素里的F元素（包含所有的F元素即子子孙孙）
- 权重：基本选择器相加之和

<body>
    <div>
        <span>我是span元素</span>
        <div>
            <span>我是div里面的span</span>
        </div>
    </div>
    <p>
         <span>我是p标签里面的span</span>
    </p>
</body>

<style>
    div span{
        width:200px;
        height:100px;
        color:red;
        font-size:26px;
    }
    </style>

效果：
[外链图片转存失败(img-gDFHo4TH-1567688376632)(./1559881817938.png)]

2.子集选择器

语法：E>F
作用：选择所有E元素的子元素F（E元素的儿子F元素）
权重：所有的选择器相加之和

<style>
        div>span {
            color: red;

        }
    </style>

<body>
    <div>
        <span>我是span</span>
        <p>
            <span>我是p标签里面的span元素</span>
        </p>
    </div>
</body>

效果：
[外链图片转存失败(img-6BOVQFw8-1567688376634)(./1559881792890.png)]
-E元素是用来确定取值范围的
F元素才是我们最后选择的元素，样式都是加给F元素的
只被选中子元素，而后代元素不被选中

3.兄弟选择器

语法：E~F
作用：选择E元素后面的所有F元素
权重：所有选择器的相加之和

<style>
    p~span{
        color:red;
    }
    </style>

<body>
    <span>我是span1</span>
    <span>我是span1</span>
    <p>我是p</p>
    <span>我是span1</span>
    <span>我是span1</span>
    <span>我是span1</span>
</body>

效果：
[外链图片转存失败(img-rjsie8wj-1567688376637)(./1559882478691.png)]

4.相邻选择器

语法：E+F
作用：选择紧贴着E元素之后的F元素
权重：所有选择器相加之和

<style>
    p+span{
        color:red;
    }
    </style>

<body>
    <span>1我是span</span>
    <span>2我是span</span>
    <p>我是p标签</p>
    <span>3我是span</span>
    <span>4我是span</span>
    <span>5我是span</span>
</body>

效果：
[外链图片转存失败(img-nBVT0BCF-1567688376639)(./1559882998191.png)]
####区别：
相邻选择器只会选择符合条件的相邻的一个弟弟元素
兄弟选择器只会选中所有符合条件的弟弟元素

####5.交集选择器

语法：E.className
作用：两种选择器同属于一个元素的时候，可以用交集选择器进行精确的查找和选择，可以增加html的权重
权重：组合选择器权重之和

 <style>
    span.box1{
       color:red;
    }
    </style>

 <div>
         <span class="box1">我是span元素一</span>
         <span class="box2"> 我是span元素二</span>
         <p class="box1">我是p标签</p>
    </div>

效果：
[外链图片转存失败(img-g7g3OZO9-1567688376640)(./1559891714087.png)]

6.分组选择器

语法：E,F,G{CSS样式}
作用：同一份css样式，可以一次性添加到多个不同的html元素上
权重：权重不叠加，组之间分开计算的

 <style>
    div,span,p{
        color:red;
    }
    </style>

<body>
    <div>我是div</div>
    <span>我是span</span>
    <p>我是p</p>
    <strong>我是strong元素</strong>
</body>

效果：
[外链图片转存失败(img-29Dhoat4-1567688376642)(./1559892270062.png)]

1.属性选择器

语法：[标签属性名]{css样式}
权重：10

 <style> [title]
             {
               color:blue;
               font-size:20px;
             }
            [title="box2"]
            {
                width:100px;
                height: 100px;
                background:chartreuse;
            }
    </style>

<body>
    <div title="box1">div2</div>
    <div title="box2">div2</div>
</body>

效果：
[外链图片转存失败(img-RJBMgLaN-1567688376644)(./1559893088454.png)]

伪类选择器

一个元素为某种状态时，比如：鼠标滑过，鼠标点击等状态
E:link 设置a标签的默认样式，未被访问过，也就是访问前的样式
E:hover设置元素在鼠标悬停时的时候的样式
E：active设置超链接被访问是的样式（点击时）
E：visited设置超链接被访问过后的样式

 a:link{ 
        color:cyan;
    }
    a:hover{
        color:honeydew;
        background:gold;
    }
    a:active{
        color:lightslategray;
        background:pink;
    }
    a:visited{

        color:yellowgreen;
        background:red;
    }

伪元素选择器

语法：E::befor/E::after
作用：在目标元素的后面或前面插入内容（html不存在的假的html元素）
需要与content一起使用，属性值为空时要用双引号
在工作中经常用after清除浮动
字体图标也经常使用伪元素来实现

偏执带点小放纵

关注

0
点赞
踩
0

收藏

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

css选择器1.css选择器语法选择器{css属性名：css属性值；…}[外链图片转存失败(img-0ZBYGb5r-1567688376631)(./1559877370894.png)]2.css注释语法：/*注释内容*/快捷键：ctrl+/3.css基本选择器1.标签选择器<style> div{ widows: 200px;...
复制链接

扫一扫