【前端】：属性选择器

WEBJ2EE

发布于 2020-01-17 15:53:32

8580

文章被收录于专栏：WebJ2EEWebJ2EE

目录
1. 属性选择器
    1.1. 属性存在性选择器
    1.2. 属性值直接匹配选择器
    1.3. 属性值正则匹配选择器
2. AMCSS——基于HTML属性的CSS模块化技术
3. 几道笔试题

1. 属性选择器

The CSS attribute selector matches elements based on the presence or value of a given attribute. https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

1.1. 属性存在性选择器

语法：

[attr]
  Represents elements with an attribute name of attr.

示例：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>

  <style type="text/css">
    input[disabled] {
      color: rgba(0, 0, 0, 0.25);
      background-color: #f5f5f5;
      border-color: #d9d9d9;
      cursor: not-allowed;
    }
</style>
</head>
<body>
  <form name="myform">
    <input name="xm" type="text" disabled="disabled" value="WEBJ2EE" />
  </form>
</body>
</html>

1.2. 属性值直接匹配选择器

语法：

[attr=value]
  Represents elements with an attribute name of attr 
  whose value is exactly value.
  （有 attr 属性，而且属性值必须与 value 完全匹配）

[attr~=value]
  Represents elements with an attribute name of attr 
  whose value is a whitespace-separated list of words, 
  one of which is exactly value.
  （有 attr 属性，而且属性值与 value 中的一个单词匹配）

[attr|=value]
  Represents elements with an attribute name of attr 
  whose value can be exactly value or can begin with value immediately followed by a hyphen, - (U+002D). 
  It is often used for language subcode matches.
 （有 attr 属性，而且属性值与 value 完全相同，或者属性值以 value- 开头）

示例1：[attr=value]

.ant-form input[type='file']:focus,
.ant-form input[type='radio']:focus,
.ant-form input[type='checkbox']:focus {
  outline: thin dotted;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}

input[type='radio'][disabled],
input[type='checkbox'][disabled],
input[type='radio'].disabled,
input[type='checkbox'].disabled {
  cursor: not-allowed;
}

form input[type='radio'],
form input[type='checkbox'] {
  width: 14px;
  height: 14px;
}

.ant-upload input[type='file'] {
  cursor: pointer;
}

示例2：[attr~=value]

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <style type="text/css">
    .demo{
      width: 300px;
      border:1px solid #ccc;
      padding: 10px;
      overflow: hidden;
      margin: 20 auto;
    }
    .demo a {
      float: left;
      display: inline-block;height: 50px;
      line-height: 50px;
      width: 50px;
      border-radius: 10px;
      text-align: center;
      background: #aac;
      color: blue;
      font: bold 20/50px arial;
      margin-right:5px;
      text-decoration: none;
      margin: 5px;
    }

    a[title ~= website]{
      background-color: yellow;
    }
</style>
</head>
<body>
  <div class="demo">    
    <a class="links item" title="website link">1</a>   
    <a class="links item" title="open the website">2</a>   
    <a class="links item" title="close the website">3</a>    
    <a class="linksitem last" title="websiteitem link">4</a>
  </div>
</body>
</html>

示例3：[attr|=value]

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>

  <style type="text/css">
    [lang |= "zh"] {
      color: red;
    }
</style>
</head>
<body>
  <div lang="en-us en-gb en-au en-nz">Hello World!</div>
  <div lang="pt">Olá Mundo!</div>
  <div lang="zh-CN">世界您好！</div>
  <div lang="zh-TW">世界您好！</div>
</body>
</html>

1.3. 属性值正则匹配选择器

语法：

[attr^=value]
  Represents elements with an attribute name of attr 
  whose value is prefixed (preceded) by value.
  （有 attr 属性，且属性值以 value 开头）

[attr$=value]
  Represents elements with an attribute name of attr 
  whose value is suffixed (followed) by value.
 （有 attr 属性，且属性值以 value 结尾）

[attr*=value]
  Represents elements with an attribute name of attr 
  whose value contains at least one occurrence of value within the string.
 （有 attr 属性，且属性值中包含 value 字符）

示例1：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>

  <style type="text/css">
    .demo{
      width: 300px;
      border:1px solid #ccc;
      padding: 10px;
      overflow: hidden;
      margin: 20 auto;
    }
    .demo a {
      float: left;
      display: inline-block;height: 50px;
      line-height: 50px;
      width: 50px;
      border-radius: 10px;
      text-align: center;
      background: #aac;
      color: blue;
      font: bold 20/50px arial;
      margin-right:5px;
      text-decoration: none;
      margin: 5px;
    }

    a[class*=links]{
      background-color: green;
    }
</style>
</head>
<body>
  <div class="demo">    
    <a class="links item" title="website link">1</a>   
    <a class="links item" title="open the website">2</a>   
    <a class="links item" title="close the website">3</a>    
    <a class="linksitem last" title="websiteitem link">4</a>
  </div>
</body>
</html>

示例2：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>

  <style type="text/css">
    div[class^="test"]{
      background:#ffff00;
    }
</style>
</head>
<body>
  <div class="first_test">The first div element.</div>
  <div class="second">The second div element.</div>
  <div class="test">The third div element.</div>
  <p class="test">This is some text in a paragraph.</p>
</body>
</html>

示例3：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>

  <style type="text/css">
    div[class$="test"]{
      background: #ff0000;
    }
</style>
</head>
<body>
  <div class="first_test">The first div element.</div>
  <div class="second">The second div element.</div>
  <div class="test">The third div element.</div>
  <p class="test">This is some text in a paragraph.</p>
</body>
</html>

2. AMCSS——基于HTML属性的CSS模块化技术

Attribute Modules (AM) is a technique for using HTML attributes and their values rather than classes for styling elements. In doing so, each attribute effectively declares a separate namespace for encapsulating style information, resulting in more readable and maintainable HTML & CSS. http://amcss.github.io/

示例：

The original Bootstrap markup is heavily convention-based: all buttons require a btn class and a specific button class prefixed by btn-. It results in cluttered, repetitive markup.

The AM version, in contrast, uses the attribute am-Button as an identifier, and allows straightforward, natural, additive modifiers, e.g. large, primary, etc.

The CSS changes are quite straightforward: