css选择器重点内容_css中判断name相同的元素选择器-优快云博客

本文主要介绍了CSS选择器，包括基本选择器如id、class、元素、通配选择器，以及其他选择器如并集、子、父、属性选择器等。还分享了使用CSS选择器修改layui弹出层样式的经验，强调了!important的使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

css选择器：筛选具有相似特征的元素

1. 基本选择器 (*必掌握)

id选择器：选择具体的id属性值的元素。id值唯一
->语法：#id属性值{}
class类选择器：选择具有相同class属性值的元素。
->语法：.class属性值{}，类选择器选择器优先级高于元素选择器
元素选择器：选择具有相同标签名的元素。
->语法：标签名{}，id选择器优先级高于元素选择器
通配选择器：
-> 语法： *{}
优先级稍后再补充

实例如下：
    .test1{	/*类选择器,选择class为test1的元素*/
            background-color: #40AFFE;
        }
    #test2{	/*id选择器，选择id为test2的元素*/
            background-color: blue;
        }
    span{	/*元素选择器,有很多，比如div,p,br...*/
            font-size:14px ;
        }
      *{	/*通配选择器*/
            width: 100%;
            height: 100%;
        }

2. 其他选择器 (*重点)

除了以上的基本选择器外，以下介绍的选择器也十分重要，使用起来会让人觉得眼前一亮，犹如神来之笔，博主深有体会

并集选择器(多元素选择器)：同时匹配所有指定的元素
-> 语法：选择器1,选择器2{}
子选择器(后代选择器)：筛选选择器1元素下的选择器2元素
-> 语法：选择器1 选择器2{}
父选择器：筛选选择器2的父元素选择器1
-> 语法：选择器1 > 选择器2{}

<div class="test1"><span>aaa</span></div>
<div id="test2"><span>span1</span><span>span2</span></div>
<span>ccc</span>

   /*并集选择器：同时匹配所有指定的元素，并设置它的背景色*/
	.test1, #test2, span {
            background-color: blue;
        }
  /*子选择器：筛选.test1元素  下的span 元素,并设置它的背景色 */
        .test1 span {
            background-color: red;
        }
/*父选择器：筛选span的父元素#test2，并设置它的背景色*/
        #test2 > span {
            background-color: red;
        }

效果如下：
在这里插入图片描述

属性选择器()：(*亮点，用的好则一倍功，十倍效)
->语法：元素名称[属性名=“属性值”]{}
常用如下：

/*1.匹配有name属性的div元素，并设置其背景色为蓝色*/
div[name]{
    background-color: blue;
}

/*2.匹配name属性为test1的div元素，并设置其背景色为蓝色*/
	div[name=test1]{
       background-color: blue;
    }
    
/*3.匹配name属性为te开头的div元素，并设置其背景色为蓝色*/
	div[name^=te]{
        background-color: blue;
        }
        
/*4.匹配属性值以指定值结尾的每个元素 ，匹配name属性为st1结尾的div元素 */
	div[name$=st1]{
  		 background-color: blue;
        }

/*5.匹配属性值中包含指定值的每个元素,包含有es的name属性的div标签 */
	div[name*=es]{
            background-color: blue;
        }

另博主记忆最深刻的是，我想吧layui的弹出层修改成圆角的，就在这一点上扯把子了好久，那会儿想到了两种解决办法：
1.改layui的源代码，可以实现，但是一个大项目里面，又不可能只有你一个人在用这个，你改了源码，别人调用这个框架的风格也会改变，很不友好；

2.在你想要变动样式的单独模块，重写layui的样式，很nice!!
可是我却在这里摸索了好久，因为熟悉layui的都知道，弹出层每一次弹出的id都不一样，会依次累加，所以后来我才想到用css正则

/*如下，只要是以layui-layer开头的id 属性都给他设置成圆角*/
[id^="layui-layer"] {
            border-radius: 9px !important;
        }

再layui的弹出层的title也要把圆角加上，否则就比较扯了，诸君可以去多试试，看一下效果，代码如下：

layer.open({
                title: ['提示', 'border-radius: 9px;']
                , shadeClose: true
                , resize: false
                , content: '图像采集失败，请重新采集！'
            });