CSS selector and three features (2)

Time:2021-7-27

compound selector

Why use composite selectors?

  • It can quickly and efficiently select the target element label
  • Composite selectors are composed of one or more basic selectors through different combinations

Descendant Selectors

Parent child {attribute 1: attribute value 1; Attribute 2: attribute value 2;}

matters needing attention

  • Descendant selectors, also known as include selectors, can select descendants of the target element
  • The parent element is written in the front, and the child element is written in the back, separated by a space
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            .item a {
                color: red;
            }
        </style>
    </head>
    <body>
        <div class="item">
            < a href = "#" > internal links</a>
            < a href = "#" > internal links</a>
            < a href = "#" > internal links</a>
            < a href = "#" > internal links</a>
        </div>


        < a href = "#" > link</a>
        < a href = "#" > link</a>
        < a href = "#" > link</a>
        < a href = "#" > link</a>
    </body>
</html>

CSS selector and three features (2)

Child Selector

Parent > child {attribute 1: attribute value 1; Attribute 2: attribute value 2;}

matters needing attention

  • The child element selector can only select the of the target elementSon element
  • The parent element is written in the front, and the child element is written in the back, separated by >
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            ul>li {
                color: yellow;
            }
        </style>
    </head>
    <body>

        <ul>
            <li>< a href = "#" > link</a></li>
            <li>< a href = "#" > link</a></li>
            <li>< a href = "#" > link</a></li>
            <li>< a href = "#" > link</a></li>
        </ul>
    </body>
</html>

CSS selector and three features (2)

Intersection selector

The intersection selector consists of two selectors. The found label must meet the characteristics of both label 1 and label 2.

CSS selector and three features (2)

Tag 1. Tag 2 {attribute 1: attribute value 1; Attribute 2: attribute value 2;}

matters needing attention

  • Two label selectors are connected by. And there must be no spaces
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            p.red {
                color: #0000FF;
            }
        </style>
    </head>
    <body>
        < p class = "red" > paragraph</p>
        < p class = "red" > paragraph</p>
        < p class = "red" > paragraph</p>
        < p class = "red" > paragraph</p>
        < div class = "red" > split partition < / div >
        < div class = "red" > split partition < / div >
        < div class = "red" > split partition < / div >
        < div class = "red" > split partition < / div >
        <p>Paragraph</p>
        <p>Paragraph</p>
        <p>Paragraph</p>
        <p>Paragraph</p>
    </body>
</html>

CSS selector and three features (2)

Union selector

The union selector can select multiple label elements with the same style, separated by commas

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            p,div,span {
                color: #0000FF;
            }
            
        </style>
     </head>
    <body>
        <p>Paragraph</p>
        <p>Paragraph</p>
        <p>Paragraph</p>
        <p>Paragraph</p>

        < div > split partition < / div >
        < div > split partition < / div >
        < div > split partition < / div >
        < div > split partition < / div >

        <span>Span span</span>
        <span>Span span</span>
        <span>Span span</span>
        <span>Span span</span>
    </body>
</html>

CSS selector and three features (2)

test

1. Change login to red
  2. Change the links of all main navigation bars to orange
  3. Change the font of main navigation and survey navigation bar to 14px and regular script
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
     
            .site-r>a {
                color: red;
            }
      
            .nav a {
                color: orange;
            }
       
            .nav,.site-nav {
                Font: 14px "regular script";
            }
        </style>
   
    </head>
    <body>
        <!--  Main navigation bar -- >
        <div class="nav">
            <ul>
                <li>< a href = "#" > Company Homepage</a></li>
                <li>< a href = "#" > Company products</a></li>
                <li>< a href = "#" > Company Profile</a></li>
                <li>< a href = "#" > contact us</a></li>
            </ul>
        </div>
        
        <!--  Side navigation bar -- >
        <div class="site-nav">
            < div class = "site-1" > left navigation bar < / div >
            < div class = "site-r" > < a href = "#" > login < / a > < / div >
        </div>
    </body>
</html>

CSS selector and three features (2)

Link pseudo class selector

a: Link: unreached link
    a: Visited: visited links
    a: Hover: the link selected when the mouse passes
    a: Active: mouse selected link

