Three common style selectors in html css
|
1: Tag selector The tag selector is used for all tags. Here we take p as an example, that is, all the tags with p will have this style. Copy code The code is as follows:<html> <head> <styletype="text/css"> p{font:"宋体"; color:#FF0000} </style> </head> <body> <pid="p1">I am now showing the tag selector</p> <pid="p2">I also use the tag selector</p> <h1>I am not modified by any selector</h1> </body> </html> 2: id selector . Note that the id selector is unique, because only id="yy" has this style, and the ID of an element in a page must be unique, so. . . You know that the id selector starts with # and is used as follows: id="" Copy code The code is as follows:<html> <head> <styletype="text/css"> #yy{font:"宋体"; color:#FF0000} </style> </head> <body> <pid="yy">I am now showing the id selector</p> <pid="p">I am not modified by the id selector</p> <h1>I am not modified by any selector</h1> </body> </html> 3: Class selector . Class selectors start with . Just set the element's class="" to display this style. The usage is: class="" Copy code The code is as follows:<html> <head> <styletype="text/css"> .yy{font:"宋体"; color:#FF0000} </style> </head> <body> <pclass="yy">I am now showing the class selector</p> <pclass="yy">I am not modified by the class selector</p> <h1>I am not modified by any selector</h1> </body> </html> |
<<: Centos8.3, docker deployment springboot project actual case analysis
>>: CSS perfectly solves the problem of front-end image deformation
Recommend
Nodejs converts JSON string into JSON object error solution
How to convert a JSON string into a JSON object? ...
Vue+echart realizes double column chart
This article shares the specific code of vue+echa...
CSS3 solution to the problem of freezing on mobile devices (animation performance optimization)
1. Use CSS, jQuery, and Canvas to create animatio...
CSS flexible layout FLEX, media query and mobile click event implementation
flex layout Definition: The element of Flex layou...
Will css loading cause blocking?
Maybe everyone knows that js execution will block...
When modifying a record in MySQL, the update operation field = field + string
In some scenarios, we need to modify our varchar ...
HTML+CSS project development experience summary (recommended)
I haven’t updated my blog for several days. I jus...
Quickly learn MySQL basics
Table of contents Understanding SQL Understanding...
When installing a virtual machine on Thinkpad VMware, the message "This host supports Intel VT-x, but Intel VT-x is disabled" appears (problem solution)
Today, when I was using VMware to install a new v...
MySql knowledge points: transaction, index, lock principle and usage analysis
This article uses examples to explain the princip...
JavaScript Timer Details
Table of contents 1. Brief Introduction 2. setInt...
Common CSS Errors and Solutions
Copy code The code is as follows: Difference betw...
An article to understand Linux disks and disk partitions
Preface All hardware devices in the Linux system ...
MySQL uses SQL statements to modify table names
In MySQL, you can use the SQL statement rename ta...
Detailed explanation of the use of CSS pointer-events attribute
In front-end development, we are in direct contac...