css选择器

最新推荐文章于 2024-07-06 20:00:00 发布

你在狗叫什么！

最新推荐文章于 2024-07-06 20:00:00 发布

阅读量125

点赞数 1

文章标签： html 前端 java html5 css3

本文链接：https://blog.csdn.net/qq_69417416/article/details/124597101

版权

css常用选择器

1、元素选择器

作用：根据标签名来选中指定的元素

语法：标签名 {}

例如：h1 {}

2、id选择器

作用：根据元素的id属性值来选中元素

语法：#id属性值 {}

例如：#p1 {} #pp {}

注意：id选择，对应属性值，一个页面只能用一次

3、class选择器（类选择器）

作用：根据元素的class属性值来选中元素

语法：.class属性值 {}

例子：.p2 {} .p3 {} .pp {}

用法跟id选择器类似，但可以复用

4、通配选择器

作用：选中页面中所有的标签

语法：* {}

css复合选择器

1、交集选择器

作用：选中同时符合多个条件的元素

语法：选择器1选择器2选择器3····· {}

注意：如果选择器中有元素选择器，元素选择器要写在前面

 
<head>
     <style>
        span.p1{
              font-size: 30px;
          }
       </style>
</head>
<body>
    <h1>古诗一首</h1>
    <h3>哈哈哈</h3>
    <p class="p1">锄禾日当午</p>
    <p >汗滴禾下土</p>
    <span class="p1">谁知盘中餐</span><br />
    <span>粒粒皆辛苦</span>
  </body>

2、并集选择器

作用：同时选择多个选择器对应的元素

语法：选择器1,选择器2,选择器3····· {}


<head>
     <style>
        h1,h3{
              font-size: 30px;
          }
       </style>
</head>
<body>
    <h1>古诗一首</h1>
    <h3>哈哈哈</h3>
    <p class="p1">锄禾日当午</p>
    <p >汗滴禾下土</p>
    <span class="p1">谁知盘中餐</span><br />
    <span>粒粒皆辛苦</span>
  </body>

关系选择器

元素之间关系：

1:父元素直接包含子元素的元素

2:子元素直接被父元素包含的元素

3:祖先元素直接或间接包含后代元素的元素父元素也是祖先元素

4:后代元素直接或间接被祖先元素包含的元素子元素也是后代元素

5:兄弟元素拥有相同父元素的元素

1、子元素选择器

作用：通过父元素找到对应的子元素

语法：父>子{}

div > span {
        color: red;
      }

2、后代选择器

作用：通过祖先元素找到指定的后代元素

语法：祖先后代{}

 div #s1{
          background-color: green;
      }

3、相邻兄弟选择器

作用：通过兄元素找到相邻弟的元素，只找相邻的一个弟弟

语法：兄+弟{}

#s1+span{
          font-size: 30px;
      }

4、选择所有兄弟选择器

语法：兄~弟{}

注意：前面的兄弟不选

 #s1~span{
          color: orange;
      }

属性选择器

语法：

[属性名]{} 选择含有指定属性的元素

[属性名=属性值]{} 选择含有指定属性和属性值的元素

[属性名^=属性值]{} 选择以指定属性值开头的元素

[属性名$=属性值]{} 选择以指定属性值结束的元素

[属性名*=属性值]{} 选择属性值含有某值的元素

li[title]{
            color: red;
        }
[title="ab"]{
            font-size: 30px;
        }
[title^="b"]{
            color: red;
        }
[title$="b"]{
            color: red;
        }
[title*="c"]{
            color: red;
        }

伪类选择器

不存在的类，用来表示一个元素特殊的状态

例如：第一个元素被点击元素鼠标移入的元素

语法：

1、 :first-child 第一个子元素

2、 :last-child 最后一个子元素

3: :nth-child() 选中第几个元素

特殊值：n 选择所有的

2n+1/odd 选中奇数

2n/even 选中偶数

注意：以上所有的伪类都是根据所有的子元素进行排序

1、 :first-of-type 同类型的第一个

2、 :last-of-type 同类型的最后一个

3、 :nth-of-type(2) 同类型选择哪个

注意：以上这些伪类是根据同类型的子元素中去选择

:not() 否定伪类----将复合条件的元素从选择器中去除

伪元素选择器

不真实存在元素（元素的位置）

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

::first-line 表示第一行

::selection 选中的内容

::before 元素的最前面

::after 元素的最后面

before和after需要配合content使用

   p::before{
            color: red;
            content: '你好';
        }

选择器的权重

! important 最高优先级以下依次降低

内联样式

id选择器

类和伪类选择

元素选择器

子选择器，相邻选择器通配符

继承的样式没有优先级

注意：1：如果优先级一样，则优先使用靠下的样式

2：比较优先级的时候，需要将所有的选择器优先级相加，最后优先级高的，则优先展示

3:选择器权重相加，不会超过上一级选择器的选择器

你在狗叫什么！

关注

1
点赞
踩
0

收藏

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

css常用选择器1、元素选择器作用：根据标签名来选中指定的元素语法：标签名 {}例如：h1 {}2、id选择器作用：根据元素的id属性值来选中元素语法：#id属性值 {}例如：#p1 {} #pp {}注意：id选择，对...
复制链接

扫一扫