Memory tips:Remember according to love hate

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            a {
                text-decoration: none;
                
            }
            a:link {
                color:blanchedalmond;
            }
            a:visited {
                color: yellow;
            }
            a:hover {
                color: red;
            }
            a:active {
                color: #0000FF;
            }
        </style>
    </head>
    
    <body>
        < a href = "#" > link</a>
        < a href = "#" > link</a>
        < a href = "#" > link</a>
        < a href = "#" > link</a>
    </body>
</html>

CSS selector and three features (2)

Composite selector summary

CSS selector and three features (2)

Label display mode

In the front end, thousands of tags are divided into roughly three types of block level elements, inline elements, inline block elements

Block level element block

Common: h1~h6 div UL Li P, etc

characteristic

  • He is more overbearing and monopolizes his own business
  • Degree height, outer margin and inner margin can be controlled
  • The width is 100% of the default container
  • To accommodate other block level elements and inline elements

matters needing attention

For text block level labels, do not put other block level elements

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            h2 {
                width: 200px;
                height: 200px;
                background-color: #0000FF;
               
            }
            
          </style>
    </head>
    <body>
          <h2></h2>
    </body>
</html>

CSS selector and three features (2)

Inline element

Common inline elements: < a > < U > < s > < del > < span > < b > < strong >, etc

characteristic

  • In the same row as other inline elements
  • Width and height do not take effect by default
  • The default width is its own width
  • Only text and other inline elements can be accommodated

matters needing attention

  • Links can no longer be placed
  • In special cases, a tag can put block level elements, but a needs to change the display mode
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        span {
            width: 200px;
            height: 200px;
            background-color: #0000FF;
        }
    </style>
</head>

<body>
    <span>hello </span>
    <span>hello</span>
    <span>hello</span>
    <span>hello</span>
    <span>hello</span>
    <span>hello</span>
    <span>hello</span>
    <span>hello</span>
</body>

</html>

CSS selector and three features (2)

Inline block element

Common inline block elements: < input / > < img / > < TD / >

characteristic

  • Can be on the same line as other inline block elements
  • You can set the width, height, inner margin and outer margin
  • The default width is its own width
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            input {
                width: 200px;
                height: 200px;
                background-color: #0000FF;
            }
            
        </style>
    </head>
    <body>
        <input type="text"><input type="text">
        <input type="text"><input type="text">
    </body>
</html>

CSS selector and three features (2)

summary

CSS selector and three features (2)

Label display mode conversion

Display: convert block to block level element

Display: inline is converted to inline elements

Display: convert inline block to inline block element

Row height

Measurement method of row height

CSS selector and three features (2)

Calculation of row height

Upper distance + height of content + lower distance

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            a {
                display: inline-block;
                height: 50px;
                width: 50px;
                background-color: pink;
                color: white;
                text-decoration: none;
                line-height: 50px;
                text-align: center;
            }
        </style>
    </head>
    <body
    
        < a href = "#" > Baidu</a>
    </body>
</html>

CSS selector and three features (2)

Single line text centered vertically

The height is equal to the row height, which enables the vertical center relationship of single line text

Relationship between height and row height

  • The line height is equal to the height to realize the vertical centering of single line text
  • The line height is greater than the height, and the text is lower
  • The line height is less than the height, and the text is above

Simple navigation bar case

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            body {
                font-size: 16px;
            }

            a {
            
                display: inline-block;
                height: 50px;
                width: 50px;
                color: white;
                background-color: pink;
                text-decoration: none;
                line-height: 50px;
                text-align: center;

            }

            a:hover {
                background-color: yellow;
                color: green;
            }
        </style>
    </head>
    <body>
        < a href = "#" > Baidu</a>
        < a href = "#" > Netease</a>
        < a href = "#" > Tencent</a>
        < a href = "#" > Google</a>
        < a href = "#" > Microsoft</a>
        < a href = "#" > Xiaomi</a>

        <hr />

        < a href = "#" > Baidu</a>
        < a href = "#" > Netease</a>
        < a href = "#" > Tencent</a>
        < a href = "#" > Google</a>
        < a href = "#" > Microsoft</a>
        < a href = "#" > Xiaomi</a>

        <hr />

        < a href = "#" > Baidu</a>
        < a href = "#" > Netease</a>
        < a href = "#" > Tencent</a>
        < a href = "#" > Google</a>
        < a href = "#" > Microsoft</a>
        < a href = "#" > Xiaomi</a>

        <hr />

        < a href = "#" > Baidu</a>
        < a href = "#" > Netease</a>
        < a href = "#" > Tencent</a>
        < a href = "#" > Google</a>
        < a href = "#" > Microsoft</a>
        < a href = "#" > Xiaomi</a>
    </body>
