css select all instances and summary

Others 2019-06-09 18:12:01 views: null

table of Contents

What is a selector?

在css中{}之前的部分就是”选择器”,”选择器”指明了{}中的”样式“的作用对象，也就是说该”样式“作用与网页中的哪些元素。
简单的来说,选择器就是帮助我们,选中要作用的标签.

That selectors are those who do?

  • Tag selector (selector element known)
  • ID selector
  • Class selector
  • Descendant selectors (aka contain selectors)
  • Descendant selector
  • Combination selector
  • Intersection selector
  • Universal selector
  • Adjacent Sibling Selector
  • General sibling selectors
  • Attribute selectors
  • Pseudo class selector

Tag selector

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>实例</title>
    <style type='text/css'>
      p,h3{     /*将 p 和 h3 用逗号分隔，就定义了一个规则。其右边的样式（color:red;）将应用到这两个选择器所引用的元素。逗号告诉浏览器，规则中包含两个不同的选择器。如果没有这个逗号，那么规则的含义将完全不同*/
        color:red;
      }
    </style>
  </head>
  <body>
    <h3>啦啦啦</h3>
    <p>你好</p>
    <img src="image/八重樱2.jpg" width="400px"  height="500px"> /*img插入图片 设置宽 高 (单位px)*/
    <p>我的朋友</p>
  </body>
</html>
  • Results of the

  • Summary tag selector can act directly on the multiple tags (comma separated intermediate selected grouping), tag selector to select all the label elements, such as div, ul, li, p, etc., regardless of possession of more than the label deep, can be selected, check that all, rather than one, so that the "common" rather than a "feature"

ID selector

/*格式 
1 以#开头 
2 其中ID选择器名称可以任意起名(最好不要起中文) 
3 ID的名称必须是唯一的*/
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>实例</title>
    <style type='text/css'>
        #tale{
            color: aqua;  /*设置颜色  浅绿色*/
        }
        #tiger{
            color: red;
        }
    </style>
  </head>
  <body>
    <p>
        <span id="tale">一二三四五 上山打</span><span id="tiger">老虎</span>
    </p>
  </body>
</html>
  • Results of the

  • Summarize the same page id can not be repeated, any label can be set id, id naming convention to the letter, there can be underlined numbers - sensitive strict distinction between aa and AA are two different property values

Class selector

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>实例</title>
    <style type='text/css'>
        .box{
            width: 240px;           /*设置div 宽*/
            height: 240px;          /*设置div 高*/
            margin-top: 5px;        /*设置上边距 */
            border: 5px solid black;/*设置div 边框 参数1(边框宽) 参数2(边框样式 实线) 参数3(边框颜色)*/
            background: aquamarine; /*设置div背景色 (碧绿色)*/  
        }
        .big{
            background-image: url("image/a.jpg"); /*设置div背景图 url(填图片链接)*/
            background-repeat: no-repeat ;/*设置背景重复方式 默认(repeat)水平和垂直方向上重复。
            (no-repeat)背景图像将仅显示一次。 (inherit)从父元素继承background-repeat属性的设置。
            (repeat-x)背景图像将在水平方向重复。 (repeat-y)背景图像将在垂直方向重复。*/
        }
    </style>
  </head>
  <body>
    <div class="box" ></div>
    <div class="box big"></div>/*可以使用类选择器为一个元素同时设置多个样式。我们可以为一个元素同时设置多个样式，但只可以用类选择器的方法实现，ID选择器是不可以添加多个ID名字的。*/
  </body>
</html>
  • Results of the

  • Code Example 2
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>实例</title>
    <style>
        .box {
            color: cyan;
            font-size: 40px;
                }
    </style>
</head>
<body>
    <div class="box" >
        <span>盒子里有</span><br>
        <span>小动物</span>
        <p>小猫咪</p>
        <p>小跳蛙</p>
        <p id = "t">小老虎</p>
    </div>
</body>
</html>
  • Results of the

  • Summary more efficient use of class selectors, can effectively reduce some of the redundancy of the code, while its children inherit part of the parent element attributes, do not go trying to use a class will finish our pages, this label should carry more than classes, common set style, each class may be small as possible, a common concept to allow more use of labels
  • Select the difference between classes and ID selector?
