CSS selector type

Posted by misheck on Fri, 21 Jun 2019 20:06:09 +0200

Combinators

Include selectors (E F)

Select all F elements contained by the E element, separated by a space

<head>
    <style>
        ul li{color:red;}
    </style>
</head>

<ul>
    <li>12</li>
    <li>12</li>
    <li>12</li>
    <li>12</li>
</ul>
<ol>
    <li>33</li>
    <li>33</li>
    <li>33</li>
    <li>33</li>
</ol>

Subselector (E>F)

Selecting all the direct child elements F as E elements will have no effect on the deeper elements, indicated by the greater than sign.

<style>
    p>a{color:red;}
</style>

<div>
   <a href="#">Child Elements</a>
   <p><a href="#">descendant elements</a></p>
   <span><a href="#">Guess</a></span>
</div>

Adjacent selector (E+F)

Select the F element immediately after the E element, indicated by the + sign, and select the adjacent first sibling element

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p+span{color:red;}
    </style>
</head>
<body>
    <p>This is a p Label</p>
    <span>This is next to p The first of the elements</span>
    <span>This is the second</span>
</body>
</html>

Brother Selector (E~F)

Selects all F elements after the E element, acts on multiple elements, separated by ~

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p~span{color:red;}
    </style>
</head>
<body>
    <p>This is a p Label</p>
    <span>This is next to p The first of the elements</span>
    <span>This is the second</span>
</body>
</html>

attribute selectors

1.E[att]

Select E element with attr attribute

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        option[disabled]{color:red;}
    </style>
</head>
<body>
    <select name="Vehicle" id="Old driver">
        <option value="0">automobile</option>
        <option value="1" disabled>Train</option>
        <option value="2">aircraft</option>
        <option value="3">Ship</option>
    </select>
</body>
</html>

2.E[att="val"]

Select E element with att attribute and attribute value equal to value
He should not only conform to attributes, but also to values.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
       input[type="text"]{color:red;height: 100px;}
    </style>
</head>
<body>
    <form action="">
        <input type="text">
        <input type="password">
        <input type="radio">
        <input type="submit">
    </form>
</body>
</html>

3.E[att~="val"]

Select the element with att attribute and there is a val-compliant element in the list of attribute values

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      p[class~="p1"]{color:red;}
    </style>
</head>
<body>
   <p class="p1 pMore">Write freely</p>
   <p class="pMore">Write freely</p>
   <p class="p2 pMore">Write freely</p>
   <p class="p3 pMore">Write freely</p>
   <p class="pMore p1">Write freely</p>
</body>
</html>

4.E[att^="val"]

Select the element in the E element that has an att attribute and begins with "val".

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      p[class^="p"]{color:red;}
    </style>
</head>
<body>
   <p class="p1 pMore">Write freely</p>
   <p class="More">Write freely</p>
   <p class="p2 pMore">Write freely</p>
   <p class="3 pMore">Write freely</p>
   <p class="pMore p1">Write freely</p>
</body>
</html>

5.E[att$="val"]

Select the element in the E element that has the att attribute and ends with "val".

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      p[class$="p"]{color:red;}
    </style>
</head>
<body>
   <p class="p1 pMore">Write freely</p>
   <p class="More">Write freely</p>
   <p class="p2 pMore">Write freely</p>
   <p class="3 pMorep">Write freely</p>
   <p class="pMore p1">Write freely</p>
</body>
</html>

5.E[att*="val"]

Select E element with att attribute and a string containing "val"

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      a[href*="jd"]{color:yellow;}
    </style>
</head>
<body>
    <a href="http://Www.baidu.com ">Baidu</a>
    <a href="http://Www.jd.com ">Jingdong</a>
    <a href="http://Www.taobao.com ">Taobao</a>
</body>
</html>

Pseudo Class Selector

Defined by a colon, the state of an element is defined, such as click-and-press, click-to-finish, and so on.We've all been working with elements directly before.You can now change the style of an element's state by making it look more "dynamic".

1.E: link

Set the style of hyperlink a before it is accessed (specifically the a tag)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      a:link{color:red;}
    </style>
</head>
<body>
    <a href="#">Baidu</a>
</body>
</html>

2.E: visited

Set the outdated style of hyperlink a when the link has been visited (specifically the a tag)

a:visited{color:aqua;}

3.E: hover

Style when the mouse hovers over an element.Not limited to label a.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      ul li{display: inline-block;
          list-style: none;
          width: 100px;
          height: 40px;
          text-align: center;
          font-size: 16px;
          font-family: "Microsoft YaHei UI";
          line-height: 40px;
      }
      ul li:hover{background-color: #ff4400;
      color: #fff;
      }
    </style>
</head>
<body>
    <ul>
        <li>home page</li>
        <li>Page 2</li>
        <li>Page 3</li>
        <li>Page 4</li>
        <li>Page 5</li>
    </ul>
</body>
</html>

4.E: active

Set the style of the element when the mouse is pressed (not limited to a tag)

ul li:active{color: aqua;}

5.E: not(s)

Match element E without s selector

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div:not(#div2){color: aquamarine;}
        div:not(.d2){color:aqua;}
    </style>
</head>
<body>
   <div class="d1">Block Element</div>
   <div class="d1">Block Element</div>
   <div class="d1">Block Element</div>
   <div class="d2 d1">Block Element</div>
   <div class="d3" id="div2">Block Element</div>
</body>
</html>

6.E:first-child

It has its own parent element and is the first of its children

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
       li:first-child{color: #ff4400;}
    </style>
</head>
<body>
   <ul>
       <h2>Title</h2>
       <li>List Items</li>
       <li>List Items</li>
       <li>List Items</li>
       <li>List Items</li>
       <li>List Items</li>
   </ul>

   <ol>
       <li>List Items</li>
       <li>List Items</li>
       <li>List Items</li>
       <li>List Items</li>
       <li>List Items</li>
   </ol>
</body>
</html>

7.E:last-child

It has its own parent element and is the last one inside the parent element.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
       li:last-child{color: #ff4400;}
    </style>
</head>
<body>
   <ul>
       <h2>Title</h2>
       <li>List Items</li>
       <li>List Items</li>
       <li>List Items</li>
       <li>List Items</li>
       <li>List Items</li>
   </ul>

   <ol>
       <li>List Items</li>
       <li>List Items</li>
       <li>List Items</li>
       <li>List Items</li>
       <li>List Items</li>
   </ol>
</body>
</html>

8.E:only-child

The E element is matched when it is the only child element.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
       ol:only-child{color: #ff4400;}
    </style>
</head>
<body>

   <ol>
       <li>List Items</li>
       <li>List Items</li>
       <li>List Items</li>
       <li>List Items</li>
       <li>List Items</li>
   </ol>
</body>
</html>

Topics: Attribute

Programmer Think