CSS3 selector - property selector
Level 1: CSS3 - related concepts of property selector
Customs clearance knowledge
1,Of the following options, the attribute selector is( C)
A,div>span{color:red;}
B,#box{color:red;}
C,span[id]{color:red;}
D,span{color:red;}
2,The style rules are as follows:
p[class $= en]{font-weight:bold;}
The style rule will apply to options( B)Produce results.
A,<p class="end">...</p>
B,<p class="ten">...</p>
C,<p class="pend">...</p>
D,<p class="feand">...</p>
3,The style rules are as follows:
div[name ~= ten]{border:1px solid blue;}
The style rule will apply to options( A)Produce results.
A,<div name="ten a1">...</div>
B,<div name="ten-a1">...</div>
C,<div name="tena1">...</div>
D,<div name="div-ten">...</div>
4,The style rules are as follows:
p[class |= en]{font-size:20px;}
The style rule will apply to options( D)Produce results.
A,<p class = "en able">...</p>
B,<p class = "pen able">...</p>
C,<p class = "enable">...</p>
D,<p class = "en-able">...</p>
Level 2: CSS3 - property selector
Relevant knowledge
attribute selectors
The attribute selector is used to select the element with the specified attribute. The syntax format is as follows:
Selector [attribute name] {attribute: attribute value;}
For example: h1[id]{color:red;}
Text alignment properties
The text align attribute aligns the block level label and the text content in the cell accordingly. Attribute values can be: left, right, center, justify.
The vertical align attribute aligns the text content in the first level cell of the element in the row accordingly. Attribute values can be: bottom, top, middle, baseline.
If you want to set the text in the block level element to be vertically centered, a clever method introduced here is to set the line height of the text line as the height value of the block level element. What will happen if the settings are different? Smart you, you will be able to try out the rules!
Programming requirements
Please use the attribute selector in the Begin - End area of the right editor to style the text in the < div > tag containing the title attribute. The specific requirements are as follows:
- First set the text font size value to 25px
- Then set the horizontal alignment of the text to center.
Customs clearance code
<!DOCTYPE html>
<html>
<head>
<title>attribute selectors </title>
<style type="text/css">
div{
width:70px;
height:40px;
border:1px solid teal;
float:left;
}
li{list-style:none;}
/* ********* Begin ******* */
div[title]{
font-size: 25px;
text-align: center;
}
/* ********* End ******* */
</style>
</head>
<body>
<div name="a a1" class="a"></div>
<div name="b-1" class="b" title="nice"><li>nice</li></div>
<div name="b-2" class="b" title="to"><li>to</li></div>
<div name="b-3" class="b" title="meet"><li>meet</li></div>
<div name="b-4" class="b" title="you"><li>you</li></div>
<div name="a a2" class="a"></div>
</body>
</html>
Level 3: CSS3 - include and hyphen selectors
Relevant knowledge
Attribute value selector
The attribute value selector selects the element with the specified attribute and value.
The syntax format is as follows: selector [attribute name = attribute value] {attribute: attribute value;}
For example: h1[id=yyy]{color:red;}
Inclusion of property values and hyphen selectors
The selector for the attribute value selects the element in the attribute value that contains the specified vocabulary.
The syntax format is as follows: selector [attribute name ~ = specified vocabulary] {attribute: attribute value;}
The hyphen selector for an attribute value selects an element with an attribute value that begins with the specified value, which must be the entire word.
The syntax format is as follows: selector [attribute name ~ = prefix] {attribute: attribute value;}
Text bold attribute
Font weight sets the thickness of the font. The values can be bold, normal, lighter or 9 levels between 100 and 900.
Setting of element background color
The background color property sets the background color of the element. Property values are color words or color codes.
Programming requirements
Use the attribute selector to complete the CSS style in the Begin - End area of the editor on the right. The specific requirements are:
- Set the text bold effect in the < div > tag whose class attribute value is b to bold
- Add a background color to the < div > tag containing word a in the name attribute value, and set the color value to pink.
- Add the background color to the < div > tag with prefix b in the name attribute value, and set the color value to orange.
Customs clearance code
<!DOCTYPE html>
<html>
<head>
<title>attribute selectors </title>
<style type="text/css">
div{
width:70px;
height:40px;
border:1px solid teal;
float:left;
}
li{list-style:none;}
div[title]{
font-size:25px;
text-align:center;
}
/* ********* Begin ******* */
div[class=b]{
font-weight: bold;
}
div[name~=a]{
background-color: pink;
}
div[name|=b]{
background-color:orange;
}
/* ********* End ******* */
</style>
</head>
<body>
<div name="a a1" class="a"></div>
<div name="b-1" class="b" title="nice"><li>nice</li></div>
<div name="b-2" class="b" title="to"><li>to</li></div>
<div name="b-3" class="b" title="meet"><li>meet</li></div>
<div name="b-4" class="b" title="you"><li>you</li></div>
<div name="a a2" class="a"></div>
</body>
</html>
Level 4: CSS3 Prefix suffix selector
Relevant knowledge
Attribute value prefix selector
The attribute value prefix selector matches each element whose attribute value begins with the specified value.
The syntax format is as follows: selector [attribute name ^ = specified beginning] {attribute: attribute value;}
Substring selector for property values
The substring selector of the attribute value matches each element in the attribute value that contains the specified value.
The syntax format is as follows: selector [attribute name * = specified value] {attribute: attribute value;}
Attribute value suffix selector
The attribute value suffix selector matches each element whose attribute value ends with the specified value.
The syntax format is as follows: selector [attribute name $= specified end] {attribute: attribute value;}
Programming requirements
Use the attribute selector to complete the CSS style in the Begin - End area of the editor on the right. The specific requirements are:
- Set the text color in the < div > label starting with n in the title attribute value to blue
- Set the text color in the < div > tag containing o in the title attribute value to red
- Set the text color in the < div > tag ending with t in the title attribute value to green
Customs clearance code
<!DOCTYPE html>
<html>
<head>
<title>attribute selectors </title>
<style type="text/css">
div{
width:70px;
height:40px;
border:1px solid teal;
float:left;
}
li{list-style:none;}
div[title]{
font-size:25px;
text-align:center;
}
div[class="b"]{ font-weight:bold; }
div[name~="a"]{ background-color:pink; }
div[name|="b"]{ background-color:orange; }
/* ********* Begin ******* */
div[title^="n"]{
color: blue;
}
div[title*="o"]{
color: red;
}
div[title$="t"]{
color: green;
}
/* ********* End ******* */
</style>
</head>
<body>
<div name="a a1" class="a"></div>
<div name="b-1" class="b" title="nice"><li>nice</li></div>
<div name="b-2" class="b" title="to"><li>to</li></div>
<div name="b-3" class="b" title="meet"><li>meet</li></div>
<div name="b-4" class="b" title="you"><li>you</li></div>
<div name="a a2" class="a"></div>
</body>
</html>