/*学习了类选择器和ID选择器，我们会发现他们之间有很多的相似处，是否两者可以通用使用呢？那么，我们先来总结他们的相同点和不同点：

相同点:
        可以应用于任何元素
不同点：
        ID选择器只能在文档中使用一次。与类选择器不同，在一个HTML文档中，ID选择器只能使用一次，而且仅仅一次。而类选择器可以使用多次。

到底使用id还是用class？
答案：尽可能的用class。除非一些特殊情况可以用id
原因：id一般是用在js的。也就是说 js是通过id来获取到标签*/

Descendant selectors

/*顾名思义，所谓后代，就是父亲的所有后代(包括儿子、孙子、重孙子等)。
语法：
    div p{
        css代码样式;
    }
使用空格表示后代选择器，上面的div是父元素，而p是div的后代元素。*/
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>实例</title>
    <style>
        div p{        
            color: cyan;    /*设置颜色为 蓝绿色(青色)*/
            font-size: 40px;
                }
    </style>
</head>
<body>
    <div>
            <span>盒子里有</span>
            <p>小猫咪</p>
            <p>小跳蛙</p>
    </div>
</body>
</html>
  • Results of the

  • Summary Using descendant selectors, restricted the selection range, which label under which div. Defining separate logic regions. Elements are nested layout specification is generally no more than 8 layers as well, a maximum of 256 nesting layer, beyond words selectors fail

Descendant selector

/*子代，仅仅表示父亲的亲儿子，只有亲儿子。使用>表示子代选择器。
语法：
    div>p{css代码样式;}  是可以一直 div>元素>元素>元素>元素 超过256层嵌套失效....*/
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>实例</title>
    <style>
        #box>p{
            color: darkorange;  /*设置颜色为 深橙色*/
            font-size: 80px;
    }
    </style>
</head>
<body>
    <div id="box">
        <div>
            <div>
                <div>
                    <p>
                        狸花猫
                    </p>
                </div>
            </div>
        </div>
        <p>
            大橘猫
        </p>
    </div>
</body>
</body>
</html>
  • Implementation of the results

  • Summary If you do not want to select any descendant elements, but to narrow the range, select only the children of an element, use the sub-element selectors
  • Understanding universal selector Code
/*通用选择器是功能最强大的选择器，它使用一个*号来表示，它的作用是匹配html中所有标签元素。使用它，我们可以对网页进行重置样式，以按照产品需求来开发对应的网页。
对页面中所有的文本设置为红色 */
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>实例</title>
    <style>
        *{                    
            color:slateblue; /*设置颜色为石蓝色*/
            font-size: 20px;
        }
    </style>
</head>
<body>
        <div class="zoo">
        <ul class="animal">
          <li>
            犬科动物
            <ul>
              <li>犬亚科
                <ul>
                  <li>灰狼</li>
                  <li>郊狼</li>
                  <li>黑背胡狼</li>
                </ul>
              </li>
              <li>狐亚科
                <ul>
                  <li>沙狐</li>
                  <li>赤狐</li>
                  <li>孟加拉狐</li>
                </ul>
              </li>
            </ul>
          </li>
          <li>
            猫科动物
            <ul>
              <li>猎豹亚科
                <ul>
                  <li>猎豹</li>
                </ul>
              </li>
              <li>猫亚科
                <ul>
                  <li>豹猫</li>
                  <li>金猫</li>
                  <li>美洲狮</li>
                </ul>
              </li>
            </ul>
          </li>
        </ul>
      </div>
</body>
</html>
  • Results of the

  • Universal selector is a summary of the most powerful selector, we can take advantage of his properties to help us in the development of rapid reconstruction style

Combination selector

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>实例</title>
    <style>
        div,p,h6,span,#h,.hhh{
            color: deeppink;     /*设置文本颜色为 深粉色*/
        }
    </style>
</head>
<body>
    <div>
        我是盒子
    </div>
    <p>我是p标签</p>
    <h6>我是h6标签</h6>
    <span>我是span标签</span>
    <h1 id="h" >我是h1标签</h1>
    <h3 class="hhh" >我是h3标签</h3>
</body>
</html>
  • Results of the

  • Summary In the case of a lot of elements to do the same operation, we can choose a combination of selectors, usually in the page layout when it will use a combination of selectors

