Hướng dẫn what does * do in css? - * làm gì trong css?

Xuất bản vào ngày 15 tháng 3 năm 2015by Rene SpronkBy Rene Spronk

Bạn có thể đã nhìn thấy tất cả các ký tự này trong các tệp CSS của mình, vậy chính xác họ làm gì? Trước khi chúng tôi trả lời rằng, các nhân vật mà chúng ta sẽ xem xét ngày hôm nay là:> [lớn hơn], + [dấu cộng] và ~ [tilde]. Trong CSS, chúng được gọi là bộ chọn. Bộ chọn là các mẫu được sử dụng để chọn phần tử bạn muốn tạo kiểu, mặc dù có nhiều bộ chọn khác nhau [một trang chuyên dụng của tất cả các bộ chọn CSS sẽ sớm tăng lên], chúng tôi sẽ chỉ xem xét ba trang chúng tôi đã đề cập.

1.> [lớn hơn] bộ chọn

Điều này được gọi là một người chọn trẻ em. Bộ chọn trẻ em CSS áp dụng cho các yếu tố là con của một yếu tố khác. Một yếu tố con là một yếu tố là hậu duệ trực tiếp hoặc trực tiếp của một yếu tố khác. Ví dụ: một bộ chọn của biểu mẫu E> Fiêu phù hợp khi phần tử F là hậu duệ trực tiếp của phần tử E. Hãy xem mã sau:
Lets look at the following code:

