css选择器，并行选择器_CSS中的选择器

最新推荐文章于 2023-03-14 09:00:29 发布

cumt30111

最新推荐文章于 2023-03-14 09:00:29 发布

阅读量639

点赞数

文章标签： css html css3 jquery java ViewUI

原文链接：https://www.includehelp.com/code-snippets/selectors-in-css.aspx

版权

css选择器，并行选择器

CSS选择器 (CSS Selectors)

In CSS the selectors identify specific HTML elements as targets for CSS styles. These selectors are used to connect HTML elements to their CSS to make them look more elegant.

在CSS中， 选择器将特定HTML元素标识为CSS样式的目标。这些选择器用于将HTML元素连接到其CSS，以使它们看起来更美观。

Syntax:

句法：

    Selector-type
    {
    //css code
    }

Basically, the selectors are categorized into the following types,

基本上， 选择器分为以下几种类型：

Universal selector
通用选择器
Tag selector
标签选择器
Grouping selector
分组选择器
Class selector
类选择器
ID selector
ID选择器
Child selector
子选择器

1)通用选择器 (1) Universal Selector)

The universal selector selects all elements and styles them. The prefix used is "*". All elements defined in the calling HTML file will be selected and styles are applied to them.

通用选择器选择所有元素并设置其样式。使用的前缀是“ *” 。将选择在调用HTML文件中定义的所有元素，并将样式应用于它们。

Example:

例：

<head>
    <style>
        * {
            background-color: red;
        }
    </style>
</head>
<html>

<body>
    <div>
        <p>Some content</p>
    </div>
</body>

</html>

Output

输出量

Here, "*" takes all the elements and set their background color to red.

此处， “ *”采用所有元素并将其背景色设置为红色。

2)标签选择器 (2) Tag Selector)

The tag selector selects the elements with specific tags(<div> or <p> etc) to connect it to the CSS for styling.

标签选择器选择带有特定标签( <div>或<p>等)的元素，以将其连接到CSS进行样式设置。

Syntax:

句法：

    tag-name{
        //css styling
    }

Example:

例：

<!DOCTYPE html>

<head>
    <style>
        p {
            Background-color: green;
        }
    </style>
</head>
<html>

<body>
    <div>
        <p>Some content</p>
    </div>
</body>

</html>

Output

输出量

Here, it takes all the elements of paragraph(<p>) tag and set their background color to green.

在这里，它采用了段落( <p> )标签的所有元素，并将其背景色设置为绿色。

3)分组选择器 (3) Grouping Selector)

The property grouping selector selects all the HTML elements with the same style definitions. Multiple tags are separated by "," .

属性分组选择器选择具有相同样式定义的所有HTML元素。多个标签用“，”分隔。

Syntax:

句法：

    tag-name1,tag-name2{
        //css styling
    }

Example:

例：

<!DOCTYPE html>

<head>
    <style>
        p,
        h1 {
            Background-color: green;
        }
    </style>
</head>
<html>

<body>
    <div>
        <h1>heading</h1>
        <p>Some content</p>
    </div>
</body>

</html>

Output

输出量

Here, it takes all the elements of paragraph(<p>) and heading1(<h1>) tag and set their background color to green.

在这里，它采用了段落( <p> )和heading1( <h1> )标记的所有元素，并将其背景色设置为绿色。

4)类选择器 (4) Class Selector)

The class selector selects the elements with specific class and style them. The prefix used is "."

类选择器选择具有特定类的元素并设置其样式。使用的前缀是“。”

Syntax:

句法：

    .class-name
    {
        //css styling
    }

Example:

例：

<!DOCTYPE html>

<head>
    <style>
        .head1 {
            font-size: 25px;
            background-color: #efefef;
            color: #f40;
        }
    </style>
</head>
<html>

<body>
    <h1 class="head1">heading</h1>
</body>

</html>

Output

输出量

Here, select and style all elements with class "head1".

在这里，选择所有样式为class “ head1”的元素。

5)ID选择器 (5) Id Selector)

The ID selector selects the elements with specific ID and style them. Here, the prefix used is "#".

ID选择器选择具有特定ID的元素并设置其样式。在这里，使用的前缀是“＃” 。

    #id{
        //css styling
    }

Example:

例：

<!DOCTYPE html>

<head>
    <style>
        #team1 {
            font-size: 25px;
            background-color: #f1f1f1;
            color: #f40;
        }
        
        #team2 {
            font-size: 30px;
            background-color: #f40;
            color: #f1f1f1;
        }
    </style>
</head>
<html>

<body>
    <div id="team1">
        <ol>
            <li>Aman</li>
            <li>Bharti</li>
            <li>Uma</li>
        </ol>
    </div>
    <div id="team2">
        <ol>
            <li>Manju</li>
            <li>Shivang</li>
            <li>Amit</li>
        </ol>
    </div>
</body>

</html>

Output

输出量

Here, the "team1" and "team2" are the ID selectors that selects the elements with id "team1" and "team2", and set the appropriate CSS styles.

在这里，“ team1”和“ team2”是ID选择器，用于选择ID为“ team1”和“ team2”的元素，并设置适当CSS样式。

6)儿童选择器 (6) Child Selector)

The child selector is used to select elements with a specific parent.

子选择器用于选择具有特定父元素的元素。

Syntax:

句法：

    element>element
    {
        //css styling
    }

Example:

例：

<!DOCTYPE html>

<head>
    <style>
        div > h2 {
            background: #f40;
            padding: 2px;
            font-size: 200%;
        }
    </style>
</head>
<html>

<body>
    <div>
        <h2>heading2</h2>
    </div>
</body>

</html>

Output

输出量

Here, the element on the left side of > is the parent and the element on the right is the children element.

在此， >左侧的元素是父元素，右侧的元素是子元素。

翻译自: https://www.includehelp.com/code-snippets/selectors-in-css.aspx

css选择器，并行选择器

cumt30111

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css选择器，并行选择器_CSS中的选择器

css选择器，并行选择器 CSS选择器 (CSS Selectors)In CSS the selectors identify specific HTML elements as targets for CSS styles. These selectors are used to connect HTML elements to their CSS to make them look mor...
复制链接

扫一扫

css选择器，并行选择器_CSS中的选择器

CSS选择器 (CSS Selectors)

1)通用选择器 (1) Universal Selector)

2)标签选择器 (2) Tag Selector)

3)分组选择器 (3) Grouping Selector)

4)类选择器 (4) Class Selector)

5)ID选择器 (5) Id Selector)

6)儿童选择器 (6) Child Selector)

“相关推荐”对你有帮助么？