Intersection selector

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>实例</title>
    <style>
        p{
            color: deeppink;
            font-size: 30px;
        }
        .p2{
            width: 150px;
            height:150px;
        }
        #p3{
            width: 300px;
            height: 300px;
        }
        p.p2{
            background: cyan;    /*设置背景颜色为 蓝绿色*/
            text-align: center;  /*设置文本水平  居中*/
        }
        p#p3{
            background: gold;   /*设置背景颜色为 金色*/
            text-align: center; /*设置文本水平  居中*/
            line-height: 300px; /*设置文本行高  等于父元素高度,实现水平垂直居中*/
            overflow: auto;     /*内容超出部分 自动上下滚动显示*/
        }/*hidden 隐藏 auto 自动下拉显示 fragments 超出部分,分段显示等比例  scroll 上下左右滚轴显示 */

    </style>
</head>
<body>
    <p>出山</p>
    <p class="p2" >琵琶行</p>
    <p id="p3" >告白之夜哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇</p>
</body>
</html>
  • Results of the

  • Summary intersection selector application, wherein the first marker must be a selector, the second selector or category must ID selector; no space between these two selectors. The role of ordinary stacking patterns set

Adjacent Sibling Selector

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>实例</title>
    <style>
        .box{
            width: 500px;
            height: 600px;
            font-size: 20px;
            background: cyan ;
        }
        .child-box1+.child-box2{
            font-size: 40px;
            color: red;
            text-align: center ;
        }
        #child-box3+p{
            font-size: 60px;
            color: brown;
            text-align: right ;
        }
    </style>
</head>
<body>
    <div class="box" >
        我是爸爸
        <div class="child-box1">
            我是大哥
        </div>
        <div class="child-box2">
            我是二弟
        </div>
        <div id="child-box3">
            我是三弟
        </div>
        <p>我是打酱油的</p>
    </div>
</body>
</html>
  • Results of the

  • Summary immediately after another element, both have the same parent element

General sibling selectors

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>实例</title>
    <style>
        .box{
            width: 500px;
            height: 600px;
            font-size: 20px;
            background: cyan;
        }
        .child-box1~#child-box3{
            font-size: 40px;
            color: red;
            text-align: center ;
        }
    </style>
</head>
<body>
    <div class="box" >
        我是爸爸
        <div class="child-box1">
            我是大哥
        </div>
        <div class="child-box2">
            我是二弟
        </div>
        <div id="child-box3">
            我是三弟
        </div>
        <p>我是打酱油的</p>
    </div>
</body>
</html>
  • Results of the

  • There are other elements between two elements sum up, both have the same parent element

Attribute selectors

/*属性选择器会尝试匹配精确的属性值
    [attr] 该选择器选择包含 attr 属性的所有元素，不论 attr 的值为何。
    [attr=val] 该选择器仅选择 attr 属性被赋值为 val 的所有元素。
    [attr~=val] 该选择器仅选择具有 attr 属性的元素，而且要求 val 值是 attr 值包含的被空格分隔的取值列表里中的一个。*/
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>实例</title>
    <style>
        /* 所有具有"data-vegetable"属性的元素将被应用绿色的文本颜色 */
        [data-vegetable] {
          color: green
        }
        /* 所有具有"data-vegetable"属性且属性值刚好为"liquid"的元素将被应用金色的背景颜色 */
        [data-vegetable="liquid"] {
          background-color: goldenrod;
        }
        /* 所有具有"data-vegetable"属性且属性值包含"spicy"的元素，
        即使元素的属性中还包含其他属性值，都会被应用红色的文本颜色 */
        [data-vegetable~="spicy"] {
          color: red;
        }
    </style>
</head>
<body>
    <i lang="fr-FR">Poulet basquaise</i>/*巴斯基香肠*/
    <ul>
      <li data-quantity="1kg" data-vegetable>Tomatoes</li>/*data-quantity 数量  data-vegetable 蔬菜 西红柿*/
      <li data-quantity="3" data-vegetable>Onions</li>/* 洋葱 */
      <li data-quantity="3" data-vegetable>Garlic</li>/*大蒜*/
      <li data-quantity="700g" data-vegetable="not spicy like chili">Red pepper</li>/*红辣椒*/
      <li data-quantity="2kg" data-meat>Chicken</li>/*鸡肉*/
      <li data-quantity="optional 150g" data-meat>Bacon bits</li>/*培根片*/
      <li data-quantity="optional 10ml" data-vegetable="liquid">Olive oil</li>/*液体*/
      <li data-quantity="25cl" data-vegetable="liquid">White wine</li>/*白葡萄酒*/
    </ul>
