几个CSS知识｜8月更文挑战

Nordon
443 阅读4分钟

这是我参与8月更文挑战的第5天，活动详情查看：8月更文挑战

选择器+、～

  • ~选择器 必须是拥有相同的父元素

    • element1~element2 选择器 element1 之后出现的所有 element2
    • 两种元素必须拥有相同的父元素，但是 element2 不必直接紧随 element1
    <style>
    * {
      margin: 0;
      padding: 0;
    }
    .num {
      width: 100vw;
      height: 60px;
      line-height: 60px;
      text-align: center;
    }

    .item ~ .item {
      background-color: antiquewhite;
    }
</style>

<body>
  <div id="content">
    <p class="item num">11111</p>
    <p class="num">插入的元素</p>
    <p class="item num">2222</p>
    <p class="item num">3333</p>
    <p class="item num">4444</p>
  </div>
</body>

    展示效果

image-20210731232030098.png 中间 <p class="num">插入的元素</p>有没有都不会影响其展示效果，和+选择器的区别

  • +选择器必须是相邻的元素

    • element+element 选择器用于选取第一个指定的元素之后（不是内部）紧跟的元素

      上面的代码，仅仅是将.item ~ .item 修改为.item + .item

image-20210731232507893.png

操作伪类

伪类在我们编写代码时，是非常常用的，但是当需要通过JS动态操作伪类的时候，我们可以通过一下几种方式实现动态控制伪类的样式

当我们有这么一段HTML和CSS

<style>
	.red::before { content: 'red'; color: red; }
</style>

<p class="red">我是一段受伪类控制的元素</p>

方式1: 通过类名控制

首先预设好需要的样式

	.green::before { content: 'green'; color: green; }

通过操作类名达到操作伪类样式的效果

$('p').removeClass('red').addClass('green');

方式2:动态控制style的样式

document.styleSheets[0].addRule('.red::before','color: green'); document.styleSheets[0].insertRule('.red::before { color: green }', 0);

方式3:创建一个style标签插入head中

首先创建一个新的style元素

style = document.createElement("style");

将其插入到header中

document.head.appendChild(style);

赋值给sheet

sheet = style.sheet

最后添加

sheet.addRule('.red::before','color: green'); 
sheet.insertRule('.red::before { color: green }', 0);

方式4:html使用自定义属性data定义，css使用attr进行调用

// HTML
<p class="red" data-attr="red">Hi, this is plain-old, sad-looking paragraph tag.</p>
// CSS
.red::before { content: attr(data-attr); color: red; } 
// JS
$('.red').attr('data-attr', 'green');

cssText

当我们需要批量操作某个DOM的样式时

可以通过JS一个一个的去设置，这样的效果会较为繁琐且低效

可以通过预设类名的样式，切换类名达到期望效果，若是样式需要在某些情况下展示一系列的样式组合或者需要动态的设置很多样式，便会使样式的维护成本大大增加

cssText方式批量设置样式，会将标签内的内联样式全部替换为cssText的样式，这种方式更加灵活

this.$el.style.cssText  = `
	width:${this.css.module_width}px !important;
	height:${this.css.module_height}px !important;`;

Attribute && Property

  • attribute:
    • html预定义属性
    • html自定义属性
    • 每一个预定义的aattribute都会有一个property与之对应,自定义的没有
  • property
    • js原生对象的属性
  • 布尔值属性
    • property是布尔值类型
    • 改变property时不会同步attribute
    • 在没有动过property时,attribute和property会同步,一旦动过property,attribute不会同步property
  • 非布尔值属性
    • property不是布尔值类型
    • 不管什么情况,property和attribute都会同步
  • 浏览器 只认property
  • 用户操作的是property
  • 操作布尔值属性使用property,效率会比attribute低一些
  • 操作非布尔值属性使用attribute

浏览器的兼容性问题

  • png24位的图片在iE6浏览器上出现背景，解决方案是做成PNG8
  • 浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一
  • IE6双边距bug:块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大
    • 浮动ie产生的双倍距离 #box{ float:left; width:10px; margin:0 0 0 100px;}
    • 这种情况之下IE会产生20px的距离，解决方案是在float的标签样式控制中加入 ——_display:inline;将其转化为行内属性。(_这个符号只有ie6会识别)
  • 渐进识别的方式，从总体中逐渐排除局部。
    • 首先，巧妙的使用“\9”这一标记，将IE游览器从所有情况中分离出来。
    • 接着，再次使用“+”将IE8和IE7、IE6分离开来，这样IE8已经独立识别
.bb{
    background-color:red;/*所有识别*/
    background-color:#00deff\9; /*IE6、7、8识别*/
    +background-color:#a200ff;/*IE6、7识别*/
    _background-color:#1e0bd1;/*IE6识别*/
}
  • IE下,可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute()获取自定义属性;Firefox下,只能使用getAttribute()获取自定义属性,解决方法:统一通过getAttribute()获取自定义属性
  • IE下,even对象有x,y属性,但是没有pageX,pageY属性;Firefox下,event对象有pageX,pageY属性,但是没有x,y属性
  • Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示,可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决
  • 超链接访问过后hover样式就不出现了,被点击访问过的超链接样式不在具有hover和active了解决方法是改变CSS属性的排列顺序:L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}
avatar
文章
阅读
粉丝