7.18 Web前端-css特殊选择器

大家晚上好,今天继续我们的课程,前面说了常用的选择器,今天来介绍特殊的选择器,特殊选择器的种类比较多,但是都很实用,,话不多说,我们从复合选择器开始说起:

1.复合选择器

有的时候客户的需求中会有到多重的条件,用常用选择器我们也可以完成,但是一个一个列举常用选择器会很麻烦,所以我们引进了符合选择器的概念,而符合选择器我们用两种,分别是交集选择器和并集选择器,有一定数学基础的朋友们也都知道交集和并集的概念,在这里是通用的,所以我只说明一下书写方式:

并集选择器:

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

交集选择器:

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

举例:

1.将class属性为red的div字体变成24像素;

2.将h1与h3的字体颜色变为蓝色;

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div.red {
        font-size: 24px;
      }
      h1,
      h3 {
        color: blue;
      }
    </style>
  </head>
  <body>
    <h1>满江红·写怀</h1>
    <h3>岳飞·宋</h3>
    <p class="red">怒发冲冠,凭栏处、潇潇雨歇。</p>
    <div class="red">抬望眼,仰天长啸,壮怀激烈。</div>
    <div>三十功名尘与土,八千里路云和月。</div>
  </body>
</html>

运行结果如下: 

 2.关系选择器

和平常我们生活中的形形色色的关系一样,选择器也有关系选择器,常见的是父子选择器,祖先后代选择器,兄弟选择器和顺承选择器,这里介绍一下他们的语法和举个例子:

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

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

兄弟语法:兄 + 弟{}

顺承语法:兄 ~ 弟{}

举例:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /* 需求一:为div的子元素span设置一个字体颜色红色 */
      div > span {
        color: red;
      }
      /* 需求二:div里的span元素字体都变为30px */
      div span {
        font-size: 30px;
      }
      /* 需求三:选择下一个兄弟(仅挨着我的)*/
      p + span {
        color: green;
      }
      /* 需求四:选择下面所有的兄弟(前面的不选)*/
      p ~ span {
        background-color: grey;
      }
    </style>
  </head>
  <body>
    <div>
      我是超市<br />
      <span>我是零食区</span>
      <p>
        我是生鲜区
      </p>
      <span>我是鞋包区</span><br />
      <span>我是洗护区</span>
    <span>我是超市外的小卖部</span>
  </body>
</html>

运行结果如下:

3. 属性选择器:

属性选择器一般用来选择某一条属性的元素,用法也很简单,这里简单说一下它的语法。

语法:

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

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

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

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

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

举例:p标签title中以a开头的元素变为红色

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>属性选择器</title>
    <style>
      p[title^="a"] {
        color: red;
      }
    </style>
  </head>
  <body>
    <h1 title="a" id="abcd" class="ac">满江红·写怀</h1>
    <h3 title="ab">岳飞·宋</h3>
    <p>····</p>
    <p title="abc">靖康耻,犹未雪。臣子恨,何时灭!</p>
    <p title="abcdab">驾长车,踏破贺兰山缺。</p>
    <p>壮志饥餐胡虏肉,笑谈渴饮匈奴血。</p>
    <p id="ab">待从头、收拾旧山河,朝天阙。</p>
  </body>
</html>

运行结果如下:

 今天就先说这么多,如有什么不对的地方请大家及时指出,明天我会将选择器部分说完,设下的就说元素的伪类和伪类选择器,在后面的学习中会经常用到,大家要一起进步,共同学习,谢谢观看。

 

 

  • 3
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
以下是求解多元多项式回归的 MATLAB 代码: ```matlab % 输入数据 x1 = [36.4 37.2 37.2 36.2 31.5 28.9 27.2 26.7 26.1 26.1 25.4 25.3 25.4]'; x2 = [50.0 52.0 49.0 51.0 68.0 74.0 83.0 82.0 88.0 88.0 90.0 88.0 87.0]'; x3 = [982.9 982.2 981.8 981.6 982.3 982.6 983.4 983.5 984.0 983.6 984.4 984.5 984.4]'; y = [-7.30 -7.36 -7.35 -7.33 -7.31 -7.30 -7.26 -7.22 -7.21 -7.23 -7.18 -7.17 -7.14]'; % 构建设计矩阵X X = [ones(size(x1)) x1 x2 x3 x1.^2 x1.*x2 x1.*x3 x2.^2 x2.*x3 x3.^2]; % 求解回归系数 beta = X \ y; % 构建预测模型 model = @(x1,x2,x3) beta(1) + beta(2)*x1 + beta(3)*x2 + beta(4)*x3 ... + beta(5)*x1.^2 + beta(6)*x1.*x2 + beta(7)*x1.*x3 ... + beta(8)*x2.^2 + beta(9)*x2.*x3 + beta(10)*x3.^2; % 预测并绘制拟合图 x1fit = min(x1):0.1:max(x1); x2fit = min(x2):0.1:max(x2); x3fit = min(x3):0.1:max(x3); [X1FIT,X2FIT,X3FIT] = meshgrid(x1fit,x2fit,x3fit); YFIT = model(X1FIT,X2FIT,X3FIT); figure; plot3(x1,x2,x3,'o',x1fit,x2fit,x3fit,'*'); hold on; mesh(X1FIT,X2FIT,X3FIT,YFIT); xlabel('x1'); ylabel('x2'); zlabel('x3'); title('拟合图'); % 绘制残差图 YFIT = model(x1,x2,x3); figure; plot(YFIT - y,'o'); xlabel('样本编号'); ylabel('残差'); title('残差图'); ``` 运行上述代码后,会先绘制拟合图,然后绘制残差图。拟合图中,蓝色的点表示原始数据,红色的点表示拟合值,可以看到拟合值与原始数据比较接近;残差图中,横轴表示样本编号,纵轴表示残差,残差的分布应该比较均匀,没有明显的规律。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

执笔绘江山

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值