</body>
</html>
  • Results of the

  • 总结 属性选择器是一种特殊类型的选择器，它根据元素的 属性 和属性值来匹配元素。它们的通用语法由方括号 []组成，其中包含属性名称，后跟可选条件以匹配属性的值。 属性选择器可以根据其匹配属性值的方式分为两类： 存在和值属性选择器和子串值属性选择器。
  • 属性选择器的其他例子
/*属性选择器使用例子*/
            [for]{
                color: red;
            }

            /*找到for属性的等于username的元素 字体颜色设为红色*/
            [for='username']{
                color: yellow;
            }
            
            /*以....开头  ^*/ 
            [for^='user']{
                color: #008000;
            }
            
            /*以....结尾   $*/
            [for$='vvip']{
                color: red;
            }
            
            /*包含某元素的标签*/
            [for*="vip"]{
                color: #00BFFF;
            }
            
            /*指定单词的属性*/
            label[for~='user1']{
                color: red;
            }
            
            input[type='text']{
                background: red;
            }
/*这种情况的属性选择器也被称为“伪正则选择器”，因为它们提供类似 regular expression 的灵活匹配方式（但请注意，这些选择器并不是真正的正则表达式*/

伪类选择器

/*伪类选择器一般会用在超链接a标签中*/   
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>伪类选择器的使用</title>
      <style type="text/css">
      a:hover{         
        color:red;
     }
      </style>
    </head>
    <body>
    <a href="http://www.baidu.com">百度一下</a>
    </body>
    </html>
     
    /*没有被访问过a标签的样式*/
    a:link {
        color: green;
    }
    /*访问过后a标签的样式*/
    a:visited {
        color: yellow;
    }
    /*鼠标悬浮时a标签的样式*/
    a:hover {
        color: red;
    }
    /*鼠标摁住的时候a标签的样式*/
    a:active {
        color: blue;
    }
  • 执行结果

  • 伪类 W3C："W3C" 列指示出该属性在哪个 CSS 版本中定义（CSS1 还是 CSS2）。

属性 描述 CSS
:active 向被激活的元素添加样式。 1
:focus 向拥有键盘输入焦点的元素添加样式。 2
:hover 当鼠标悬浮在元素上方时，向元素添加样式。 1
:link 向未被访问的链接添加样式。 1
:visited 向已被访问的链接添加样式。 1
:first-child 向元素的第一个子元素添加样式。 2
:lang 向带有指定 lang 属性的元素添加样式。 2
  • 总结 一个 CSS 伪类（pseudo-class 是一个以冒号(:)作为前缀，被添加到一个选择器末尾的关键字，当你希望样式在特定状态下才被呈现到指定的元素时，你可以往元素的选择器后面加上对应的伪类（pseudo-class）。你可能希望某个元素在处于某种状态下呈现另一种样式，例如当鼠标悬停在元素上面时，或者当一个复选框被禁用或被勾选时，又或者当一个元素是它在DOM 树中父元素的第一个子元素时。

Guess you like

Origin www.cnblogs.com/guokaifeng/p/10993572.html
Recommended
Ranking
error: (-215:Assertion failed) !_img.empty() in function ‘cv::imwrite‘
Database migration between Navicat servers
Minimum number of rotation of the array: Array
balenaEtcher for mac (make a boot disk software) v1.5.67
Custom processing serialization and deserialization in jackson
Mu-en-mask system development software
Mastering Regular Expressions
Find mileage Java--
Web pages can not directly concern the public micro-channel number how to do? A key to arouse public concern number of micro-channel solutions
[CodeForces - 739B] Alyona and a tree Tree + [difference] + bipartite
Daily
More
2024-05-12(28)
2024-05-11(32)
2024-05-10(34)
2024-05-09(32)
2024-05-08(18)
2024-05-07(34)
2024-05-06(6)
2024-05-05(0)
2024-05-04(18)
2024-05-03(8)

Code World

© 2018 codetd.com