</html>

CSS selector and three features (2)

CSS background

background-color

Background color: background color   default: None

background-image

Background image: background image

  • Transparent: transparent (default)
  • URL: the default location of the background picture

bakground-repeat

Bakgrond repeat: background tile

CSS selector and three features (2)

bakground-position

Bakround position: background position
CSS selector and three features (2)

Background attachment

background-attachment:scroll | fixed

CSS selector and three features (2)

Background abbreviation

CSS selector and three features (2)

Background translucent

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            .transparent {
                width: 200px;
                height: 200px;
                background: rgba(0, 0, 0, 0.3);
            }
        </style>
    </head>
    <body>
        <div class="transparent"></div>
    </body>
</html>

CSS selector and three features (2)
CSS selector and three features (2)

be careful CSS3 features, so there is a compatibility problem

Background summary

CSS selector and three features (2)

Comprehensive case 1

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            .icon {
                width: 1920px;
                height: 1080px;
                background-color: transparent;
                Background image: URL (.. /.. / Web Photo / ms.jpg);
                background-repeat: no-repeat;
                background-attachment: fixed;
                background-position: center top;

            }
        </style>
    </head>
    <body>
        <div class="icon"></div>
    </body>
    
</html>

CSS selector and three features (2)

Comprehensive case 2

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            div {
                width: 200px;
                height: 50px;
                background-color: pink;
                Background image: URL (.. /.. / Web Photo / Sina. PNG);
                background-repeat: no-repeat;
                background-position: 10px center;
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
</html>

CSS selector and three features (2)

Comprehensive case 3

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            .nav {
                width: 100%;
                text-align: center;
            }

            .nav a {
                display: inline-block;
                width: 120px;
                height: 50px;
                line-height: 50px;
                text-decoration: none;
                Background image: URL (.. /.. / Web Photo / BG. PNG);

            }

            .nav a:hover {
                Background image: URL (.. /.. / Web Photo / BGC. PNG);
            }
        </style>
    </head>
    <body>
        <div class="nav">
            < a href = "#" > Baidu</a>
            < a href = "#" > Tencent</a>
            < a href = "#" > Sina</a>
            < a href = "#" > Netease</a>
            <a href="#">360</a>
            < a href = "#" > know</a>
        </div>
    </body>
</html>

CSS selector and three features (2)

Three features of CSS

CSS cascading

When a label has multiple identical styles, the proximity principle shall prevail

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            div {
                color: blue;
            }

            div {
                color: green;
            }
        </style>
        
    </head>
    <body>
        < div > the back waves of the Yangtze River push the front waves, and the front waves die on the beach < / div >
    </body>
</html>

CSS selector and three features (2)

matters needing attention

  • In case of style conflict, the principle of proximity shall prevail
  • Styles do not conflict and do not cascade

CSS inheritance

The child element inherits some styles of the parent element. Such as text start font start   line start and text color

Memory formula

Dragon born dragon wind born wind mouse born son can make a hole
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            div {
                color: blue;
            }
        </style>
    </head>
    <body>
        <div>
            <p>Paragraph</p>
        </div>
    </body>
</html>

CSS selector and three features (2)

CSS priority

matters needing attention

  • Cascading is performed when the selectors and styles are the same
  • Priority issues arise when selectors are different and styles are the same
  • There is no base level insurmountable between digits

Weight calculation formula
CSS selector and three features (2)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
              body {
                background-color: rgba(0,0,0,0.6);
            }
            div {
                color: #0000FF!important;
            }
            .nav {
                color:red;
            }
            #nav {
                color: yellow;
            }
            
            
        </style>
    </head>
    <body>
        <div class="nav" id="nav" style="color: #808080;"> Yao Zimo < / div >
    </body>
</html>

Weight superposition

