CSS——选择器

静待X
181 阅读2分钟

CSS——选择器

CSS所编写的内容在闭合标签下进行操作，而CSS作用HTML主要有三种方式...

一、类

诸如使用class属性，则在的属性标签下，用.号代替~=来表示class属性 

<style>
    .pastoral{
        color:green;
        /*作用于所有的class属性包含pastoral的元素*/
    }
    h1.pastoral{
        color:green;
        /*该选择器只给class属性中包含pastoral的h1元素使用下面的样式*/
    }
</style>
    <html>
    <h1>Not green</h1>
    <h1 class="pastoral">green</h1>
</html>

类选择器还可以匹配class属性值的子集，eg：

p.marine.pastoral {color: green}  

如下将会选中class属性值中包含有marine和pastoral的P元素。也就是说上面这条规则将会匹配到class="pastoral blue aqua marine"的P元素，但是不会匹配到class="pastoral blue"的P元素。

二、类型选择器

一个类型选择器匹配一种元素类型，类型选择器匹配该文档树中的所有此类元素

作用于元素的选择器只需在的闭合标签下直接使用元素名进行操作即可

eg：

h1{font-family: sans-serif}

三、id选择器

在html中，所有的元素都可以通过ID来唯一表示

ID选择器由"#"加元素的id属性值组成

而在在下面的代码中，选择器将只会匹配到ID属性值为"z98y"的H1元素，而不会匹配到P元素：

<HEAD>
  <TITLE>Match H1 only</TITLE>
  <STYLE type="text/css">
    H1#z98y { letter-spacing: 0.5em }
  </STYLE>
</HEAD>
<BODY>
   <P id=z98y>Wide text</P>
</BODY>  

在html中，ID选择器的优先级比属性选择器的优先级高，例如选择器#p123将比选择器[id=p123]的优先级高。

四、属性选择器

属性选择器共有四种：

  1. [att] 匹配设置了att属性的元素，不管属性的值是什么
  2. [att=val] 匹配att属性值等于"val"的元素
  3. [att~=val] 匹配这样的元素，该元素的att属性的值是一个由空白字符分隔的多个值组成的列表，这些值中有一个为"val"。如果"val"包含空白字符 ，则该条规则不生效（因为属性值列表就是有空白字符分隔的）。如果"val"是一个空字符串，该条规则也不生效。
  4. [att|=val] 匹配这样的元素，该元素的att属性要么就等于"val"，要么以"val"开头并且紧跟一个"-"(U+002D)。该规则主要用于匹配语言区域码。

属性值必须是标识符或者字符串。选择器中的属性名是否大小写敏感由文档语言决定。 例如，下面的选择器匹配设置了title属性的所有H1元素，不管title的值是什么：

h1[title] {color: blue}  

如下的选择器将会匹配所有的class属性值为"example"的SPAN元素：

span[class=example] {color: bule}  

多个属性选择器可以用于同一个元素的多个属性，甚至可以多次应用于同一个元素的同一个属性。 如下选择器匹配所有的hello属性值为"Cleveland"，并且goodbye属性值为"Columbus"的SPAN元素：

span[hello="Cleveland"][goodbye="Columbus"] {color: blue}

五、通配选择器（全局选择器）

如果HTML所有元素都需要一样的样式，一个一个分别定义样式会很麻烦，因此有了通配选择器，顾名思义：对全局元素进行CSS操作

使用"*"进行全局操作，如下图例子：所有网页的元素全部指定为红色

<style>
    *{
        color: red;
    }
</style>

tips：如果通配选择器与其他选择器一起使用，则通配选择器将会被省略

eg：

  • *[lang=fr] 与 [lang=fr] 相同
  • *.warning 与 .warning 相同
  • *#myid 与 #myid 相同

六、后代选择器

我们希望选择器可以匹配文档树中的某个元素，而这个元素又是另一个元素的后代元素（比如，匹配那些H1元素中的EM元素）。后代选择器就表达了这样的关系。一个后代选择器由两个或多个由空白字符分隔的选择器组成。形如"A B"的后代选择器匹配B元素，且B元素是A元素的任意一个后代

image-20220104193915062

image-20220104193935413

<style>
    
    h1 em{
        color: violet;
    } 
</style>
<body>
    <h1>When could <em>I</em>go <em>home</em></h1>
</body>

image-20220104194022263

<style>
    h1{
        color: tomato;
    }
    em{
        color: turquoise;
    }
    /* h1 em{
        color: violet;
    } */
</style>
<body>
    <h1>When could <em>I</em>go <em>home</em></h1>
</body>

七.子选择器

子选择器匹配某个元素当且仅当这个元素是另一个元素的子元素的时候。一个子选择器由两个或多个由">"分隔的选择器组成。 如下选择器将会设置所有是BODY的子元素的P元素的样式：

body > p {line-height: 1.3px}

下面这个选择器包含了后代选择器和子选择器：

div ol > li p  

该选择器匹配这样的P元素：这个P元素是LI的后代，而LI是OL的子元素，同时OL是DIV的后代。

八.相邻兄弟选择器

相邻兄弟选择器的语法形式为： E1 + E2，当中E2是该选择器的主体。选择器匹配这样的元素： E1和E2拥有共同的父元素，并且在文档树中，E1为在E2之前紧挨着E2的元素（忽略非元素节点，如文本节点和注释节点）。 因此，如下选择器表示当P元素为MATH元素的相邻兄弟元素时，P不缩进：

math + p {text-indent: 0}  

下面的这个例子减小了H1和紧随H1的H2的垂直距离：

h1 + h2 {margin-top: -5mm}  

下面的这个选择器在上面的例子基础上增加了一个类选择器，因此当H1有opener类时才会被这选中：

h1.opener + h2 {margin-top: -5mm}  
avatar
文章
阅读
粉丝