css选择器重点内容_css中以下哪个选择器可以选择所有具有相同属性的元素

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

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

1. id选择器：选择具体的id属性值的元素。id值唯一
       ->语法：#id属性值{}

2. class类选择器：选择具有相同class属性值的元素。
       ->语法：.class属性值{}，类选择器选择器优先级高于元素选择器

3. 元素选择器：选择具有相同标签名的元素。
       ->语法： 标签名{}，id选择器优先级高于元素选择器

4. 通配选择器：
       -> 语法： *{}
   优先级稍后再补充

实例如下：
    .test1{	/*类选择器,选择class为test1的元素*/
            background-color: #40AFFE;
        }
    #test2{	/*id选择器，选择id为test2的元素*/
            background-color: blue;
        }
    span{	/*元素选择器,有很多，比如div,p,br...*/
            font-size:14px ;
        }
      *{	/*通配选择器*/
            width: 100%;
            height: 100%;
        }
1
2
3
4
5
6
7
8
9
10
11
12
13
14

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

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

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13

效果如下：

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

/*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;
        }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

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

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

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

1
2
3
4
5

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

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

注意：必须加上!important，这个表示优先执行，博主在这儿又绕了以圈儿，哎~~~~~

创作不易，如果这篇文章能够帮助到你，希望能关注或收藏一下博主，如果文章内容有问题也可留言讨论，我们一起学习，一起进步！！