What are the common problems with CSS selectors?
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!
Related reading:
JavaScript array-string-mathematical function
Simple CSS3 click response animation case
The above is the detailed content of What are the common problems with CSS selectors?. For more information, please follow other related articles on the PHP Chinese website!

Hot AI Tools

Undress AI Tool
Undress images for free

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

To change the CSS list style, first use list-style-type to change the bullet or numbering style. 1. Use list-style-type to set the bullet of ul to disc, circle or square, and the number of ol is decimal, lower-alpha, upper-alpha, lower-roman or upper-roman. 2. Remove the tag completely with list-style:none. 3. Use list-style-image:url('bullet.png') to replace it with a custom image. 4. Use list-style-position:in

Use CSS to create dotted borders, just set the border attribute to dotted. For example, "border:3pxdotted#000" can add a 3-pixel-wide black dot border to the element. By adjusting the border-width, the size of the point can be changed. The wider borders produce larger points. You can set dotted borders for a certain side, such as "border-top:2pxdottedred". Dotted borders are suitable for block-level elements such as div and input. They are often used in focus states or editable areas to improve accessibility. Pay attention to color contrast. At the same time, different from dashed's short-line style, dotted presents a circular dot shape. This feature is widely used in all mainstream browsers.

It is feasible to create a responsive automatic carousel slider with pure CSS, just combine HTML structure, Flexbox layout, and CSS animation. 2. First build a semantic HTML container containing multiple recommendation terms, each .item contains reference content and author information. 3. Use the parent container to set display:flex, width:300% (three slides) and apply overflow:hidden to achieve horizontal arrangement. 4. Use @keyframes to define a translateX transformation from 0% to -100%, and combine animation: scroll15slinearinfinite to achieve seamless automatic scrolling. 5. Add media

:nth-child() is used to select and style the elements according to the position of the elements in the same level, and is often used to create alternating styles or specific modes; 1. Use the even and odd keywords to achieve interlaced color changes, such as li:nth-child(even) to set the background of even items to light gray; 2. Use the an b formula to accurately control the selection rules, such as 3n 1 to select items 1, 4, 7, etc.; 3. Special modes such as -n 3 to select the first 3 child elements; 4. Note that nth-child counts from 1 and calculates all elements of the same level. If you need to count only by the same element, use nth-of-type().

Usebuilt-incursortypeslikepointer,help,ornot-allowedtoprovideimmediatevisualfeedbackfordifferentinteractiveelements.2.ApplycustomcursorimageswiththecursorpropertyusingaURL,optionallyspecifyingahotspotandalwaysincludingafallbacklikeautoorpointer.3.Fol

Using CSS to create a split screen layout can be implemented through Flexbox. First, set the container to display:flex and set the height to 100vh. Use flex:1 to divide the space evenly. The horizontal layout is only possible by default. Vertical layout needs to be set flex-direction:column. In conjunction with media query @media(max-width:768px) can achieve the mobile stacking responsive effect. If you need to fix the sidebar, set a fixed width for it. The main content area uses flex:1 to adapt to the remaining space. At the same time, it is recommended to use box-sizing:border-box globally to avoid padding affecting the layout, and ultimately achieve a simple and responsive split screen design.

CSSgradientsprovidesmoothcolortransitionswithoutimages.1.Lineargradientstransitioncolorsalongastraightlineusingdirectionsliketobottomorangleslike45deg,andsupportmultiplecolorstopsforcomplexeffects.2.Radialgradientsradiatefromacentralpointusingcircleo

Thehiddenattributeanddisplay:nonebothhideelementsbutdifferinsemantics,behavior,andusecases.1.ThehiddenattributeisasemanticHTMLfeaturethathideselementsandisoverriddenbyCSSunlessspecificityor!importantisused,whiledisplay:noneisapresentationalCSSrulefol