span { background-color: #fff; }
div > span {
   background-color: green;
}

This span is a direct child of the div.
This span is not a direct child of the div.

   This span is a direct child of the div.

Trong ví dụ trên, chỉ có hậu duệ trực tiếp của sẽ thay đổi màu nền của chúng thành màu xanh lá cây.

Kết quả sẽ trông như thế này:

Khoảng thời gian này là một đứa trẻ trực tiếp của div. Khoảng thời gian này không phải là một đứa trẻ trực tiếp của div. Span này là một đứa trẻ trực tiếp của div.
This span is not a direct child of the div.
This span is a direct child of the div.

2. + [cộng với dấu hiệu] bộ chọn

Điều này được gọi là một bộ chọn liền kề. Bộ chọn liền kề CSS sẽ chỉ chọn phần tử ngay trước phần tử trước. Hãy xem mã sau:
Lets look at the following code:

h4 + p {
   background-color: green;
}

Adjacent Selector Example
Paragraph number one should now have a green background.
Paragraph number two should have no affect.
Paragraph number three should have no affect.

Với ví dụ trên, đoạn đầu tiên sẽ thay đổi nền thành màu xanh lá cây, vì đây là phần tử đầu tiên đi trước phần tử.

Kết quả sẽ trông như thế này:

Khoảng thời gian này là một đứa trẻ trực tiếp của div. Khoảng thời gian này không phải là một đứa trẻ trực tiếp của div. Span này là một đứa trẻ trực tiếp của div.

2. + [cộng với dấu hiệu] bộ chọn

Điều này được gọi là một bộ chọn liền kề. Bộ chọn liền kề CSS sẽ chỉ chọn phần tử ngay trước phần tử trước. Hãy xem mã sau:

Với ví dụ trên, đoạn đầu tiên sẽ thay đổi nền thành màu xanh lá cây, vì đây là phần tử đầu tiên đi trước phần tử.

Ví dụ chọn lọc liền kề

Đoạn số một bây giờ nên có một nền màu xanh lá cây.

h4 ~ p {
   background-color: green;
}

General Selector Example
Paragraph number one should now have a green background.
Paragraph number two will also have a green background.
Paragraph number three will also have a green background.

Đoạn hai nên không có ảnh hưởng.

Kết quả sẽ trông như thế này:

Khoảng thời gian này là một đứa trẻ trực tiếp của div. Khoảng thời gian này không phải là một đứa trẻ trực tiếp của div. Span này là một đứa trẻ trực tiếp của div.

2. + [cộng với dấu hiệu] bộ chọn

Điều này được gọi là một bộ chọn liền kề. Bộ chọn liền kề CSS sẽ chỉ chọn phần tử ngay trước phần tử trước. Hãy xem mã sau:

Với ví dụ trên, đoạn đầu tiên sẽ thay đổi nền thành màu xanh lá cây, vì đây là phần tử đầu tiên đi trước phần tử.

Ví dụ chọn lọc liền kề

Nếu bạn thích sử dụng CSSportal, vui lòng xem xét chia sẻ trang này với người dùng khác, chỉ cần nhấp vào liên kết truyền thông xã hội ưa thích của bạn hoặc sao chép trang web từ liên kết bên dưới.

Cải thiện bài viết

Lưu bài viết

Đọc

Bàn luận

Cải thiện bài viết

Lưu bài viết

ĐọcCSS universal selectors. It can be used to select any and all types of elements in an HTML page. The asterisk can also be followed by a selector while using to select a child object. This selector is useful when we want to select all the elements on the page.
For example:

* {
    property : value;
 }

Bàn luận

parent * {
           property : value;
 }

Dấu hoa thị [*] được gọi là bộ chọn phổ quát CSS. Nó có thể được sử dụng để chọn bất kỳ và tất cả các loại phần tử trong một trang HTML. Dấu hoa thị cũng có thể được theo sau bởi một bộ chọn trong khi sử dụng để chọn một đối tượng con. Bộ chọn này rất hữu ích khi chúng tôi muốn chọn tất cả các yếu tố trên trang. & Nbsp; ví dụ: & nbsp; & nbsp;

grand_parent * grand_child{
           property : value;
 }

Examples:

Input:  * { color : green; }
Output:  The text in all the elements become green

Input:  * p { color : green; }
Output:  The text inside those  which are direct children of any elements of HTML the page will become green.

Trong khi chọn các phần tử, nếu chúng ta chỉ sử dụng dấu hoa thị [], thì tất cả các phần tử của trang HTML sẽ được chọn không phân biệt mối quan hệ cha mẹ con. Nếu chúng ta sử dụng dấu hoa thị [] trong khi chọn con cái của một phụ huynh cụ thể, vì vậy chúng ta có thể chọn tất cả con cái của cha mẹ đó bằng: & nbsp; & nbsp;

This span is a direct child of the div.
This span is not a direct child of the div.

   This span is a direct child of the div.

This span is a direct child of the div.
This span is not a direct child of the div.

   This span is a direct child of the div.

This span is a direct child of the div.
This span is not a direct child of the div.

   This span is a direct child of the div.

This span is a direct child of the div.
This span is not a direct child of the div.

   This span is a direct child of the div.

This span is a direct child of the div.
This span is not a direct child of the div.

   This span is a direct child of the div.

This span is a direct child of the div.
This span is not a direct child of the div.

   This span is a direct child of the div.

This span is a direct child of the div.
This span is not a direct child of the div.

   This span is a direct child of the div.

This span is a direct child of the div.
This span is not a direct child of the div.

   This span is a direct child of the div.

This span is a direct child of the div.
This span is not a direct child of the div.

   This span is a direct child of the div.

This span is a direct child of the div.
This span is not a direct child of the div.

   This span is a direct child of the div.

This span is a direct child of the div.
This span is not a direct child of the div.

   This span is a direct child of the div.

h4 + p {
   background-color: green;
}

h4 + p {
   background-color: green;
}

h4 + p {
   background-color: green;
}

h4 + p {
   background-color: green;
}

h4 + p {
   background-color: green;
}

h4 + p {
   background-color: green;
}

h4 + p {
   background-color: green;
}

h4 + p {
   background-color: green;
}

h4 + p {
   background-color: green;
}

Adjacent Selector Example
Paragraph number one should now have a green background.
Paragraph number two should have no affect.
Paragraph number three should have no affect.

h4 + p {
   background-color: green;
}

h4 + p {
   background-color: green;
}

h4 + p {
   background-color: green;
}

Adjacent Selector Example
Paragraph number one should now have a green background.
Paragraph number two should have no affect.
Paragraph number three should have no affect.

h4 + p {
   background-color: green;
}

Adjacent Selector Example
Paragraph number one should now have a green background.
Paragraph number two should have no affect.
Paragraph number three should have no affect.

h4 + p {
   background-color: green;
}

h4 + p {
   background-color: green;
}

h4 + p {
   background-color: green;
}

h4 ~ p {
   background-color: green;
}

Chúng ta có thể sử dụng dấu hoa thị [*] cho cấp độ trung gian trong khi chọn một phần tử bởi: & nbsp; & nbsp;

h4 + p {
   background-color: green;
}

h4 + p {
   background-color: green;
}

This span is a direct child of the div.
This span is not a direct child of the div.

   This span is a direct child of the div.

h4 ~ p {
   background-color: green;
}

This span is a direct child of the div.
This span is not a direct child of the div.

   This span is a direct child of the div.

This span is a direct child of the div.
This span is not a direct child of the div.

   This span is a direct child of the div.

h4 ~ p {
   background-color: green;
}

This span is a direct child of the div.
This span is not a direct child of the div.

   This span is a direct child of the div.

This span is a direct child of the div.
This span is not a direct child of the div.

   This span is a direct child of the div.

This span is a direct child of the div.
This span is not a direct child of the div.

   This span is a direct child of the div.

General Selector Example
Paragraph number one should now have a green background.
Paragraph number two will also have a green background.
Paragraph number three will also have a green background.

This span is a direct child of the div.
This span is not a direct child of the div.

   This span is a direct child of the div.

This span is a direct child of the div.
This span is not a direct child of the div.

   This span is a direct child of the div.

This span is a direct child of the div.
This span is not a direct child of the div.

   This span is a direct child of the div.

General Selector Example
Paragraph number one should now have a green background.
Paragraph number two will also have a green background.
Paragraph number three will also have a green background.

This span is a direct child of the div.
This span is not a direct child of the div.

   This span is a direct child of the div.

HTML

* {
    property : value;
 }

* {
    property : value;
 }

* {
    property : value;
 }

h4 ~ p {
   background-color: green;
}

* {
    property : value;
 }

This span is a direct child of the div.
This span is not a direct child of the div.

   This span is a direct child of the div.

h4 + p {
   background-color: green;
}

This span is a direct child of the div.
This span is not a direct child of the div.

   This span is a direct child of the div.

parent * {
           property : value;
 }

This span is a direct child of the div.
This span is not a direct child of the div.

   This span is a direct child of the div.

This span is a direct child of the div.
This span is not a direct child of the div.

   This span is a direct child of the div.

parent * {
           property : value;
 }

This span is a direct child of the div.
This span is not a direct child of the div.

   This span is a direct child of the div.

parent * {
           property : value;
 }

grand_parent * grand_child{
           property : value;
 }

parent * {
           property : value;
 }

This span is a direct child of the div.
This span is not a direct child of the div.

   This span is a direct child of the div.

grand_parent * grand_child{
           property : value;
 }

grand_parent * grand_child{
           property : value;
 }

grand_parent * grand_child{
           property : value;
 }

This span is a direct child of the div.
This span is not a direct child of the div.

   This span is a direct child of the div.

h4 + p {
   background-color: green;
}

h4 ~ p {
   background-color: green;
}

parent * {
           property : value;
 }

This span is a direct child of the div.
This span is not a direct child of the div.

   This span is a direct child of the div.

h4 + p {
   background-color: green;
}

This span is a direct child of the div.
This span is not a direct child of the div.

   This span is a direct child of the div.

grand_parent * grand_child{
           property : value;
 }

This span is a direct child of the div.
This span is not a direct child of the div.

   This span is a direct child of the div.

This span is a direct child of the div.
This span is not a direct child of the div.

   This span is a direct child of the div.

This span is a direct child of the div.
This span is not a direct child of the div.

   This span is a direct child of the div.

Input:  * { color : green; }
Output:  The text in all the elements become green

Input:  * p { color : green; }
Output:  The text inside those  which are direct children of any elements of HTML the page will become green.

Input:  * { color : green; }
Output:  The text in all the elements become green

Input:  * p { color : green; }
Output:  The text inside those  which are direct children of any elements of HTML the page will become green.

Input:  * { color : green; }
Output:  The text in all the elements become green

Input:  * p { color : green; }
Output:  The text inside those  which are direct children of any elements of HTML the page will become green.

This span is a direct child of the div.
This span is not a direct child of the div.

   This span is a direct child of the div.

h4 ~ p {
   background-color: green;
}

grand_parent * grand_child{
           property : value;
 }

This span is a direct child of the div.
This span is not a direct child of the div.

   This span is a direct child of the div.

h4 + p {
   background-color: green;
}

h4 ~ p {
   background-color: green;
}

parent * {
           property : value;
 }

This span is a direct child of the div.
This span is not a direct child of the div.

   This span is a direct child of the div.

This span is a direct child of the div.
This span is not a direct child of the div.

   This span is a direct child of the div.

parent * {
           property : value;
 }

This span is a direct child of the div.
This span is not a direct child of the div.

   This span is a direct child of the div.

parent * {
           property : value;
 }

This span is a direct child of the div.
This span is not a direct child of the div.

   This span is a direct child of the div.

This span is a direct child of the div.
This span is not a direct child of the div.

   This span is a direct child of the div.

h4 ~ p {
   background-color: green;
}

General Selector Example
Paragraph number one should now have a green background.
Paragraph number two will also have a green background.
Paragraph number three will also have a green background.

This span is a direct child of the div.
This span is not a direct child of the div.

   This span is a direct child of the div.

h4 ~ p {
   background-color: green;
}

General Selector Example
Paragraph number one should now have a green background.
Paragraph number two will also have a green background.
Paragraph number three will also have a green background.

This span is a direct child of the div.
This span is not a direct child of the div.

   This span is a direct child of the div.

h4 ~ p {
   background-color: green;
}

This span is a direct child of the div.
This span is not a direct child of the div.

   This span is a direct child of the div.

This span is a direct child of the div.
This span is not a direct child of the div.

   This span is a direct child of the div.

Output:

Trình duyệt được hỗ trợ:

Google Chrome 4.0
Internet Explorer 7.0
Firefox 2.0
Opera 9.6
Safari 3.1

Những gì được sử dụng cho trong CSS?

Dấu hoa thị [tức là "*"] được sử dụng để biểu thị bộ chọn phổ quát CSS.Một dấu hoa thị cũng có thể được theo sau bởi một bộ chọn.Điều này rất hữu ích khi bạn muốn đặt một kiểu cho tất cả các yếu tố của trang HTML hoặc cho tất cả các phần tử trong một phần tử của trang HTML.to denote a CSS universal selector. An asterisk can also be followed by a selector. This is useful when you want to set a style for of all the elements of an HTML page or for all of the elements within an element of an HTML page.

Có nghĩa là * CSS có nghĩa là gì?

Phong cách xếp tầng Sheetscss / Full Namenull

Bộ chọn * trong CSS là gì?

Như tên cho thấy, bộ chọn phổ quát trong CSS được sử dụng để chọn tất cả các phần tử trên trang HTML, chẳng hạn như, v.v. Do đó, các kiểu CSS được áp dụng cho bộ chọn phổ biến ảnh hưởng đến mọi yếu tố trên trang web [bao gồm và].Asterisk [*]: Biểu tượng biểu thị bộ chọn phổ quát trong CSS.Asterisk [*]: symbol denotes the universal selector in CSS.

Mục đích của * trong bộ chọn là gì?

Ví dụ về bộ chọn cơ bản: * sẽ khớp với tất cả các yếu tố của tài liệu.Chọn tất cả các yếu tố có tên nút đã cho.Ví dụ: Đầu vào sẽ phù hợp với bất kỳ phần tử nào.Chọn tất cả các yếu tố có thuộc tính lớp đã cho.match all the elements of the document. Selects all elements that have the given node name. Example: input will match any element. Selects all elements that have the given class attribute.

1.> [lớn hơn] bộ chọn

2. + [cộng với dấu hiệu] bộ chọn

Adjacent Selector Example

Khoảng thời gian này là một đứa trẻ trực tiếp của div. Khoảng thời gian này không phải là một đứa trẻ trực tiếp của div. Span này là một đứa trẻ trực tiếp của div.

Ví dụ chọn lọc liền kề

General Selector Example

Khoảng thời gian này là một đứa trẻ trực tiếp của div. Khoảng thời gian này không phải là một đứa trẻ trực tiếp của div. Span này là một đứa trẻ trực tiếp của div.

Adjacent Selector Example

Adjacent Selector Example

Adjacent Selector Example

General Selector Example

General Selector Example

General Selector Example

General Selector Example

Những gì được sử dụng cho trong CSS?

Có nghĩa là * CSS có nghĩa là gì?

Bộ chọn * trong CSS là gì?

Mục đích của * trong bộ chọn là gì?

Bài Viết Liên Quan

Toplist mới

Bài mới nhất

Chủ Đề