JavaWeb CSS selector extension

CSS selector

Selector extension

Association selector

  • Nested use of labels. Some contents of the same label are displayed differently.
  • Need: write a sentence, I love to learn, to learn in bold. Add a style for the bold part of a paragraph: green, 30px.
Sample code

CSS file

@CHARSET "UTF-8";
p
{
	text-align: center;	
}

p b
{
	font-size: 30px;
	color:green;
}

p b: the space in the middle of the element represents the b element inside the p element.

HTML file

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>www.weiyuxuan.com</title>
		
		<link href="NewFile.css" type="text/css" rel="stylesheet">		
		
	</head>
	
	<body>
		<h1>Extension of selector</h1>
		
			<hr>
			<h2>Joint selector</h2>
			<p>I love<b>Study</b></p>	
			<b>I don't like learning</b>		
	</body>
	
</html>

Results:

Combination selector

  • Different labels display the same style.
  • Requirement: I want to style all the contents of p and b Tags: blue, 130px.
Sample code

CSS file

@CHARSET "UTF-8";
p,b
{
	font-size: 30px;
	color: red;
}

b,p: comma means that the elements on both sides use the current same style.

HTML file

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>www.weiyuxuan.com</title>
		
		<link href="NewFile.css" type="text/css" rel="stylesheet">		
		
	</head>
	
	<body>
		<h1>Extension of selector</h1>
		
			<hr>
			<h2>Joint selector</h2>
			<p>I love<b>Study</b></p>	
			<b>I don't like learning</b>		
	</body>
	
</html>

Results:

Pseudo element selector

  • In fact, there are some pre-defined selectors in html. It is called a pseudo element. Because of the terminology of CSS.
  • Format: tag name: pseudo element. Class name: pseudo element. Fine.
  • a:link hyperlink not clicked.
  • A: the status of visited.
  • a:hover cursor moves to the state on the hyperlink (not clicked).
  • A: status of active when clicking hyperlink.
Sample code

CSS file

@CHARSET "UTF-8";
a:link
{
	color: green;
	text-decoration: none;/*Underline Yes No*/
}

a:visited
{
	color: red;
	text-decoration: none;	
}

a:hover
{
	color: gray;
	text-decoration: underline;	
}

a:active
{
	color: navy;
	text-decoration: underline;	
	font-size: 30px;
}

HTML file

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>www.weiyuxuan.com</title>
		
		<link href="NewFile.css" type="text/css" rel="stylesheet">		
		
	</head>
	
	<body>
		<h1>Extension of selector</h1>
			<hr>
			<h2>Pseudo element selector</h2>				
			<a href="http://www.weiyuxuan.com">Wei Yu Huang</a>	
			<a href="http://www.baidu.com">Baidu</a>	
			<a href="http://www.sina.com">Sina</a>		
	</body>
	
</html>

Results:


CSS2.0 style sheet Chinese Manual

Extraction code: qxge

If there is any mistake, please correct it!

Posted on Sat, 30 Nov 2019 01:29:03 -0800 by neville