css的选择器概述

选择器问题

选择器的分组

你可以对选择器进行分组,这样,被分组的选择器就可以分享相同的声明。用逗号将需要分组的选择器分开。在下面的例子中,我们对所有的标题元素进行了分组。所有的标题元素都是绿色的。

h1,h2,h3,h4,h5,h6 {
    
    
  color: green;
  }

继承及其问题

想全部继承父元素属性,但是由于浏览器太多而无法全部理解继承采用如下方法

body  {
    
    
     font-family: Verdana, sans-serif;
     }

p, td, ul, ol, li, dl, dt, dd  {
    
    
     font-family: Verdana, sans-serif;
     }

想有自己的性格,不想全部继承如下方法

body  {
    
    
     font-family: Verdana, sans-serif;
     }

td, ul, ol, ul, li, dl, dt, dd  {
    
    
     font-family: Verdana, sans-serif;
     }

p  {
    
    
     font-family: Times, "Times New Roman", serif;
     }

参考网址:https://www.w3school.com.cn/css/css_syntax_pro.asp

选择器的分类

1.派生选择器

**通过依据元素在其位置的上下文关系来定义样式,你可以使标记更加简洁。**只在某个标签内部生效而非全部标签,所以要考虑上下文。

strong {
    
    
     color: red;
     }

h2 {
    
    
     color: red;
     }

h2 strong {
    
    
     color: blue;
     }

参考网址:https://www.w3school.com.cn/css/css_syntax_descendant_selector.asp

2.id选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

id 选择器以 “#” 来定义。

一个选择器,多种用法

即使被标注为 sidebar 的元素只能在文档中出现一次,这个 id 选择器作为派生选择器也可以被使用很多次(一个人只有一个身份证号,但是这个身份证可以办很多手机号):

#sidebar p {
    
    
	font-style: italic;
	text-align: right;
	margin-top: 0.5em;
	}

#sidebar h2 {
    
    
	font-size: 1em;
	font-weight: normal;
	font-style: italic;
	margin: 0;
	line-height: 1.5;
	text-align: right;
	}

在这里,与页面中的其他 p 元素明显不同的是,sidebar 内的 p 元素得到了特殊的处理,同时,与页面中其他所有 h2 元素明显不同的是,sidebar 中的 h2 元素也得到了不同的特殊处理。

参考网址:https://www.w3school.com.cn/css/css_syntax_id_selector.asp

3.类选择器

在 CSS 中,类选择器以一个点号显示:

.center {
    
    text-align: center}

在上面的例子中,所有拥有 center 类的 HTML 元素均为居中。

在下面的 HTML 代码中,h1 和 p 元素都有 center 类。这意味着两者都将遵守 “.center” 选择器中的规则。

<h1 class="center">
This heading will be center-aligned
</h1>

<p class="center">
This paragraph will also be center-aligned.
</p>

注意:类名的第一个字符不能使用数字!它无法在 Mozilla 或 Firefox 中起作用。

参考网址:https://www.w3school.com.cn/css/css_syntax_class_selector.asp

4.属性选择器

[title]
{
    
    
color:red;
}

在这里插入图片描述

参考网址:https://www.w3school.com.cn/css/css_syntax_attribute_selector.asp

猜你喜欢

转载自blog.csdn.net/LIUCHUANQI12345/article/details/109134209
今日推荐