The weight of the selector can be superimposed. The weight of the label selector plus a class selector is 0 0 1 1
                             The weight of class selector plus ID selector is 0 1 0
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            a {
                text-decoration: none;
            }
            
            .nav a {
                text-decoration: line-through;
                color: #00B5E2;
            }
        </style>
    </head>
    <body>
        <div class="nav">
            < a href = "#" > Baidu</a>
            < a href = "#" > Sina</a>
            < a href = "#" > Tencent</a>
            < a href = "#" > Netease</a>
        </div>
    </body>
</html>

The weight of the lower selector is greater than that of the upper selector, so the style set above is invalid
CSS selector and three features (2)

The inherited weight is 0

  • If the element is selected, it will be calculated according to the above formula
  • If no element is selected, the inherited weight is 0
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
       
           body{
                background: rgba(0,0,0,.6);
            }

            .nav {
                color: #018BD3;
            }

            p {
                color: red;
            }
        </style>
    </head>
    <body>
        <div class="nav">
            <p>Paragraph</p>
        </div>
    </body>
</html>

CSS selector and three features (2)

Weight 6 essence questions

First question

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    < meta name = "Keywords" content = "keyword 1, keyword 2, keyword 3" / >
    < meta name = "description" content = "description of the website" / >
    < title > question 1 < / Title >
    <style type="text/css">
        div div {
            color: blue;
        }

        div {
            color: red;
        }
    </style>
</head>

<body>
    <div>
        <div>
            <div>
                What color is this line of font?
            </div>
        </div>
    </div>
</body>

</html>

The weight added by the two label selectors: 0 0 2 0, so it is blue.

CSS selector and three features (2)![]

Second question

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    < meta name = "Keywords" content = "keyword 1, keyword 2, keyword 3" / >
    < meta name = "description" content = "description of the website" / >
    < title > question 2 < / Title >
    <style type="text/css">
        #father {
            color: red;
        }

        p {
            color: blue;
        }
    </style>
</head>

<body>
    <div id="father">
        <p>What color is this line of font</ p>
    </div>
</body>

</html>

When no element is selected, the inherited weight is 0, so it is blue

CSS selector and three features (2)

Question 3

<!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style type="text/css">
        div div div div div div div div div div div div {
            color: red;
        }

        .me {
            color: blue;
        }
    </style>
</head>

<body>
    <div>
        <div>
            <div>
                <div>
                    <div>
                        <div>
                            <div>
                                <div>
                                    <div>
                                        <div>
                                            <div>
                                                < div class = "me" > what color is this line of text? < / div >
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

There is no insurmountable between decimal levels, so the weight of class selector is high, so blue is selected
CSS selector and three features (2)

Question 4

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    < meta name = "Keywords" content = "keyword 1, keyword 2, keyword 3" / >
    < meta name = "description" content = "description of the website" / >
    < title > question 4 < / Title >
    <style type="text/css">
        div p {
            color: red;
        }

        #father {
            color: red;
        }

        p.c2 {
            color: blue;
        }
    </style>
</head>

<body>
    <div id="father" class="c1">
        <p class="c2">
            What color is this line of font?
        </p>
    </div>
</body>

</html>

If it is selected, the weight formula will be calculated, so blue is selected
CSS selector and three features (2)

Question 5

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style type="text/css">
        .c1 .c2 div{  
            color: blue;
        }
        div #box3 {  
            color:green;
        }
        #box1 div { 
            color:yellow;
        }
    </style>
</head>
<body>
    <div id="box1" class="c1">
        <div id="box2" class="c2">
            <div id="box3" class="c3">
                written words
            </div>
        </div>
    </div>
</body>
</html>

When an element is selected, check the weight. If the weights are consistent, check the distance from the selected element. If the distance is close, the style will take effect, so yellow

CSS selector and three features (2)

Question 6

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    < meta name = "Keywords" content = "keyword 1, keyword 2, keyword 3" / >
    < meta name = "description" content = "description of the website" / >
    < title > question 6 < / Title >
    <style type="text/css">
        #father #son {
            color: blue;
        }

        #father p.c2 {
            color: black;
        }

        div.c1 p.c2 {
            color: red;
        }

        #father {
            color: green !important;
        }
    </style>
</head>

<body>
    <div id="father" class="c1">
        <p id="son" class="c2">
            What color is this line of font?
        </p>
    </div>
</body>

</html>

When the element is selected, the weight formula is calculated, so it is blue

CSS selector and three features (2)