选择器伪类伪元素

最新推荐文章于 2022-10-08 11:23:56 发布

小崔崔的博客

最新推荐文章于 2022-10-08 11:23:56 发布

阅读量681

点赞数 2

分类专栏： JS 文章标签：选择器伪类伪元素

本文链接：https://blog.csdn.net/qq_39430589/article/details/75267377

版权

JS 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

3.5结构选择器

（1）后代选择器：可以选择一个元素的后代元素。这个后代元素包括儿子、孙子。。。。。

写法：E F

案例：

.content a {

font-size: 36px;
}

<div class="content a">
                 <p> 8月，尼泊尔 <span><a href="http://www.baidu.com">前往现场</a></span>从中国香港购买宽
                     带，<a href="http://www.baidu.com" >自由</a>接入任何网站。
                                      </p>
    <a href="http://www.baidu.com">前往现场</a>

</div>

效果如下：

（2）子元素选择器：通过某一个元素选中直接后代元素

写法：E > F(“>”英文输入状态下输入)

.content > a {
font-size: 36px;
}

<h1>天气预报</h1>
<div class="content a">
                 <p> 8月，尼泊尔 <span><a href="http://www.baidu.com">前往现场</a></span>从中国香港购买宽
                     带，<a href="http://www.baidu.com" >自由</a>接入任何网站。
                 </p>
    <a href="http://www.baidu.com">前往现场</a>

</div>
<a href="http://www.baidu.com" >查看全文</a>

3.6并选择器

并选择器：把相同的样式放在一起，类名直接使用英文逗号分隔。

写法：E , F

案例：

.div2 , .div1{
    color: #0dff11;
    position: relative;
    width: 100px;
    height: 100px;
}

   .div1{
            border: 1px solid yellow;
        }
        .div2{
            border: 1px solid #71b9fe;
        }
    </style>
</head>
<body>
<div class="div1">我是div1</div>
<div class="div2">我是div2</div>
</body>

效果如下：

3.7通配符选择器：

通配符选择器可以选中页面中所有的标签。

  .content > a {
            font-size: 36px;
        }
        *{
            font-size: 50px;
            padding: 0;
            margin: 0;
        }
    </style>
</head>
<body>
    <h1>天气预报</h1>
    <div class="content a">
                     <p> 8月，尼泊尔 <span><a href="http://www.baidu.com">前往现场</a></span>从中国香港购买宽
                         带，<a href="http://www.baidu.com" >自由</a>接入任何网站。

                     </p>
        <a href="http://www.baidu.com">前往现场</a>

    </div>
    <a href="http://www.baidu.com" >查看全文</a>
</body>

使用*前使用*后

注意：通配符选择器对页面所有的元素都会设置对应的样式，而是实际上呢，

有很多元素默认是不带任何的样式

3.8兄弟选择器

（1）写法E+F：选中最近的一个“弟弟”元素。不选中自己。

效果如下

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

3.9伪类、伪元素选择器

1.伪类选择器：

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

条件一：根据元素不同的状态，自动选择不同的样式。

条件二：直接添加到一个class，给这个class设置特殊的样式

li:first-child

a:hover 鼠标划过时添加样式

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

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

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

Input：focus：拥有键盘输入获取焦点时候添加样式。

伪元素选择器：

2.伪元素：
（2.1）需要设置特殊效果的内容放到一个元素标签里面(a)
(2.2)再添加一个class，对class设置特殊元素

p:first-letter p:first-line

P:before p:after

li:after{
content: "。";

Color:blue
}

总结： E F

空格所有后代

>直接后代

+大弟弟

~所有弟弟

3.5结构选择器

（1）后代选择器：可以选择一个元素的后代元素。这个后代元素包括儿子、孙子。。。。。

写法：E F

案例：

.content a {

font-size: 36px;
}

效果如下：

（2）子元素选择器：通过某一个元素选中直接后代元素

写法：E > F(“>”英文输入状态下输入)

.content > a {
font-size: 36px;
}

3.6并选择器

并选择器：把相同的样式放在一起，类名直接使用英文逗号分隔。

写法：E , F

案例：

.div2 , .div1{
    color: #0dff11;
    position: relative;
    width: 100px;
    height: 100px;
}

效果如下：

3.7通配符选择器：

通配符选择器可以选中页面中所有的标签。

使用*前使用*后

注意：通配符选择器对页面所有的元素都会设置对应的样式，而是实际上呢，

有很多元素默认是不带任何的样式

3.8兄弟选择器

（1）写法E+F：选中最近的一个“弟弟”元素。不选中自己。

效果如下

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

3.9伪类、伪元素选择器

1.伪类选择器：

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

条件一：根据元素不同的状态，自动选择不同的样式。

条件二：直接添加到一个class，给这个class设置特殊的样式

li:first-child

a:hover 鼠标划过时添加样式

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

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

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

Input：focus：拥有键盘输入获取焦点时候添加样式。

伪元素选择器：

2.伪元素：
（2.1）需要设置特殊效果的内容放到一个元素标签里面(a)
(2.2)再添加一个class，对class设置特殊元素

p:first-letter p:first-line

P:before p:after

li:after{
content: "。";

Color:blue
}

总结： E F

空格所有后代

>直接后代

+大弟弟

~所有弟弟

小崔崔的博客

关注

2
点赞
踩
0

收藏

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

3.5结构选择器（1）后代选择器：可以选择一个元素的后代元素。这个后代元素包括儿子、孙子。。。。。写法：E F案例： .content a { font-size: 36px; } 8月，尼泊尔前往现场从中国香港购买宽带，自由接入任何网站。
复制链接

扫一扫