选择器

最新推荐文章于 2020-10-16 16:46:16 发布

文洛

最新推荐文章于 2020-10-16 16:46:16 发布

阅读量1.7k

点赞数 1

分类专栏：语言，HTML

本文链接：https://blog.csdn.net/a126789/article/details/75267943

版权

语言，HTML 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

今天老师又讲了很多的东西，还解决了许多不会的问题，那么现在就来写今天学习的知识吧。

今天主要学习了结构选择器和并选择器、通配符选择器、兄弟选择器等一系列的选择器。结构选择器分为两个选择器：一为后代选择器，二为子元素选择器。

1、后代选择器：是可以选择一个元素的后代元素，这个后代元素可以形象的比喻为儿子、孙子......

用代码来显示就是：

2、子元素选择器：每一个元素选择的直接后代。

写法：E > F

3、并选择器：是将元素中相同的样式放在一起。

写法：E,F

<style type="text/css">
    .div1,.div2{
        width: 100px;
        height: 100px;
        position: relative;
    }
    .div1{
         border: 1px solidblue;
     }
    .div2{
        border: 1px solidgreen;
    }
</style>

4、通配符选择器：可以选中页面中所有元素的标签，清空所有的默认属性。

<style type="text/css">
        *{
            padding:0;
            margin:0;
        }
        .div1> a{
            font-size:30px;
        }
    </style>

5、兄弟选择器：

（1）选中最近的一个“弟弟”元素，不选中自己。

写法：E + F

.go-to + a{
color: red;
}

（2）写法：E ~ F，选中所有的“弟弟”，还是不选中自己。

.go-to ~ a{
color: red;
}

6、伪类、伪元素选择器

（1）伪类

①根据元素不同的状态，自动选择不同的样式

②直接添加一个class（类），给这个class设定特殊样式

li:first-child、

a:hover：鼠标滑过的是有添加样式

a:active：被激活的时候添加样式。点击那一时刻（按住鼠标左键不放）

a:link：链接地址未被访问时候添加的状态，必须设置href属性

a:visited：链接地址点击之后添加的样式，必须设置href属性

input:focus：拥有键盘输入获取焦点时候添加的样式

（1）伪元素选择器

① 需要设置特殊效果的内容放到一个元素（标签）里面span

②在添加一个class，对class设置特殊样式

p:first-line、p:first-letter、p:before、p:after

今天就学习了这么多，虽然理解了，但是还应常复习，要不然就会忘了。加油！！

文洛

关注

1
点赞
踩
0

收藏

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

今天老师又讲了很多的东西，还解决了许多不会的问题，那么现在就来写今天学习的知识吧。今天主要学习了结构选择器和并选择器、通配符选择器、兄弟选择器等一系列的选择器。结构选择器分为两个选择器：一为后代选择器，二为子元素选择器。1、后代选择器：是可以选择一个元素的后代元素，这个后代元素可以形象的比喻为儿子、孙子......用代码来显示就是：styletype="text/css">
复制链接

扫一扫