CSS选择器补充

最新推荐文章于 2024-09-13 23:28:46 发布

昨夜秋风拂

最新推荐文章于 2024-09-13 23:28:46 发布

阅读量87

点赞数

分类专栏： CSS 文章标签： css 前端 html

本文链接：https://blog.csdn.net/L20220927Y/article/details/127229785

版权

CSS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1.关系选择器

通过判断元素的所属关系来进行甄别选择

子元素选择器

作用：选中指定的父元素下面指定的子元素

语法：父元素>子元素{}

例如：div>p,.big>p,#big>p{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style>
div>#wj{color:red;}
<style/>
</head>
<body>
    <div>
玩具 
<p id="wj">
变形金刚
<p/>
<div/>
</body>
</html>

后代选择器

作用：选中指定祖先元素下面指定的后代元素

语法：祖先元素后代元素{}

例如：#big span{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div .sx{background-color: hotpink;}
    </style>
</head>
<body>
    <div>
      大超市
      <p class="sx">生鲜区</p>
<div/>

</body>
</html>

下一个选择器

作用：选择下一个兄弟

语法：兄+弟{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #b+#g{background-color: green;}
    </style>
</head>
<body>
    <span
          >上衣
          <em id="b">衬衫</em>
          <em id="g">短袖</em>
       </span>
</body>
</html>

下面所有选择器

选择当前标签以后的同级别标签

语法：兄～弟{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #ls~p{font-size: 30px;}
    </style>
</head>
<body>
    </div>
      <p id"ls">零食区</p>
      <p>酒水区</p>
      <p>娱乐区</p>
    </div>
</body>
</html>

2.伪元素选择器

伪元素，表示页面中一些特殊的并不真实存在的元素（元素的位置）

::first-letter 表示第一个字母

::first-line 表示第一行

::selection 选中的内容

::before 元素的开始位置

::after 元素的结束位置

注：before和after必须要结合content使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
p::first-letter{font-size: 40px ;}
p::first-line{color: red;}
p::selection{color: aqua;}
p::before{content: "开始";}
p::after{content:"结束" ;}
    </style>
</head>
<body>
    <p>
    ipsum dolor sit amet consectetur adipisicing elit. Porro fugiat maiores sit ex expedita beatae, sint quisquam amet quod cupiditate, tempora omnis impedit deleniti, iure fuga illo
      quibusdam. Alias, soluta?
    </p>
</body>
</html>

before与after所添加的内容并没有独占一行，所以他们是行内元素，并且他们不可以被选中。