Home > Article > Web Front-end > What are the common problems with CSS selectors?

What are the common problems with CSS selectors?

php中世界最好的语言Original: 2018-03-08 15:51:312781browse

This time I will bring you some common problems with CSS selectors, and what are the precautions for dealing with common problems with CSS selectors. The following is a practical case, let’s take a look.

What are the common selectors?
1.Tag selector
p{ }/Select the element with the label named p/
2. Class selector
.box{ }/Select the element with the class name box Element/
3.ID selector
#header{ }/Select the element with id named header/
1.4Wildcard selector
{ }/Select all in the page Element/
1.5 Selector prefix
div.bd{}/Select the element with class name bd and label div/
1.6Attribute selector
[disabled] {}/Select all elements with the attribute disabled*/

What is the priority of the selector?
! important>inline style>ID selector>pseudo-class>attribute selector>class selector>element (type) selector>Universal selector(*)>Browser Usage scenarios for customizing

class and id?
id Quickly obtain label objects based on the unique id number provided. class puts some specific styles into a class class. If you need tags for this style, you can add this class.

Why do we need to delineate appropriate namespaces when using CSS selectors?
To prevent style pollution.

What do the following selectors mean?

#header{
}/选择id名为header的元素/
.header{
}/选择class名为header的元素/
.header .logo{
}/选择名为header元素内所有名为logo的元素/
.header.mobile{
}/选择class名为header且为mobile的元素/
.header p, .header h3{
}/选择class名为header内所有的p标签和h3标签/
#header .nav>li{
}/选择祖父元素id名为header内父元素class名为nav的标签下/
#header a:hover{
}/选择祖父元素id名为header内a标签被hover的元素/

List the pseudo-class selectors you know
:active adds styles to activated elements.
:focus Adds styles to elements with keyboard input focus.
:hover Adds a style to an element when the mouse is hovering over it.
:link Add styles to unvisited links.
:visited adds styles to visited links.
:first-child adds styles to the first child element of the element.
:lang Adds styles to elements with the specified lang attribute.

Run the following code to analyze the reasons for the output style.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>first-child  vs first-of-child</title>
<style>
/选中.item1,该元素是它父亲的第一个孩子/
.item1
:first-of-type
{
background: red;
}
/选中.item1,该元素是它父亲所有的 .item1孩子中的第一个/
.item1:first-child{
color: blue;
}
</style>
</head>
<body>
<div class="item1">item1</div>
<div class="ct">
<div class="item2">ct-item2</div>
<div class="item1">ct-item1</div>
<div class="item1">ct-itmm1</div>
<div class="item2">
<div class="item1">ct-item2-item1</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>first-child  vs first-of-child</title>
<style>
/选中.item1,该元素是它父亲的第一个孩子/
.item1:first-of-type{
background: red;
}
/选中.item1,该元素是它父亲所有的 .item1孩子中的第一个/
.item1:first-child{
color: blue;
}
</style>
</head>
<body>
<div class="item1">item1</div>
<div class="ct">
<p class="item2">ct-item2</p>
<div class="item1">ct-item1</div>
<div class="item1">ct-itmm1</div>
<div class="item2">
<div class="item1">ct-item2-item1</div>
</div>
</div>
</body>
</html>

:What are the functions and differences between:first-child and :first-of-type?
:first-child matches the first child element of a parent element, which can be said to be a structure the first child element on.
:first-of-type matches the first child element of the same type under a parent element.

If you encounter an attribute and want to know the compatibility, where can you check it?
Check it at caniuse.com.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

What are the common problems with CSS selectors?

Related articles