简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > Web Front-end > HTML Tutorial > body text

CSS 子选择器(六)_html/css_WEB-ITnose

WBOY
Release： 2016-06-24 11:46:20
Original
1254 people have browsed it

一、子选择器

子选择器中前后部分之间用一个大于号隔开，前后两部分选择符在结构上属于父子关系。

子选择器是根据左侧选择符指定的父元素，然后在该父元素下寻找匹配右侧选择符的子元素。

二、简单例子

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>子选择器</title><link type="text/css" rel="stylesheet" href="css/demo5.css"/></head><body><div>  <p>这是个段落   <a href="#">这是超连接</a>   </p></div></body></html>
Copy after login

@charset "utf-8";/* CSS Document *//*设置div下的p元素的样式*/div>p{    font-size:14px;    color:#0000FF;    }/*设置p元素下的a元素的样式*/p>a{    font-size:16px;    color:#FF0000;    text-decoration:none;}/*错误的写法 div 与a不是父子关系时，是取不到的*/div>a{    font-size:20px;    color:#FF0000;    text-decoration:none;}
Copy after login

子选择器很少用到，一般使用包含选择可以不受父子关系影响的选择

以下写法包含选择器

div a{    font-size:20px;    color:#FFFF00;    text-decoration:none;}
Copy after login

 

Related labels：
CSS 子选择器(六)
source：php.cn
Previous article：【CSS】响应式图片_html/css_WEB-ITnose Next article：html中设置滚动条的样式_html/css_WEB-ITnose
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
WordPress 6.0 (add_editor_style) does not load style.css in Gutenberg editor I'm taking the UdemyWordPress course to create a custom WordPress block theme. I successfu...
From 2023-11-12 20:37:50
0
2
261
Is it possible to use :nth-child() or :nth-of-type() with any selector? Is there a way to select the nth child element that matches (or doesn't match) an arbitrar...
From 2023-10-20 17:04:56
0
2
347
Decoding CSS selector priority/specificity I'd like to understand how CSS selectors handle attribute conflicts. How to select one pro...
From 2023-10-19 22:58:19
0
2
175
Learn how to effectively use compound selectors in CSS pseudo-class functions: host-context(<selector>) In the MDN documentation, :host-context() is defined as: :host-context() CSS pseudo-class ...
From 2023-09-16 15:49:33
0
1
621
CSS Color Variables - Rules or selectors are required when defining CSS colors Hello, I'm having the following problem: "At-rule or selector is required when defini...
From 2023-09-13 11:02:07
0
1
259
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！